スプライトシート作成

スプライトシートは、アニメーションのフレーム、アイコン、タイル、UIパーツなどの小さな画像を1つのテクスチャにまとめ、ゲームやWebページが1つのファイルだけを読み込んでその一部の領域を描画できるようにするものです。このジェネレーターは、画像を1枚のPNGにまとめ、PhaserとPixiJSがそのまま読み込めるTexturePacker JSON HashまたはArray形式のJSONアトラスと、Webスプライト用のCSSクラスを出力します。パッキングはブラウザの中で行われ、作品はアップロードされません。

使い方

1. スプライト画像をドロップします。ファイル名がフレーム名になります。
2. 最小のシートなら詰め込み、同じ大きさのアニメーションフレームならグリッド、あるいはストリップ配置を選びます。
3. 余白、エッジの押し出し、トリミング、2のべき乗サイズ、許容する最大シートサイズを設定します。
4. PNG、JSONアトラス、CSSをダウンロードします（3つをZIPでまとめて取得することも可能）。

計算式

詰め込み：best-short-side-fitのMaxRects。各スプライトは余る辺が最も短くなる空き矩形に置かれ、空き領域はその周りで分割され、複数のシート幅を試して面積を小さく保ちます。グリッド：セル ＝ 最大のスプライト、列数 ＝ 指定がなければ⌈√n⌉。

各ボックスは幅＋余白、高さ＋余白（さらに2 ×エッジの押し出し）を確保します。トリミングは完全に透明な行と列を切り落とし、JSONにはsourceSizeとspriteSourceSizeが残るので、エンジンが元のフレームボックスを復元できます。エッジの押し出しは端のピクセルを外側へコピーし、テクスチャフィルタリングが隣のスプライトを引き込まないようにします。回転は使わないため、すべてのフレームがrotated: falseです。

計算例

160 × 100のフレーム2つを2 pxの余白でグリッド配置すると322 × 100のシートになり、フレーム1はx ＝ 0、フレーム2はx ＝ 160 ＋ 2 ＝ 162に置かれるので、CSSはbackground-position: -162px 0です。1 pxのエッジ押し出しを加えると各セルは162 × 102、シートは326 × 102になり、フレーム2は162 ＋ 2 ＋ 1 ＝ 165から始まります。