2013/09/07(土) [n年前の日記]
#1 [cg_tools] MMDで出力したモブ子さん動画をゲーム用のキャラ画像に変換
こんな感じになった。
以下は、全部並べてスプライトシート(?)にした画像。
_スプライトシート png (512x512(=(64x64)x8x8)、32color)
PMCAで出力されたモブ子さんが Public Domain なので、せっかくだからこの画像も Public Domain ということで。2Dゲームのサンプルソースを書く際に使えるのではないかなと…。
以下は、全部並べてスプライトシート(?)にした画像。
_スプライトシート png (512x512(=(64x64)x8x8)、32color)
PMCAで出力されたモブ子さんが Public Domain なので、せっかくだからこの画像も Public Domain ということで。2Dゲームのサンプルソースを書く際に使えるのではないかなと…。
◎ 作業手順。 :
一応、作業手順もメモしとく。
一見すると、手順が多くて面倒そうに見えるけど。このパターン数をドット打ちで作っていくことを考えたら、圧倒的に楽で、早かったです。…もっとも、これが絵描きさんなら「ドット打ったほうが早いよ」と言い出しそうな予感。
利用したツールの入手先をメモ。
_VPVP - MikuMikuDance(MMD)
_或るプログラマの一生 >> Ut Video Codec Suite
_AviUtlのお部屋
_AviUtl 物置 - JPN takeshima - PNGエクスポータープラグイン
_ImageMagick: Install from Binary Distribution
_GIMP - Windows installers
_Windowsソフト|TAKABO SOFT - EDGE,EDGE2
今になって考えると…連番png を読み込んで、減色 → 黒縁をつける → タイル状に結合、といった処理をするスクリプトを書けば、ドット修正作業を減らせて楽だったかもしれないなあ…。
何はともあれ、MMD と、PMCA(モブ子さん)の作者様に感謝…。特に、モブ子さんが居なかったら、こんな作業を試す気にもならなかった。モブ子さん、マジ女神。
- MMDで動きを作成。
- RGBA(RGB+アルファチャンネルつき)をサポートした動画コーデックでAVI出力。今回、Ut Video RGBA を使って、256x256のサイズで出力した。
- AviUtl + PNGエクスポータープラグイン ver.001 で、AVI → アルファチャンネルつきの連番pngとして出力。
- ImageMagick の montage を使って、連番png を、256x256→64x64への縮小処理をしつつ、タイル状に並べて1枚の画像にする。
- GIMP で開いて、色調補正や、インデックスカラー化(フルカラー → 32色に変換)。
- EDGE2 で開く。
- 周囲に黒縁を追加。透明部分を選択領域にしてから選択領域反転。イメージ → 効果 → 縁を加える。
- つけた黒縁が任意のサイズからはみ出すので、ドット修正。ここが地味に面倒。
- キャプチャアニメ機能を使って動きを確認しつつドット修正。
- 問題が無ければ保存。ついでにアニメGIFもエクスポート。
- MMDで、最初から小さい画像サイズで出力するより、大きいサイズで出力しておいて、別のツールで縮小処理をしたほうがいいみたい。
- GIMPでインデックスカラーにすることで、透明部分と不透明部分の境界がハッキリする。また、わざと色数を減らすことで、ドット絵らしさも出てくる。
一見すると、手順が多くて面倒そうに見えるけど。このパターン数をドット打ちで作っていくことを考えたら、圧倒的に楽で、早かったです。…もっとも、これが絵描きさんなら「ドット打ったほうが早いよ」と言い出しそうな予感。
利用したツールの入手先をメモ。
_VPVP - MikuMikuDance(MMD)
_或るプログラマの一生 >> Ut Video Codec Suite
_AviUtlのお部屋
_AviUtl 物置 - JPN takeshima - PNGエクスポータープラグイン
_ImageMagick: Install from Binary Distribution
_GIMP - Windows installers
_Windowsソフト|TAKABO SOFT - EDGE,EDGE2
今になって考えると…連番png を読み込んで、減色 → 黒縁をつける → タイル状に結合、といった処理をするスクリプトを書けば、ドット修正作業を減らせて楽だったかもしれないなあ…。
何はともあれ、MMD と、PMCA(モブ子さん)の作者様に感謝…。特に、モブ子さんが居なかったら、こんな作業を試す気にもならなかった。モブ子さん、マジ女神。
◎ ImageMagickとBATファイルで頑張ってみた。 :
やっぱり自動化をしてみたい気分になってきたので、連番png書き出し後、縮小→黒縁追加→結合までを、ImageMagick だけで処理するBATファイルを書いてみたり。
その気になれば、ImageMagick で減色もできるし、アニメgif作成までやれてしまうのだけど。減色作業は、結果を目で見て確認しながら調整していくことが多いので、今回はそこまでやらないことにした。
出力結果は以下のような感じに。
減色は OPTPiX 1.31 を使って16色にした。また、EDGE2を使って、パレット内の色をいくつか調整。
予想はしてたけど、圧倒的に楽になった。ただ、アホ毛のあたりは見た目おかしくなったので、どうしてもドット修正は必要なのだろうなと。
使ったbatファイルは以下。
convdotimg.bat
convert に渡してるオプションの意味は、おおよそ以下の通り。
montage に渡しているオプションの意味は、おおよそ以下の通り。
batファイルを書く際にハマった箇所についてもメモ。
ImageMagick で黒縁をつける指定については、以下のページからのコピペ。
_Masks -- IM v6 Examples
_Morphology of Shapes -- IM v6 Examples
ImageMagick で減色までしたいなら、 _Quantization -- IM v6 Examples が参考になるかもしれず。ざっくり説明すると…。
ただ、自分が残したい色を ImageMagick に伝えられるかどうかが分からないので、今回は別のツールで減色したほうがいいだろう、と思ったわけで。
その気になれば、ImageMagick で減色もできるし、アニメgif作成までやれてしまうのだけど。減色作業は、結果を目で見て確認しながら調整していくことが多いので、今回はそこまでやらないことにした。
出力結果は以下のような感じに。
減色は OPTPiX 1.31 を使って16色にした。また、EDGE2を使って、パレット内の色をいくつか調整。
予想はしてたけど、圧倒的に楽になった。ただ、アホ毛のあたりは見た目おかしくなったので、どうしてもドット修正は必要なのだろうなと。
使ったbatファイルは以下。
convdotimg.bat
@echo off @rem 画像を縮小・黒縁をつけて一つの画像にまとめるbatファイル rem ---------------------------------------- rem 設定 rem ImageMagickのフォルダパスを指定 set IMPATH=C:\Prog\ImageMagick-6.8.5-Q8 rem 元画像を指定 set SRC=pat_*.png set IMGSIZE=64x64 rem 作業ファイル名の頭につける文字列を指定 set SMALLSTR=small rem スプライトシート画像ファイル名を指定 set OUTPUTIMG=spritesheet_fullcol.png set TILENUM=8x8 rem ---------------------------------------- for %%A in (%SRC%) do ( rem 縮小、かつ、アルファチャンネルを2値化 %IMPATH%\convert %%A -resize %IMGSIZE% -channel A -threshold 70%% __tmp0.png rem 黒縁をつける %IMPATH%\convert __tmp0.png ^( +clone -channel A -morphology EdgeOut Diamond +channel +level-colors black ^) -compose DstOver -composite %SMALLSTR%_%%~nA.png rem 一時ファイルを削除 del __tmp0.png ) rem 一枚の画像に結合 %IMPATH%\montage -tile %TILENUM% -geometry %IMGSIZE% -background none %SMALLSTR%*.png %OUTPUTIMG% echo %OUTPUTIMG% を作成しましたこのbatファイルの例では、pat_*.png という元画像(連番画像)を、spritesheet_fullcol.png という一つの画像にしている。
convert に渡してるオプションの意味は、おおよそ以下の通り。
- -resize 64x64 : 各画像を指定サイズに縮小。
- -channel A -threshold 70% : アルファチャンネルを70%の明るさを基準にして2値化。GIMPでインデックスカラー化することで得ていた効果 ―― 透明部分と不透明部分の境界をハッキリさせる効果を、これで得ている。50% や 25% にすれば、見た目がもっとほっそりとした感じの画像が得られる。(透明部分のドットが増える。)
- 黒縁をつけるオプションは自分もよく分かってない。とりあえず、+level-colors black で、黒縁になる。赤い縁にしたいなら、+level-colors red と指定するらしい。
montage に渡しているオプションの意味は、おおよそ以下の通り。
- -tile 8x8 : 8x8個で画像を並べる。
- -geometry 64x64 : 1枚分のサイズを指定。
- -background none : 背景色を透明にする。
batファイルを書く際にハマった箇所についてもメモ。
- コマンドのオプションに「%」を渡さないといけない場合、batファイル中では、「%」を「%%」にする。
- for %%A in (*.jpg) do ( 〜 ) の括弧の中に、「(」「)」が出てくる場合は、「^(」「^)」といった具合に、「^」を括弧の前につける。
- %%A にファイル名が入っていて、拡張子を取り除いたファイル名を取得したければ、%%~nA と書く。
ImageMagick で黒縁をつける指定については、以下のページからのコピペ。
_Masks -- IM v6 Examples
_Morphology of Shapes -- IM v6 Examples
ImageMagick で減色までしたいなら、 _Quantization -- IM v6 Examples が参考になるかもしれず。ざっくり説明すると…。
- -colors 32 : 32色に減色。
- +dither : ディザを無効化。(おそらく、デフォルトはディザ有効。)
ただ、自分が残したい色を ImageMagick に伝えられるかどうかが分からないので、今回は別のツールで減色したほうがいいだろう、と思ったわけで。
この記事へのツッコミ
[ ツッコミを読む(1) | ツッコむ ]
以上です。
情報、感謝ですw