store.line.me↑のアニメーション・スタンプを作るに当たって、作業の備忘録です。絵を描かないでLINEスタンプを作る事例はあまりないと思いますので、書き留めておきます。
見たまんまなんですが、ライフゲームのアニメーションに文字を組み合わせて、アニメーション・スタンプを構成しています。素材としてはライフゲームの画像と文字の画像の2つからなります。
ライフゲームの画像については前回と同じく自作サイト：ライフゲーム(哀歌亭)で。ポチポチとひたすら作成しました。
今回は文字を付けることで解釈違いを減らすことをコンセプトにしていました。文字を自分で描ければ良いのですが、そもそも絵を描かずにLINEスタンプを作ろうとしているので、文字を描くこともできません。
「LINEスタンプ」+「フォント」で検索すると利用規約上、LINEスタンプに使用しても問題ないフォントを一覧にしたページがヒットすると思います。そこから、以下のフォントを使いました。
やさしさゴシックが通常の挨拶等、しろくまフォントはちょっとネガティブ気味だったり、ふざけていたりするスタンプに使いました。ラノベPOPは短く強調するときに使いました。
文字の画像について、サイズや位置を調整するために、お絵かきソフトを導入しました。なんとなく簡単に使えそうなFireAlpacaを導入しました。
firealpaca.com文字の位置やサイズについては、適当に配置して一度完成させてから調整したり、ライフゲームの画像をレイヤーで読み込んで調整したりしました。後者の方が少し手間がいりますが、文字が多い場合は早く終わりますね。
具体的に、以下のようなLINEスタンプを作る場合で考えます。
ここまでの操作で素材が一通り揃います。ライフゲームの画像は以下のようになります。
文字の画像は以下のようになります。重ね合わせるので、透過PNGで作成します。(なお、サイズは小さくしています)
ライフゲームの画像をアニメーション・スタンプに適合するよう、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形式にまとめます。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環境で動作するバイナリがあるので、ずいぶん楽できました。
ikatake.hateblo.jpはじめてLINEスタンプを作ってみて↑のようなものを作った結果、10ダウンロードぐらいされました。第1弾のLINEスタンプはシンプルなものの、送り手と受け手で解釈違いが起こる余地を多分に残しているのが課題でした。この課題を克服すべく、文字付きのLINEスタンプを作成することにしました。
※LINEスタンプは1フレーム目がスタンプ選択時の表示に使われ、アニメーションには表示されないようになります。そのため実際とは若干の見た目が異なります。
基本的な挨拶はグライダーでバッチリですね。
待ち合わせで使えるスタンプも揃っています。"向かっています"は軽量型宇宙船、"待ってます"は時計IIです。他にもトラブルに陥ったことを伝えるスタンプもあります。
ちなみにこのスタンプの中では左→右が正の変化と扱っています。そのため逆の電車を左←右の軽量型宇宙船で示しました。
食事といえばイーターですね。"おなかすいた"はイーターが固定物体なのでアニメーションにするのにちょっと苦労しました。
何もかもが終わったときに使ってください。
「それは草ｗｗｗ」の代わりに使ってください。
焦っているときや、テンションが上がってきたときに使ってください。
ソシャゲのメンテ明けを待つときなどに使います。
思ったような進捗が出ていないときに使います。
後悔しているときに使います。時計IIが逆回転しています。わかりにくいので矢印を付けました。
気軽に挨拶をするときに使います。YOってアプリ流行りましたね。
このほか全24種類が揃って\250。大体1個10円。安い！買ってください！！！
全く原因不明で、朝御飯食べた後に5回下痢が出て、その後シャワー浴びてたら嘔吐を5回ぐらい出した。
起きる前に見た夢、「池の水、全部抜く」をやっていた。ヘドロにまみれながら作業をしていた。
夢で伏線を張るな。
鳩除けの薬剤を設置する。
