ノーメモリーの人のブログ

ファンタスティックアトモスフィア

ラインスタンプ「動いちゃうガウス分布くん」

LINEでアニメーションスタンプが作れるようになったので、動いちゃうガウス分布くんを作りました。
store.line.me

個人的に頑張ったのは、EXILEっぽい動きをするスタンプです。
以下作成時に詰まったところを書いていこうと思います。



アニメーションpngを作れるソフトがない

macでフリーでアニメーションpngを作れるソフトが見つからなかったので、
以下のサイトを参考にAPNG Assemblerを使って作りました。
ターミナルでコマンドを打って静止画をアニメーションにできます。
出来たapng画像はmacsafariブラウザで動きを確認できますが、
なぜか指定したループ回数より1回多く表示されたので紛らわしかったです。
masakuraya.com

アニメーション時間は1〜4の整数秒でなければならない

アニメーションがいい感じに見えるフレームレートを指定しても、
全体で整数秒にならないとだめだったので、頭とお尻に同じ画像を水増しさせたりして何とか調整しました。
今回はかなり手抜きなので、速いもので8fps、遅いものは2fpsです。

最低5〜最高20フレームに収める

最低5枚必要で、かつ同じ画像を連続で表示した場合は1フレームとカウントされる可能性があるとのことだったので、
少なくとも5種類の画像が必要なのか?
2枚の画像を描いて交互に表示したりはできないのか?
と思ったですが、できました。
AとBの画像を2fpsで交互に表示し全体で4秒のアニメーションにする場合、
[AB][AB][AB][AB]
と4回ループを指定するとだめです。
こういうときは、
[ABABABAB]
このように全体が8枚の画像で1回きりの再生にすると、
2種類の画像でも大丈夫です。

アニメーションの1枚目を、静止したときに表示されるものにする

これは私がアニメーションpngの仕組みをよくわかっていませんでした。
アニメーションを作ってから1枚目を何かしらの方法で指定する?のかと何となく思っていましたが、
単純に静止したときに表示したい画像をアニメーションの1枚目として含めて作成すれば大丈夫でした。


以上です。