スプライトシートメーカー

スプライトシートは仕事の半分にすぎません。エンジンは各フレームの位置と表示時間も知る必要があります。このツールはフレームをグリッド、ストリップ、詰め込みアトラスにまとめ、そのデータをエンジンが実際にインポートできる形式で書き出します。TexturePacker/Phaser JSON、Aseprite JSON、Godot 4 SpriteFrames リソース、CSS、Unity のスライス設定です。フレームは連番どおりに並ぶので、walk_10 は walk_9 の後ろに来ます。

スプライトシートメーカーの使い方

1. フレームの PNG をまとめてドロップします。名前の自然順に並び、いつでも追加できます。
2. 矢印で並べ替え、不要なフレームを削除、または順番を反転します。
3. レイアウトを選びます。グリッド（列数は自動または固定）、横一列、縦一列、または透明な余白をトリミングした詰め込み。
4. フレーム間のパディング、外側の余白、エッジの押し出しを設定します。64、128、256 px のテクスチャが必要なら2のべき乗をオンにします。
5. プレビューでアニメーションを確認し、FPS を設定します。
6. PNG とデータファイル1つ、または PNG と全形式をまとめた ZIP をダウンロードします。

得られるもの

• プレビューどおりの透過付き PNG シート。
• Phaser / TexturePacker JSON（hash と array）。トリミングのオフセットを含むので、詰め込んだフレームもずれません。
• フレームタグと表示時間付きの Aseprite JSON。
• AtlasTexture を使った Godot 4 SpriteFrames .tres。AnimatedSprite2D ですぐ使えます。
• フレームごとのクラスとステップアニメーション付きの CSS スプライト、さらに Unity のインポート・スライス設定。

対応エンジン

• Phaser 3：this.load.atlas(key, 'sheet.png', 'sheet.json') で読み込み、フレーム名からアニメーションを作成します。
• Godot 4：.tres を PNG の隣に置き、AnimatedSprite2D の Sprite Frames に割り当てます。
• Unity：グリッドレイアウトは、設定ファイルの値で Grid By Cell Size スライスします。フィルターは Point、圧縮はなしにします。
• PixiJS、Defold、Cocos、Construct：TexturePacker JSON (hash) を直接、またはインポーター経由で読み込めます。

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

• キャラアニメーションには、サイズを揃えたフレームでグリッドを使いましょう。エンジンのグリッド分割やオニオンスキンはその形式を前提にしています。
• サイズの異なる画像が多いアイテムや UI のアトラスには、トリミング付きの詰め込みを使います。
• シートを整数倍以外で拡縮したりミップマップを使ったりするなら、1–2 px の押し出しを追加しましょう。隣のフレームが縁ににじむのを防げます。
• フレーム名は意味のあるもの（hero_walk_00…）にしましょう。JSON のフレームキーになります。

活用例

• Aseprite、Blender、Spine から書き出したフレームを1枚のテクスチャにまとめる。
• Web ゲーム用の UI やアイテムのアトラスを作る。
• AI で生成したフレームを、エンジンでアニメーションできるシートにする。
• ランディングページ用の CSS スプライトアニメーションを作る。

よくある質問