GIF をスプライトシートに変換

GIF には何フレームある？

GIF はフレームごとに 100 分の 1 秒単位の表示時間を持っているので、フレーム数はおおよそ「アニメの長さ ÷ 表示時間」です。毎秒 10 フレーム（10/100 秒）の 1 秒ループなら 10 フレーム、同じ 1 秒でも毎秒 25 フレーム（4/100 秒）なら 25 フレームです。

意外と多くなるのが画面録画や動画から切り出したクリップで、6 秒・毎秒 25 フレームだけで 150 フレームになります。ゲームのアニメはずっと短く、歩きは 4〜12 フレーム、攻撃は 3〜8 フレームが一般的です。

GIF をデコードするとすぐに全フレームと元の表示時間が表示されるので、書き出す前に中身を確認できます。

GIF が大きすぎるとき

変換できるのは 1 ファイル 12 MB まで、160 フレームまで、1 フレーム 200 万ピクセルまで（1920×1040 は OK、1920×1080 は不可）。全フレーム合計の上限は約 2,500 万ピクセルで、400×400 なら 150 フレームです。各フレームをブラウザのメモリ上でデコードするため、この上限があります。

超える場合は、先に GIF エディタで短くするか縮小してください。縦横を半分にすればピクセル数は 4 分の 1 になります。読み込めたら不要なフレームを削除しましょう。使うフレームだけのシートは小さく、切り分けも簡単です。

よくある使い道

GIF を変換する主な目的：

• GIF でしか配布されていない素材 — 素材パックや古いスプライト集には、アニメーション GIF しかないものがあります。一度変換すれば、どのエンジンでも読めるシートになります。
• アニメをエンジンに取り込む — Unity、Godot、Phaser、GameMaker が読むのはスプライトシートで、GIF ではありません。ここで列数と余白を決め、エンジンのスプライトエディタで切り分けます。
• アニメのタイミングを研究する — 1 フレームずつ並べると、ジャンプや攻撃に何枚の絵を使い、キーポーズがどこにあるかが見えます。自分で作っていないアニメはライセンスを守って扱ってください。
• スタンプや Web アニメーション — シートは数行の CSS や canvas のコードで再生でき、GIF を埋め込むより軽く、制御もしやすくなります。