スプライトシート生成ツールとは？

スプライトシートジェネレーターは、複数の個別画像を最適化された1枚のスプライトシートにまとめます。フレームやアイコンをアップロードするか、アニメーション GIF をドロップすれば各フレームが自動的に取り込まれます。レイアウト（グリッド、横ストリップ、縦ストリップ、パック）を選び、背景を透明か単色に設定し、結合した画像を JSON、JSON 配列、XML TextureAtlas、CSS の位置データとともに書き出せます。

グリッドモードはすべてを均一な N×M 配置に並べ、各フレームが同じサイズのアニメーションサイクルに最適です。横ストリップと縦ストリップはフレームを1行または1列に並べ、シンプルな2Dエンジンアニメーションの標準レイアウトです。パックモードはビンパッキングを実行し、サイズの異なるアイコンを無駄を最小限にして収めます。アニメーション GIF をドロップすると各フレームがシート内にデコードされるため、先にフレームを書き出す必要はありません。出力は既定で透明な背景を保ちますが、クロマキー用の単色を選ぶこともできます。メタデータは JSON ハッシュ、JSON 配列、XML TextureAtlas、CSS の4形式で用意され、Phaser、PixiJS、Unity、Godot、または CSS の background-position にそのまま組み込めます。アニメーションプレビューでは1〜60 FPS でフレームを送りながら、ダウンロード前にタイミングを確認できます。コマ送りで1フレームずつ確認してずれたスプライトを見つけられ、各フレームの透明な余白を切り取ってシートを小さく保ち、シーケンスをアニメーションGIFとして書き出してゲームエンジンなしで結果を共有できます。

使い方

1. スプライトシートに結合したい個別の画像をアップロードします。
2. レイアウト（グリッド、横並び、縦並び、パック）を選び、パディングを調整し、背景を透明か単色に設定します。
3. スプライトシート画像をCSSまたはJSON位置データとともにダウンロードします。

使用するタイミング

• キャラの歩行サイクルや爆発アニメを1枚にまとめてゲームエンジンに渡す。
• UIアイコン集を1ファイルに統合し、HTTPリクエストを40回から1回に減らす。
• タイルマップ用スプライトに均一なパディングを設け、隣接タイルの色がにじまないようにする。

結果

ゲーム開発者が16枚のキャラクターアニメーションフレーム（各64×64）をアップロードすると、4×4グリッドに配置された256×256のスプライトシートが生成され、ゲームエンジン用のJSONフレーム座標も出力されます。

よくある質問

グリッドではなくパックレイアウトを選ぶのはどんなとき？

全フレームが同じサイズならグリッド、たとえば32×32のキャラクターアニメに向きます。1行や1列のシーケンスにしたい場合は横並び・縦並びを選ぶと、ほとんどのエンジンが最も読み込みやすい形になります。アイコンの大きさがまちまちなときはパックを使います。たとえば16×16と48×48が混在するUIセットに有効で、シートは最小になりますがメタデータは手で読みづらくなります。

パディング設定は何のためにあるのですか？

パディングは各フレームの周囲に透明ピクセルを追加します。これがないと、リニア補間を使うレンダラーが隣接フレームの色を描画中のフレーム端に滲ませてしまいます。1〜2ピクセルのパディングでこのアーチファクトを防げます。

どのメタデータ形式で書き出せばいいですか？

JSON（ハッシュ）は多くのエンジンが読み込む TexturePacker 形式で、各フレームを名前でキー付けします。JSON 配列はフレームを順序付きリストとして保存し、Phaser 3 や一部のパイプラインが好みます。XML は Starling/Sparrow の TextureAtlas で、Unity、Godot、Friday Night Funkin が使用します。CSS は Web アイコンセット向けの background-position クラスを生成します。お使いのレンダラーが想定する形式を選んでください。

出力で透明部分は保持されますか？

既定では保持されます。シートはアルファチャンネルを保ったPNGで書き出されるので、元PNGの透明背景はそのまま反映されます。不透明な出力が必要なら、レイアウト設定の横で単色背景を選んでください。クロマキーやアルファを無視するエンジン向けに便利です。透明が大事ならJPGを元素材にしないでください。アップロード前にアルファが白で潰されています。

1枚のシートにフレームを何枚まで詰められますか？

現実的にはモバイルGPUの単一テクスチャ上限が2048または4096ピクセルなので、4096×4096を64×64で割れば4096フレーム入ります。古い端末を考慮するならアニメーション用途は2048×2048を2枚に分ける方が安全です。

関連ツール