store.line.me↑のアニメーション・スタンプを作るに当たって、作業の備忘録です。絵を描かないでLINEスタンプを作る事例はあまりないと思いますので、書き留めておきます。
素材
見たまんまなんですが、ライフゲームのアニメーションに文字を組み合わせて、アニメーション・スタンプを構成しています。素材としてはライフゲームの画像と文字の画像の2つからなります。
ライフゲームの画像
ライフゲームの画像については前回と同じく自作サイト:ライフゲーム(哀歌亭)で。ポチポチとひたすら作成しました。
文字の画像
今回は文字を付けることで解釈違いを減らすことをコンセプトにしていました。文字を自分で描ければ良いのですが、そもそも絵を描かずにLINEスタンプを作ろうとしているので、文字を描くこともできません。
フォント
「LINEスタンプ」+「フォント」で検索すると利用規約上、LINEスタンプに使用しても問題ないフォントを一覧にしたページがヒットすると思います。そこから、以下のフォントを使いました。
やさしさゴシックが通常の挨拶等、しろくまフォントはちょっとネガティブ気味だったり、ふざけていたりするスタンプに使いました。ラノベPOPは短く強調するときに使いました。
お絵かきソフト
文字の画像について、サイズや位置を調整するために、お絵かきソフトを導入しました。なんとなく簡単に使えそうなFireAlpacaを導入しました。
firealpaca.com文字の位置やサイズについては、適当に配置して一度完成させてから調整したり、ライフゲームの画像をレイヤーで読み込んで調整したりしました。後者の方が少し手間がいりますが、文字が多い場合は早く終わりますね。
アニメーションにする
具体的に、以下のようなLINEスタンプを作る場合で考えます。
ここまでの操作で素材が一通り揃います。ライフゲームの画像は以下のようになります。
文字の画像は以下のようになります。重ね合わせるので、透過PNGで作成します。(なお、サイズは小さくしています)
imageMagickで画像を切り抜いて、重ね合わせる
ライフゲームの画像をアニメーション・スタンプに適合するよう、270×270pxにします。手作業でやるのはすごく面倒くさいのでPowerShellからImageMagickを呼び出して、以下のように書きます。($fn_srcはライフゲームの画像のファイル名、$fn_dstは出力先のファイル名です。)
for ($i=0; $i -lt 16; $i++) {
[string]$setting = "270x270+0+0"#画像を抽出。magick $fn_src -crop $setting PNG00:$fn_dst}
同様に、文字の画像もImageMagickで重ね合わせます。($fn_textは文字の画像のファイル名です。)
for ($i=0; $i -lt 16; $i++) {#テキストを重ねる。magick $fn_dst $fn_text -gravity northwest -compose over -composite PNG00:$fn_dst}
実行すると、以下のようにできあがります。*1
APNG Assemblerでアニメーション・スタンプのファイルにする。
アニメーション・スタンプにする各フレームができあがりましたので、APNG形式にまとめます。APNG AssemblerのCLIで実行できる形式をダウンロードしておきます。"Browse all files"→apngasm-2.91-bin-win64.zip等です。
apngasm.sourceforge.netこれもPowerShellから呼び出していきます。
アニメーション・スタンプは1,2,3,4のいずれかキッチリの秒数で終わらないといけないので、ディレイの分子は1,2,3,4のいずれかとなります。ディレイの分母はフレーム数となります。
ここまででアニメーション・スタンプを作成することができます。素材を揃えるまでは手作業が多いですが、アニメーション化する箇所はPowerShellからImageMagick、APNG Assemblerを呼び出すことで自動化できました。体感では素材を揃える時間が3割程度、PowerShellを書いているのが7割程度でした。ImageMagickもAPNG AssemblerもWindowsのCLI環境で動作するバイナリがあるので、ずいぶん楽できました。