2014/02/07(金) [n年前の日記]
#3 [cg_tools][unity][dxruby] レンダリング画像からドット絵モドキを作るbatファイルを作り込んだり
_2014/02/02にアップロードした大崎一番太郎のスプライトシート
を、Unity上で表示してみたところ、なんだかゴミが表示されてしまって。
Unityに限らず、HTML5+JavaScriptでゲームを作る時もそうだけど。ドット絵の各パターンの上下左右に、1ドット程度の余白を入れておかないと、隣のパターン内のドットまで拾ってきて描画されてしまうことをすっかり忘れていたわけで。
仕方ないので、EDGE2で怪しいところを修正したけれど。今後もこういう実験をする機会がありそうだなと。
なので、 _2013/09/07に書いたbatファイル を ―― 3DCGソフトのレンダリング画像を縮小・黒縁をつけて、ドット絵っぽくするbatファイルを修正して、上下左右に1ドット幅の余白をつけるようにしてみたり。例えば、64x64ドットの出力結果を要求すると、62x62ドットで一旦作って、その画像の周囲に枠をつける、みたいな。
ついでに、/? や /h をつけると、ヘルプを表示するようにしてみたり。
_png2dotimg.bat
使い方はこんな感じ。
Unityに限らず、HTML5+JavaScriptでゲームを作る時もそうだけど。ドット絵の各パターンの上下左右に、1ドット程度の余白を入れておかないと、隣のパターン内のドットまで拾ってきて描画されてしまうことをすっかり忘れていたわけで。
仕方ないので、EDGE2で怪しいところを修正したけれど。今後もこういう実験をする機会がありそうだなと。
なので、 _2013/09/07に書いたbatファイル を ―― 3DCGソフトのレンダリング画像を縮小・黒縁をつけて、ドット絵っぽくするbatファイルを修正して、上下左右に1ドット幅の余白をつけるようにしてみたり。例えば、64x64ドットの出力結果を要求すると、62x62ドットで一旦作って、その画像の周囲に枠をつける、みたいな。
ついでに、/? や /h をつけると、ヘルプを表示するようにしてみたり。
_png2dotimg.bat
@echo off rem ImageMagickのフォルダパス set IMPATH=C:\Prog\ImageMagick-6.8.7-Q16 rem 縮小画像ファイルの頭につける文字列 set SMALL_STR=__tmp_small if "%1"=="" goto USAGE if "%1"=="/?" goto USAGE if "%1"=="/h" goto USAGE if "%1"=="-h" goto USAGE if "%1"=="--help" goto USAGE goto JOB :USAGE echo ImageMagickを使って、ドット絵モドキを作ります。以下の処理をします。 echo 縮小 → 黒縁追加 → 画像の周りに1ドットの余白を追加 → 一つの画像にまとめる echo. echo usage: echo. echo png2dotimg.bat 元画像名 出力画像名 縮小横ドット数 縮小縦ドット数 横に並べる個数 echo png2dotimg.bat 元画像名 出力画像名 縮小横ドット数 縮小縦ドット数 横に並べる個数 noborder echo png2dotimg.bat /? echo. echo example: echo. echo png2dotimg.bat src_*.png out.png 64 64 8 echo png2dotimg.bat src_*.png out.png 64 64 8 noborder echo png2dotimg.bat /? echo. echo * 元画像名は、hoge_*.png の形で指定 echo * noborderをつけると、1ドット余白を追加する処理をしない echo * /? , /h , -h , --help を渡すと、このヘルプを表示 echo. goto END :JOB set SRC=%1 set OUTIMG=%2 set IW=%3 set IH=%4 set TW=%5 if "%6"=="" goto BORDER if "%6"=="noborder" goto NOBORDER :BORDER rem 1ドットの余白をつける場合の処理 set /a SW=IW-2 set /a SH=IH-2 set SIMGSIZE=%SW%x%SH% set IMGSIZE=%IW%x%IH% set INUM=0 for %%A in (%SRC%) do ( rem 縮小、かつ、アルファチャンネルを2値化 %IMPATH%\convert %%A -resize %SIMGSIZE% -channel A -threshold 70%% __tmp0.png rem 黒縁をつける %IMPATH%\convert __tmp0.png ^( +clone -channel A -morphology EdgeOut Diamond +channel +level-colors black ^) -compose DstOver -composite __tmp1.png rem 上下左右に1ドットの余白をつける %IMPATH%\convert __tmp1.png -matte -bordercolor none -border 1 %SMALL_STR%_%%~nA.png rem 一時ファイルを削除 del __tmp0.png del __tmp1.png set /a INUM=INUM+1 ) goto TILES :NOBORDER rem 1ドットの余白をつけない場合の処理 set SIMGSIZE=%IW%x%IH% set IMGSIZE=%IW%x%IH% set INUM=0 for %%A in (%SRC%) do ( %IMPATH%\convert %%A -resize %SIMGSIZE% -channel A -threshold 70%% __tmp0.png %IMPATH%\convert __tmp0.png ^( +clone -channel A -morphology EdgeOut Diamond +channel +level-colors black ^) -compose DstOver -composite %SMALL_STR%_%%~nA.png del __tmp0.png set /a INUM=INUM+1 ) :TILES rem 一枚の画像に結合 set /a TH=((INUM-1)/TW)+1 echo image count = %INUM% echo tile = %TW% x %TH% %IMPATH%\montage -tile %TW%x%TH% -geometry %IMGSIZE% -background none %SMALL_STR%*.png %OUTIMG% echo %OUTIMG% を作成しました goto END :END
使い方はこんな感じ。
> png2dotimg.bat /? ImageMagickを使って、ドット絵モドキを作ります。以下の処理をします。 縮小 → 黒縁追加 → 画像の周りに1ドットの余白を追加 → 一つの画像にまとめる usage: png2dotimg.bat 元画像名 出力画像名 縮小横ドット数 縮小縦ドット数 横に並べる個数 png2dotimg.bat 元画像名 出力画像名 縮小横ドット数 縮小縦ドット数 横に並べる個数 noborder png2dotimg.bat /? example: png2dotimg.bat src_*.png out.png 64 64 8 png2dotimg.bat src_*.png out.png 64 64 8 noborder png2dotimg.bat /? * 元画像名は、hoge_*.png の形で指定 * noborderをつけると、1ドット余白を追加する処理をしない * /? , /h , -h , --help を渡すと、このヘルプを表示
> png2dotimg.bat src\osaki_*.png out.png 64 64 8 image count = 74 tile = 8 x 10 out.png を作成しました
◎ ImageMagickに与えるオプションについてメモ。 :
画像の周りに余白をつけたい場合、以下の指定でもできるらしい。
_Cutting and Bordering -- IM v6 Examples : Adding/Removing Image Edges
_Masks -- IM v6 Examples : Controlling Image Transparency
convert src.png -matte -bordercolor none -border 1 dst.png
- -matte は、アルファチャンネル情報に関係してるらしいけど、ちょっとよく分からず。+matte 、-alpha off 、-alpha on 等、色々あるようで。
- -bordercolor none で、枠の色を指定してる。フツーは、gray とか black とかを指定するけど、noneを指定してるので…たぶん透明色を指定してるのかなと。
- -border 1 で、1ドット幅の枠を指定してる。-border 10x0 なら、左右に10ドット枠をつけるけど上下にはつけない。-border 0x10 なら、上下に10ドット枠をつけるけど左右にはつけない、という指定になる。
_Cutting and Bordering -- IM v6 Examples : Adding/Removing Image Edges
_Masks -- IM v6 Examples : Controlling Image Transparency
[ ツッコむ ]
以上です。