mieki256's diary



2013/09/07() [n年前の日記]

#1 [cg_tools] MMDで出力したモブ子さん動画をゲーム用のキャラ画像に変換

こんな感じになった。

立っているモブ子さん
歩くモブ子さん
走るモブ子さん

以下は、全部並べてスプライトシート(?)にした画像。

_スプライトシート png (512x512(=(64x64)x8x8)、32color)
スプライトシート 64x64

PMCAで出力されたモブ子さんが Public Domain なので、せっかくだからこの画像も Public Domain ということで。2Dゲームのサンプルソースを書く際に使えるのではないかなと…。

作業手順。 :

一応、作業手順もメモしとく。
  1. MMDで動きを作成。
  2. RGBA(RGB+アルファチャンネルつき)をサポートした動画コーデックでAVI出力。今回、Ut Video RGBA を使って、256x256のサイズで出力した。
  3. AviUtl + PNGエクスポータープラグイン ver.001 で、AVI → アルファチャンネルつきの連番pngとして出力。
  4. ImageMagick の montage を使って、連番png を、256x256→64x64への縮小処理をしつつ、タイル状に並べて1枚の画像にする。
  5. GIMP で開いて、色調補正や、インデックスカラー化(フルカラー → 32色に変換)。
  6. EDGE2 で開く。
  7. 周囲に黒縁を追加。透明部分を選択領域にしてから選択領域反転。イメージ → 効果 → 縁を加える。
  8. つけた黒縁が任意のサイズからはみ出すので、ドット修正。ここが地味に面倒。
  9. キャプチャアニメ機能を使って動きを確認しつつドット修正。
  10. 問題が無ければ保存。ついでにアニメ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作成までやれてしまうのだけど。減色作業は、結果を目で見て確認しながら調整していくことが多いので、今回はそこまでやらないことにした。

出力結果は以下のような感じに。
ほとんどImageMagickで自動化

減色は 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 に伝えられるかどうかが分からないので、今回は別のツールで減色したほうがいいだろう、と思ったわけで。

この記事へのツッコミ

Re: MMDで出力したモブ子さん動画をゲーム用のキャラ画像に変換 by 通りすがり    2016/11/21 05:52
これ、すごいおもしろそうですね、
情報、感謝ですw

以上です。

過去ログ表示

Prev - 2013/09 - Next
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project