はじめのドット絵

朝夢はじめが制作した配信者向けのドット絵を配布したり、Asepriteをメインにドット絵関連のTIPSなどを書いていきます。あとは趣味関連。

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

Problem 実際起こった問題

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

 

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

 

Solution 簡単に説明する解決方法

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

  1. 最終フレームをコピーして、末尾に追加する。
  2. フレーム(8)の時間を100msに設定。
  3. フレーム(9)の時間を50msに設定。
  4. GIF出力。(Twitter向けの設定はON/OFFはお好みで)

 

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

And their duration are 150 ms.

  1. Copy the final frame and Paste it to the end.
  2. Set duration of 'frame 8' to 100 ms.
  3. Set duration of 'frame 9' to 50 ms. 
  4. Export as GIF.

 

原因考察

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

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

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

 

詳しい設定の仕方をちょっと紹介

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

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

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

 

(1)〜(7)のフレーム時間を135msに設定

 

(8)は100msに設定

 

捨てフレームとして用意した(9)は35msに設定

 

(8)と(9)はモーションというか描かれている絵は全く一緒です。

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

違うのは秒数だけ。

(8)と(9)の秒数は合計した場合、他のフレームと同じ時間になるようにしています。

 

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

 

 

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

 

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

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

 

では終わり!