【画像編集】ImageMagick 7で画像を操作してみます（後編）

昨日の記事の続きです。今回は引き続き使用例を紹介したいと思います。

convertコマンド

画像変換を行うとき、多くの場面ではこのconvertコマンドを通します。

現在のImageMagick 7では、"magick"コマンドの引数として"convert"を呼び出します。

例えば

magick convert a.png b.jpg

と入力すると、PNGの"a.png"ファイルの画像をそのままJPEGの"p.jpg"ファイルに出力します。ファイル形式は拡張子を見て自動で変換されます。

例えばここで-resizeオプションと-qualityオプションを追加して

magick convert a.png -resize x200 -quality 70 b.jpg

とすると、画像のアスペクト比を保ったまま横幅を200にリサイズし、品質70でJPEGファイルが圧縮されて保存します。このように、非常に多彩なオプションが存在し、色々な操作を行うことが出来ます。

以下が公式の説明ページです。

www.imagemagick.org

あまりに多すぎてとても把握しきれませんが、やりたいことをGoogleなどで検索すればなんとかなるかもしれません。

スプライトシートとは

ゲーム制作で例えばキャラや装備などのアイコンを大量に用いるとき、または2Dキャラクターをパラパラアニメの要領でアニメーションさせるときなどは、大量の画像が必要になります。1枚1枚ロードしても良いですが、ローディング時や描画時にパフォーマンスが問題となる場合があります。

こういう場合は、１枚の大きな画像ファイルに小さな画像を大量に配置して利用することが多いです。特にUnityの場合、複数のアイコン画像を一画面に同時に描画する場合にはドローコールバッチングが働き、描画負荷を大幅に減らせる可能性が高いです。

同じサイズの小さな画像を等間隔のマス目上に配置したものをスプライトシート、任意の異なるサイズの画像をパズルのように配置したものをテクスチャアトラスと呼ぶことが多いようです。

例えば、Adobe Animate（旧：Adobe Flash）では以下のように作成します。

helpx.adobe.com

スプライトシートを作ってみる

ImageMagickで、スプライトシートを作ってみます。

仮素材の作成

本来は素材となる画像ファイルを用意するのですが、仮画像の作成もImageMagickで行ってみます。

Windowsを例として説明すると、"makeicons.bat"などというファイルを作り、そのフォルダの下に"tmpimg"という空のフォルダを作り、バッチファイルを実行すると、仮のアイコン画像が作成されます。

@echo off
REM 連番の呼び出し
setlocal enabledelayedexpansion
for /l %%i in (1,1,80) do (
  set num=00%%i
  set num=!num:~-3,3!
  call :makeicon !num!
)
endlocal

REM アイコンの作成
:makeicon
magick convert -size 100x100 xc:none ^
 -fill "#CC0000" -draw "roundrectangle 0,0 99,99 20,20" ^
 -fill "#FFFFFF" -draw "roundrectangle 3,3 96,96 20,20" ^
 -fill "#990000"  -font "M+-1m-medium" -pointsize 60 -gravity center -annotate +0+0 %1 ^
 tmpimg/icon%1.png
exit /b

上記のバッチファイルを実行すると、icon001～080.pngと連番の付いたアイコンファイルが作成されます。

Macなど他のOSならシェルスクリプトを書けば良いのかな？　そもそもWindowsでもbash等使えますし

f:id:chirotec:20180805223246p:plain