【Aseprite】TwitterにあげるGIF動画の問題を解決する方法

Aseprite側が悪いのかはわかりませんが、少なくとも私の環境だとAsepriteでGIFを作成してTwitterにアップすると、最終フレームの速度が異常に速くなったり、スキップされて見えたりします。

I had faced a probrem when I posted a GIF. It was speeded up unexpectedly.

仮にフレーム数を８で、それぞれのフレームを150msに設定した状態の歩きモーションを描いたとします。

For example, there is a document including 8 frames in a timeline.

And their duration are 150 ms.

TwitterにGIFをあげると、最終フレームだけ挙動がおかしくなるが、毎回そうというわけでもない。

よって、アニメーションの最後にいわゆる捨てフレームをこちらで用意しておけば、仮におかしくなっても被害は最小限に食い止められる。

ちなみにGIF出力時のTwitter向け設定ですが、最終フレームの秒数が短い場合は、そんなに気にするほどのことではないようです。（見た感じ）

キャラクターが歩くだけのアニメーションを作りました。

こちらは８フレームでモーションが完結するようになっています。

しかし元の８フレームでGIF出力してTwitterにあげると、どう見てもおかしくなったので捨てフレームを用意して、合計９フレームになりました。

（１）〜（７）のフレーム時間を135msに設定

（８）は100msに設定

捨てフレームとして用意した（９）は35msに設定

（８）と（９）はモーションというか描かれている絵は全く一緒です。

単純に同じ絵を２つのフレームに複製しただけですね。

違うのは秒数だけ。

（８）と（９）の秒数は合計した場合、他のフレームと同じ時間になるようにしています。

（９）だけ秒数をめちゃくちゃ縮めているのは、Twitterにあげた時フレーム（９）のところで、異常な速度で再生されるといった問題が起きても、被害を小さい秒数にとどめておけるという狙い。

あとは普通にGIF出力すればOK。

このやり方はGIFを最小枚数にしておきたい人には向かないですね。

最後に同じフレームが２つ続いてしまいますから。

では終わり！

はじめのドット絵