スプライトシートに詰める
50個の小画像を1リクエストに。各フレームの位置を記したJSONマップ付きでPNGアトラスに詰めます。
このガイドで使う道具
やりたいこと
スプライトアトラスはアセットのリクエストを減らし高速なフレームアニメを可能にしますが、各画像がどこに行ったかのマップがなければアトラスは役に立ちません。
詰める
画像をドロップし、グリッド(均一セル)か行詰め(可変サイズ)を選び、余白と最大幅を設定してPNGとJSONマップを一緒にダウンロードします。
- グリッドモード:全フレームが最大画像サイズのセルを得ます。固定フレームアニメに予測可能。
- 行詰めモード:可変サイズが密に詰まります。混在寸法のアイコン向き。
具体例
32×32のアイコン12個を2px余白・最大幅1024で詰めると410×36の行詰めアトラスと {"icon-a":{"x":2,"y":2,"w":32,"h":32},…} が出ます。ローダーが各フレームを転送するのに十分です。
対応範囲
最大200枚で、各画像40MP・片辺12,000px、合計100MPまでと保持メモリに上限があります。アトラスは片辺8,192px・40MPまで。画像は原寸で描画し、透明余白のトリミングや密詰めの回転はありません。JSONは単純な名前→矩形マップで、TexturePackerのようなエンジン固有形式ではありません。