GIF→スプライトシート変換

GIF はフレーム間で変化したピクセルだけを保存していることが多いため、単純にフレームを書き出すと、穴が空いたり前のフレームの残骸が残ったりします。この変換ツールはブラウザと同じように各フレームを破棄方法どおりに再生するので、シートのどのフレームも完全な形になります。フレームごとの表示時間も保持するので、ポーズを溜めるアニメーションでも安心です。

GIF→スプライトシート変換の使い方

1. アニメ GIF をドロップします（サンプルも試せます）。各フレームが表示時間と破棄方法つきでデコードされます。
2. フレーム範囲を選び、長い GIF は「N枚ごとに1枚残す」で半分や3分の1に間引きます。残したフレームが間引いた分の時間を引き継ぐので、速度は変わりません。
3. ストリップのフレームをクリックすると、個別に除外できます。
4. 「内容に合わせてトリミング」は全フレームを共通の枠で切り抜くので、スプライトの位置がずれません。エンジンで周囲に余白が必要ならパディングを追加します。
5. GIF が透過ではなく単色背景なら、「背景色を除去」をオンにします。
6. 元のタイミングか固定 FPS を選び、シート、データファイル、GIF、またはすべてをまとめた ZIP を書き出します。

得られるもの

• PNG スプライトシート。透過背景で、列数は自動または固定のグリッド配置。
• GIF のフレームごとの表示時間を含む Aseprite JSON。さらに Phaser/TexturePacker JSON、Godot 4 .tres SpriteFrames、CSS スプライト、Unity のスライス設定。
• 編集後に再エンコードした GIF（1×–8× 拡大）。
• 上記すべてと各フレームの個別 PNG をまとめた ZIP。

対応エンジン

• Aseprite JSON は不均等なフレーム時間を保持します。Godot の Aseprite Wizard などのインポーターや Unity の Aseprite インポーターでそのまま読めます。
• Godot 4 .tres は固定速度とフレームごとの相対時間を使うので、溜めのフレームはきちんと溜めたままです。
• Phaser 3：hash JSON でアトラスとして読み込み、animations に並んだフレーム名からアニメーションを作成します。

ゲーム制作で使って得たコツ

• 255色以下のドット絵 GIF は、再量子化せずに元の色をそのまま使うため、ここでは劣化なしで再エンコードできます。
• ネット上の GIF の多くは 2× や 3× に拡大されたドット絵です。ツールがこれを検出して本来の 1× ピクセルに戻すので、シートが小さく、くっきりします。
• ブラウザは 20 ms 未満の GIF ディレイを 100 ms として再生します。このツールも同じ扱いなので、プレビューは以前見たとおりになります。
• FPS を1つしか指定できないエンジンでは、タイミングを固定 FPS に切り替え、溜めのポーズが伝わるかプレビューで確認しましょう。

活用例

• 古いプロジェクトの GIF や、GIF しか書き出せないドット絵エディターの作品をゲームエンジンに取り込む。
• AI アニメーションツールで作った GIF を、編集・修正できるフレームに分解する。
• GIF を連番 PNG に分けて、Aseprite、LibreSprite、Photoshop で手直しする。
• 既存の GIF から Web サイト用の CSS スプライトアニメーションを作る。

よくある質問