スナックelve 本店

バツイチ派遣40代女性の日記です

アニメーションスタンプ作ったのであれこれ

f:id:elve:20200426072910p:plain

というわけで審査待ち。
今回初めて動くスタンプ(アニメーションスタンプ)作っていろいろ引っかかったのでまとめとく。

まず
f:id:elve:20200426073008p:plain
creator.line.me

サイズ(ピクセル

スタンプ アニメーションスタンプ カスタムスタンプ メッセージスタンプ
メイン 240*240 240*240 240*240 240*240
タブ 96*74 96*74 96*74 96*74
スタンプ 370*320 320*270 370*320 370*320
ピンクの部分はAPNGじゃないといけない。*1
アニメーションスタンプだけサイズ違うので注意。
お絵かきソフトなんかで「lineスタンプ」的テンプレサイズ選ぶと書き直し必要になります(´;ω;`)ウゥゥ

APNG

アニメーションのフレーム(コマ)数は5~20です、とさらりと書いてあるのですが、これって1つのスタンプに最低5枚は必要って事なので!!!
つまりですね!! アニメーションスタンプ作成には最低でも
メイン 5枚
タブ 1枚
スタンプ 8スタンプ*5枚
46枚描かねばなりません!!
気合いだー!!!(´;ω;`)ウゥゥ

APNG作成

PNGのファイルを複数まとめてAPNGとす。
使用したソフトはApngComposite
www.vector.co.jp

APNGの繰り返し回数と時間(ディレイ)設定

無限ループだとはじかれます。再生時間MAX4秒。

これ計算が面倒なので、1秒で終わるアニメーション作って4回ループで統一しました。
3回ループ位がいいと思ったのですが、いろいろ割り切れなくなるし!!w

5フレームだったら200ms!
8フレームだったら125ms!

5フレームの設定例
f:id:elve:20200426081024p:plain

後なんか余白なくさないといけないはずで、その辺はソフトがうまく最適化やってくれてるんじゃないかと・・・リジェクトされたら考えますw

最初のフレーム

最初のフレーム(コマ)が表示されるので、アニメーション的に最後のコマと同じコマを最初に入れるといいと思います。そうすっと最後の動きだけ2コマ分表示されるので動きも落ち着くかな、とか。
f:id:elve:20200426075335p:plain
↑でおめでとう!! 表示がちょっと長く見える感じになるっすよ。
gifにするとこんな感じ
f:id:elve:20200426075830g:plain

ファイルのサイズ

300KB以下/スタンプ

アニメーションの動きのチェック

FireFox使え、とやたら書かれている気がするw
www.mozilla.org

メイン画像

こいつもアニメーションにしないといけない。サイズも違うからスタンプからそのまま流用できない。気をつけろ( ゚∀゚)・∵. グハッ!!

*1:アニメーションする・・・つまり複数枚必要