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

#2 [cg_tools][prog][neta] BGマップ用の素材画像が見つからず

HaxeFlixel で横スクロールゲームっぽいサンプルを書こうと思っているのだけれど。背景というか、マップに使う画像が問題で。ライセンス面が怖くて、各種サンプルに同梱されているソレは、迂闊に使えない…。

どこかに、制限が少ないライセンスになっている、BGチップ画像があれば助かるのだけど、巷で公開されているソレは、トップビュータイプのRPG向け画像ばかり。横スクロール用のBG素材は、まず見かけないわけで。

横スクロールゲームって、作る側にも遊ぶ側にも、もう需要が無いのかな。まあ、リアルタイム系ゲームのほとんどが3DCGに移行してる点が大きいのではと思うのだけど。

いずれ、ファミコンやスーファミ時代のゲームも、著作権が切れる時代が来るだろうけど。その頃にはマップ用画像も使い放題になるのだろうな…。いや、どうだろう…。そもそもそういうゲームは、誰も作ってないかもしれないか…。データだって残っているかどうか…。ROMやCD-ROMからの吸出し方とか、その頃には分からなくなってるよな…。画面解像度だって、間違いなく4K以上になってるだろうから、そのままコピペで使えないだろうし。

考えてみれば、江戸時代に描かれた大量の浮世絵を、著作権なんてとうに切れたはずの現代においてバンバン活用してるかというとそうでもないわけで。であれば、おそらく、現代のTVゲームも、未来ではガン無視されてる存在になってそう。あんなに苦労して作ったのになあ…。

以上、1 日分です。

過去ログ表示

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