スプライトシートをアニメーションで確認したいですか?このガイドでは、スプライトシートをスムーズなループGIFに変換する手順を、タイミングと出力を完全にコントロールしながら解説します。
スプライトシートはゲームエンジン向けの標準フォーマットですが、GIFにはまったく別の用途があります。変換が必要になる場面を紹介します。
GIFはブラウザ、メッセージアプリ、SNSのどこでも再生できます。歩行サイクルや攻撃アニメーション、UIエフェクトを相手にインストールやコード実行を求めることなく見せられます。
PhaserやUnity、Godotに組み込む前に、GIFとしてエクスポートしてフレーム順序・タイミング・画質を確認できます。この段階で問題を発見すれば、後のデバッグ時間を節約できます。
ゲーム開発者やピクセルアーティストは、ポートフォリオや開発ログ、READMEにGIFを埋め込んで作品を紹介します。短いループアニメーションは静止画よりも多くを伝えます。
itch.ioやOpenGameArtなどのアセットストアではアニメーションプレビューが表示されます。アップロード前にスプライトシートをGIFに変換すれば、購入者が内容を正確に確認できます。
以下の4ステップで、スプライトシートをアニメーションGIFに変換できます。すべてクライアントサイドで処理され、サーバーへのアップロードもアカウント登録も不要です。
スプライトシート→GIFコンバーターを開き、PNGまたはWebPのスプライトシートをアップロードエリアにドラッグします。画像サイズの制限はありません。透過背景で均一サイズのフレームがグリッド配置されたスプライトシートが最適です。
スプライトシートの構成をツールに伝えます。列数(1行あたりのフレーム数)と行数を入力してください。コンバーターはこの値に基づいて画像を均等なセルに分割します。水平ストリップの場合は行数を1に設定します。
フレームレートスライダーでアニメーション速度を調整します。ピクセルアートの歩行サイクルには8-12 FPS、よりスムーズなアニメーションには24 FPS以上が適しています。リアルタイムプレビューが即座に更新されるので、エクスポート前にタイミングを微調整できます。
プレビューが問題なければ、エクスポートボタンをクリックして全フレームをアニメーションGIFにコンパイルします。ファイルはWeb Workersを使ってブラウザ内で生成され、デバイスに直接ダウンロードされます。データがサーバーに送信されることはありません。
より綺麗で軽量、正確なGIF出力を得るための実践的なヒント。
GIFは単一の透過インデックスをサポートしています。スプライトシートに透過背景があれば、エクスポートされたGIFもそれを維持します。半透明ピクセルは避けてください — GIFはアルファグラデーションをサポートしないため、アンチエイリアスのエッジにフリンジが発生する場合があります。
GIFをゲーム内タイミングの参考にする場合は、エクスポートFPSをエンジンのロジックレートに合わせてください。例えば、レトロ風RPG Makerスプライトには10 FPS、スムーズなUnityキャラクターコントローラーには30 FPSが適切です。
スプライトシートに複数のアニメーションシーケンス(待機、歩行、攻撃)が縦に並んでいる場合は、アップロード前に必要な行だけにクロップしてください。関係のないフレームがGIFに含まれるのを防げます。
コンバーターは画像を均等なセルに分割します。フレームサイズが不均一だったり、グリッドが均等に分割できない場合、一部のフレームがクリップされることがあります。ソースのスプライトシートが整った均一グリッドであることを確認してください。
無料コンバーターを開いて、スプライトシートをアップロードし、数秒でアニメーションGIFをダウンロード。