スプライトシート座標ジェネレーター｜JSON と CSS background-position を同時生成
uniform grid (等間隔分割) のスプライトシートから、各フレームの座標 (x / y / w / h) を JSON 配列と CSS sprite 用 .frame-N { background-position } 形式の両方で同時生成します。padding (外周余白) と margin (フレーム間隔) を独立指定でき、TexturePacker や Aseprite で extrude / spacing 付きで書き出した PNG の座標復元にも対応します。
💡 このツールについて
2D ゲーム開発でアニメーション用のキャラチップやアイコンセットを扱うとき、PNG 1 枚に複数フレームを並べた sprite sheet を使うことが多いです。Phaser や PixiJS、Godot AnimatedSprite2D ではフレームの x / y / w / h を JSON で渡し、Web の CSS sprite では background-position: -64px 0px のように負のオフセットで切り出します。
このツールは画像のサイズと分割数 (列・行)、padding と margin を入力すると、各フレームの座標を即座に計算してプレビュー canvas に枠を重ねます。出力形式は JSON / CSS をセグメンテッドコントロールで切り替えられるため、ゲームエンジン側で JSON を、Web スタイル側で CSS を、と同じ素材を両形式で扱う場合も 1 画面で完結します。
🧐 よくある質問
Q: padding と margin は何が違うのですか? A: padding は画像の外周にある余白 (シート全体の上下左右に共通)、margin は隣接するフレーム同士の間隔です。Aseprite で「border」と「spacing」、TexturePacker で「border padding」と「shape padding」と呼ばれているものに概ね対応します。両方を 0 にすれば完全に隙間なし、両方を設定すれば extrude / spacing 付きシートの座標復元になります。
Q: 余白が大きすぎて frameW が 0 以下になる場合はどう扱われますか? A: 計算スキップで出力配列が空になり、プレビュー canvas には背景チェッカーボードのみが表示されます。padding × 2 と margin × (列数 - 1) の合計が画像幅を超えた状態を意味するので、padding か margin を減らすか、列数を減らしてください。
Q: JSON の frame フィールドは何ですか?
A: 行優先 (左から右、上から下) のフレーム番号です。frame: 0 が左上、列数 4 のシートなら frame: 4 が 2 行目の左端になります。Phaser の Phaser.Loader.spritesheet で読み込む際の frameIndex と同じ並びです。
Q: CSS の background-position がなぜマイナス値なのですか?
A: CSS sprite は「画像を負のオフセットで左上に押し上げて、要素の表示窓に目的の領域を出す」という設計です。frame の (x, y) が (64, 0) なら background-position: -64px 0px となり、画像が 64px 左にずれて 64〜127px の領域が見えます。x や y が 0 の場合は -0px ではなく 0px をそのまま出力します。
Q: 出力された frameW / frameH の小数点は何を意味しますか? A: 画像幅から padding と margin を差し引いた残りを列数で割った結果、整数で割り切れない場合に小数 2 桁で残しています。ピクセル単位で揃えたい場合は、画像サイズや列数を割り切れる値に調整してください。
📚 uniform grid sheet と packed atlas
スプライトシートには大きく 2 種類あります。一つは uniform grid (本ツールが扱う等間隔分割) で、すべてのフレームが同じサイズで矩形に並びます。ドット絵アニメの定番形式で、RPG ツクール系のキャラチップ、横スクロール 2D の歩行アニメ、アイコン集 (例: 64×64 を 4×4 で並べる) など、フレームサイズが揃った素材で広く使われます。
もう一つは packed atlas で、TexturePacker などのツールが各フレームを矩形パッキングで隙間なく詰めたもの。フレームサイズがバラバラの UI アイコンセット、エフェクト素材、ゲーム内 HUD パーツでよく使われ、テクスチャメモリは節約できますが、座標は手計算できないため必ずツール出力の JSON が必要になります。
本ツールは前者の uniform grid 専用です。「キャラの歩行 8 方向 × 4 コマ = 32 フレームを 8×4 で並べた」「アイコン 32×32 を 8×8 に並べた」のような、サイズが揃った素材の座標復元と、JSON / CSS sprite 形式への変換に向いています。