スプライトシート出力形式ガイド
スプライトシート自体は単なる PNG です。真の力はメタデータファイルにあり、各フレームがどこに位置し、どう呼ばれるかをゲームエンジンに伝えます。間違った形式を選ぶと、座標ミスマッチ、フレーム名エラー、または手動でパーサーを書き直す必要が生じます。このガイドでは、どの形式がどのエンジンにマッチするか、各構造がどのように機能するかを正確に示します。
形式が重要な理由
エクスポートされたスプライトシート ZIP には 2 つのファイルが含まれます。PNG 画像とメタデータファイルです。すべてのエンジンは異なる構造のメタデータを期待します。一部はフレーム名を辞書キーとして期待し、他は順序付き配列を期待します。一部はネストされたトリミングデータを必要とし、他は無視します。間違った出力形式を選ぶと、エンジンは読み込みに失敗するか、修正のために手動パース作業が必要になります。良いニュースは、Sprite Sheet Maker がすべての主要形式をサポートしていることです。エンジンを切り替えても再パックする必要がありません。
画像ファイルは普遍的
PNG スプライトシート自体は出力形式に関係なく同じです。すべてのフレームが配置された 1 枚の高品質な画像が得られます。
メタデータが互換性を決める
付属ファイルにはフレーム座標（x、y、幅、高さ）、フレーム名、トリミングや回転などのオプションプロパティが含まれます。これが形式を区別するものです。
出力形式と対応エンジンの対応表
JSON Hash 形式
JSON Hash 形式はフレーム名をオブジェクトキーとして使用します。これは Phaser 3 の標準であり、名前ベースの直接検索を期待するエンジンでうまく機能します。JSON Hash をエクスポートすると、各キーがフレームファイル名（拡張子なし）で、値が矩形座標、トリミングステータス、スプライトソースサイズを含む辞書が得られます。
構造
各フレームは JSON オブジェクトのトップレベルキーとして保存されます。値にはスプライトシート内の x、y 位置、幅、高さ、およびオプションの isTrimmed フラグが含まれます。
Phaser に最適
Phaser 3 のローダーはデフォルトで JSON Hash 形式を期待します。PNG と JSON の両方をアセットフォルダーにドロップし、this.scene.load.atlas('key', 'image.png', 'data.json') でロードします。Phaser が残りを処理します。
高速なフレームアクセス
Hash 形式はフレーム名による O(1) 検索を提供します。コードが正確なフレーム名（idle_0001、walk_left_0005）を知っている場合、配列を反復せずに直接アクセスできます。
JSON Array 形式
JSON Array 形式はフレームをシーケンシャルリストとして保存します。Pixi.js およびその他のエンジンは、インデックスでフレームにアクセスしたい場合や、内部で独自のフレーム名マッピングを構築する場合、順序付き配列を好みます。
構造
フレームは frames キーの下の配列に保存されます。各配列要素には同じ矩形データに加えてファイル名文字列が含まれます。順序はアップロードまたは生成されたフレームシーケンスと一致します。
Pixi.js に最適
Pixi.js は JSON Array 形式で自然に動作します。PIXI.Spritesheet.from() でスプライトシートをロードした後、JSON Hash と同様に名前文字列でフレームを参照できますが、パーサーは配列構造に最適化されています。
インデックスベースのアクセス
フレーム名はまだ使用できますが、配列形式は予測可能な順序付けを提供します。これは、ゲームロジックがシーケンシャルにフレームを反復する場合（固定ステップ順のアニメーション）に役立ちます。
XML TextureAtlas 形式
XML TextureAtlas は TexturePacker の標準であり、Unity と Godot でネイティブに動作します。ルート TextureAtlas 要素内の SubTexture 要素としてフレームを保存します。PNG と XML の両方を Resources フォルダーに配置すると、Unity が自動的にインポートします。
構造
XML ルートは imagePath 属性を持つ TextureAtlas です。各 SubTexture には name、x、y、width、height 属性があります。オプションでトリミングされていないソースデータのために frameX、frameY、frameWidth、frameHeight が含まれます。
Unity に最適
Unity 2D スプライトエディターは XML TextureAtlas 形式を期待します。PNG をインポートすると、Unity は自動的に XML を見つけ、名前が正しい個別のスプライトスライスを取得します。カスタムパーサーは不要です。
Godot に最適
Godot 4 の AtlasTexture は XML 形式を使用します。AtlasTexture ノードで XML を参照すると、Godot はすべての SubTextures を名前付きフレームとしてロードします。AnimatedSprite2D はそれらをアニメーションとして再生します。
エンジンネイティブ統合
XML TextureAtlas は業界標準であるため、Unity と Godot の両方がスプライトアセットを自動生成するインポートウィザードを提供します。XML パースコードを記述する必要はありません。
CSS スプライト形式
CSS スプライト形式は、各フレームの background-position ルールを含むスタイルシートを出力します。これはゲームエンジンをまったく必要としない Web アニメーション、UI アイコン、CSS ベースのゲームに最適です。
構造
CSS ファイルは、スプライトシート URL に background-image を設定し、background-position を正しいピクセルオフセットに設定した各フレーム名のクラスを定義します。負の値は背景画像を左または上にシフトします。
Web アニメーションに最適
CSS スプライトをホバー状態、ボタンアニメーション、または純粋な Web プロジェクトのシンプルなキャラクターアニメーションに使用します。要素にクラスを追加し、必要に応じて CSS トランジションで background-position を切り替えたりアニメーション化したりします。
JavaScript 不要
基本的なスプライト再生は HTML と CSS のみで動作します。JavaScript でスプライトシートをロードしたり JSON をパースしたりする必要はありません。フレームクラスを適用し、必要に応じて位置をアニメーション化するだけです。
形式選択のワークフロー
一般的な形式の問題
ほとんどのスプライトシートインポートエラーは形式の不一致です。エンジンはある構造を期待していますが、別の形式をエクスポートしました。これらは警告サインと修正方法です。
フレーム名が見つからないエラー
コードがフレーム walk_left_0001 を参照しているが、JSON が walkLeft0001 を使用している場合に発生します。エクスポートされたメタデータファイルを確認し、コード内のフレーム名を更新するか、正しい命名規則でスプライトシートを再生成します。
座標がビジュアルと一致しない
スプライトがオフセットまたはトリミングして表示される場合、JSON をエクスポートしたが、異なるパーサーをデフォルトとするエンジンで XML としてロードした（またはその逆）可能性があります。インポートコードがエクスポート形式と一致していることを確認してください。
アニメーションが間違ったフレームを再生する
フレームが順不同で再生される場合、エクスポート形式が意図されたシーケンスを保持していない可能性があります。エンジンが順序が保証されない Hash 形式を期待するかどうかを確認し、ゲームがシーケンシャルフレームアクセスに依存している場合は配列形式に切り替えます。
エンジンがメタデータをロードできない
Unity または Godot のロードに失敗する場合、通常は XML ファイルが見つからないか、XML 構造が正しくありません。エクスポートが XML TextureAtlas であったことを確認し、PNG と XML が同じベースファイル名を共有していることを確認してください。
スプライトシート出力形式 FAQ
正しい形式でエクスポート
Sprite Sheet Maker でスプライトシートを 1 回作成します。ゲームエンジンに一致する出力形式を選択し、カスタムパーサーを記述したり座標ミスマッチを修正したりすることなく、直接インポートします。
最終更新: 2026年4月27日 · 運営: Sprite Sheet Maker チーム · v2026.4