Spine・libGDX アトラスパッカー · 回転とトリム入りの.atlas
.atlasのテキスト形式はSpineとlibGDXが共通で使います。この書き出しは回転とトリムを含めて書き、検証ではSpineランタイムが回転・トリムした範囲も含めてすべて描画しました。
Spine / libGDXの.atlasは、1枚以上のページ画像と、その上の名前付き領域を記述するテキストファイルです。領域ごとにbounds（ページ上のx, y、幅、高さ）、必要ならoffsets（左と下から取り除いた余白、続いて元の大きさ）、回転してパックしたならrotateが付きます。Spineのスケルトンは領域名でアタッチメントの画像を探します。Nerulioはどんなフレームからでも、トリムと90度回転を含めてこの形式を書き出し、公式のSpineランタイムspine-canvas 4.2が回転・トリムした領域も含めて全領域を描画しました。libGDXも同じ形式を読みますが、実行はしていません。
- Spine / libGDX検証済み· spine-canvas 4.2
- Godot 4検証済み· Godot 4.7.2
- Unity 6検証済み· Unity 6000.5.3f1
- Phaser 3 / 4検証済み· Phaser 3.90 + 4.2
- PixiJS 8検証済み· PixiJS 8.21
- Aseprite JSON検証済み· Phaser load.aseprite · PixiJS 8.21
- .aseprite検証済み· Aseprite 1.3.18
- Starling / Sparrow XML検証済み· Phaser 4.2
- LÖVE検証済み· LÖVE 11.5
- Defoldビルド確認· Defold bob.jar 1.13.1
- GameMaker未検証
- CSS sprites検証済み· Chromium
- GIF / APNGデコード確認· Pillow
.atlasファイルの読み方
ファイルはページから始まります。画像ファイル名の後にsize、filter、pma（乗算済みアルファ）などの行が続きます。その後、領域ごとに名前とプロパティの行が次の名前まで続き、別の画像名が出てきたら新しいページです。
オフセットは元画像の左下を基準に測ります。上から測るJSONアトラスとは逆です。40 × 29のフレームで、見える18 × 15ピクセルが上から10pxの位置から始まるなら、下のオフセットは29 − 10 − 15 = 4です。
回転した領域は、ページ上で反時計回りに90度寝かせてあります。これがSpine形式の向きで（TexturePackerのJSONは時計回りで保存）、boundsには回転前の幅と高さがそのまま残ります。ランタイムは描くときに領域を元に戻します。
- ページ
- 大きさ、テクスチャフィルター、乗算済みアルファのフラグを持つ画像ファイル。
- 領域（region）
- ページ上の名前付きの矩形。スケルトンのアタッチメントが名前で参照します。
- bounds
- ページ上のx、yと、パックした（回転前の）幅と高さ。
- offsets
- 左と下から取り除いたピクセル数、続いて元の幅と高さ。
- rotate
- 90（またはtrue）= 反時計回りに90度回して保存。
例：走りの6フレームを.atlasに（回転あり）
run.png
size:33,57
filter:Nearest,Nearest
pma:false
run_0
bounds:17,23,18,15
offsets:10,4,40,29
rotate:90
run_4
bounds:0,0,16,16
offsets:10,5,40,29
run_0：見えるピクセル18 × 15、回して保存 → ページの (17, 23) で15 × 18を占める
offsets：左10、下 29 − 10 − 15 = 4、元の大きさ40 × 29
run_4：回転なし（16 × 16）、下 29 − 8 − 16 = 56フレーム中5枚が回して保存され、ページは回転なしの38 × 50ではなく33 × 57です。offsetsによってどの領域も40 × 29の大きさを保つので、フレームが変わってもアタッチメントはずれません。
JSONアトラスの項目から.atlasの領域へ
| TexturePacker形式のJSON | Spine / libGDX .atlas | 変換のしかた |
|---|---|---|
frame {x, y, w, h} | bounds:x,y,w,h | 同じ数値（回転前のサイズ） |
spriteSourceSize {x, y} | offsets: 左、下 | 下 = sourceSize.h − y − h |
sourceSize {w, h} | offsets: …、幅、高さ | 同じ数値 |
rotated: true（時計回りで保存） | rotate:90（反時計回りで保存） | ピクセルの向きが逆なので、名前の付け替えではなくページを描き直す |
meta.image、meta.size | ページ名の行、size:w,h | 同じ |
できること
- 形式どおり下を基準に測った範囲とオフセット入りの.atlasページ。
- 容量が減るなら反時計回りで保存するrotate:90。
- 元のサイズを保つトリム、同一画像の統合、余白と複数ページ。
- Spineランタイムspine-canvas 4.2で確認。libGDXのランタイムは実行していません。
使い方
- 画像やフレームをドロップ。
- パック＆書き出しでSpine / libGDXを選ぶ。
- 最小のページにしたいなら回転を許可。
- Spineのスケルトンか、libGDXのTextureAtlasに.atlasを指定。
出力されるファイル
| ファイル | 用途 |
|---|---|
run.atlas | ページ（size、filter:Nearest,Nearest、pma:false）と、フレームごとの領域：bounds、トリムしたフレームのoffsets、回したフレームのrotate:90。 |
run.png（run-0.png、run-1.png …） | ページ画像。マルチパックが必要なら複数枚。 |
README-SPINE-LIBGDX.md | 形式の構成と、libGDXで読み込むコード。 |
SpineやlibGDXで使う
- スケルトンのアタッチメント（またはそのパス）の名前を、領域名と同じにします（例：
run_0）。ランタイムはこの名前で領域を探します。 - Spineランタイムのアトラスローダーで、スケルトンデータの隣の
.atlasを読み込みます。アトラスはPNGのページをパスなしの名前で書いているので、同じフォルダーに置いてください。 - libGDX：
new TextureAtlas(Gdx.files.internal("run.atlas"))のあとfindRegion("run_0")。この経路はNerulioの検証では実行していません。 - ファイルを読むすべてのプログラムが
rotateを扱えるときだけ回転を許可してください。Spineプリセットは既定で許可しています。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| ランタイムで領域が見つからない | アタッチメント名と領域名が違う：大文字小文字、拡張子、フォルダーの接頭辞 | .atlasで正確な名前を検索 | 書き出し前にフレーム名を変えるか、Spine側のアタッチメントのパスを直す |
| 自作ローダーで、トリムした領域が高すぎる・低すぎる | ローダーが2番目のオフセットを上の余白として読んでいる | offsets:10,4,40,29の4は下の余白 | SpineかlibGDXのローダーを使うか、上 = 高さ − 下 − 領域の高さ で変換 |
| 自作ローダーで、回転した領域が横倒し・反転する | rotateを無視している、または逆向きに回している | rotate:90のある領域 | 書き出し前に回転をオフにするか、領域を時計回りに戻す |
| 柔らかい縁の周りに暗い・明るい縁取り | ページのアルファがpmaフラグやブレンドモードと合っていない | ページ行のpma:false | この書き出しでは乗算済みアルファをオフに。ページ行は常にpma:falseと書かれる |
ほかの方法
エンジン別の書き出しと検証方法
「検証済み」は、実際のCC0アセットから書き出したファイルを本物のエンジン・ツールで読み込み、元データと比較したという意味です。読み込んでいない形式はそのように表示します。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| Godot 4 | .tres SpriteFrames · .tscn AnimatedSprite2D · .png.import | 検証済み Godot 4.7.2Godotで読み込み、全アニメーションフレームを描画して元ファイルと比較。シーンはNearestフィルターで、回転は使いません。 |
| Unity 6 | .unity.json · Editor/NerulioSpriteImporter.cs · AnimationClip | 検証済み Unity 6000.5.3f1バッチモードでスプライト範囲・ピボット・ピクセル・クリップのキーと長さを確認。 |
| Phaser 3 / 4 | atlas JSON (multiatlas) · .anims.json | 検証済み Phaser 3.90 + 4.2両バージョンでフレームとアニメーションを描画。 |
| PixiJS 8 | spritesheet JSON · animations · anchor · meta.scale | 検証済み PixiJS 8.21回転・複数ページのアトラスも確認。 |
| Aseprite JSON | hash / array · frameTags · slices | 検証済み Phaser load.aseprite · PixiJS 8.21タグの方向と繰り返し回数を保持。 |
| .aseprite | layers · tags · durations · slices | 検証済み Aseprite 1.3.18Asepriteのコマンドラインで開いて描画。 |
| Spine / libGDX | .atlas | 検証済み spine-canvas 4.2Spineランタイムで回転・トリム領域をすべて描画。libGDX本体は未実行。 |
| Starling / Sparrow XML | XML per page | 検証済み Phaser 4.2Phaser 3.90はトリムされたXMLフレームを誤って描画します（Phaser側の不具合）。「Sparrow XML (Phaser 3)」プリセットはトリムを切り、3.90・4.2とも合格。 |
| LÖVE | Lua quads · nerulio_atlas.lua · main.lua | 検証済み LÖVE 11.5同梱ヘルパーで全フレームを描画し、全アニメーションを再生。 |
| Defold | .atlas · .tilesource | ビルド確認 Defold bob.jar 1.13.1Defoldのコマンドラインビルダーでビルドし、生成テクスチャのUVを読み戻して確認。 |
| GameMaker | spr_<name>_stripN.png · gamemaker.json | 未検証GameMakerでは読み込んでいません（ヘッドレス実行不可）。ストリップはGameMakerの取り込み方式どおりに切ります。 |
| CSS sprites | .css · preview .html | 検証済み Chromium同梱スタイルシートで全クラスを描画。 |
| GIF / APNG | one file per animation | デコード確認 Pillow書き出し後に全フレームと遅延を再デコード。APNGは完全一致。 |
検証の根拠
書き出し：実在のCC0アセットで実際のエンジンを49回実行し47回合格。失敗2回はPhaser 3.90のトリムXMLの不具合で、Phaser 3プリセットで回避。実在の5フレームセットでパッカー比較（CodeAndWeb無料Webパッカー、GAPTools、free-tex-packer）：回転ありで5つすべて最小、回転なしで5つ中4つ。全フレームがピクセル単位で復元できます。
制限
- ポリゴン（メッシュ）パッキングはありません。検証したエンジンのどれも、書き出しデータからメッシュアトラスを描画しないためです。
- GameMakerのストリップはGameMaker本体では未検証です。
- 拡大縮小バリエーション（@0.5x〜@4x）はニアレストネイバーのみです。
- トリムしたStarling XMLはPhaser 3.90で正しく描画されないため、「Sparrow XML (Phaser 3)」プリセットを使ってください。
バージョンと出典
公式のSpineランタイムspine-canvas 4.2.120がNerulioの.atlasを読み、SkeletonRendererで全領域を領域アタッチメントとして描きました。トリムした忍者のフレームと回転した弓兵のフレームで、ピクセルが元画像と一致しています。libGDX（Java）は実行していません。フィールドの意味はSpineのアトラス形式のドキュメントに従います。
参照した公式ドキュメント
よくある質問
libGDXで試しましたか？
いいえ。Spineランタイム（spine-canvas 4.2）で描画しました。libGDXも同じ形式を読みますが、ここでは実行していません。
メッシュ（ポリゴン）パッキングは？
できません。矩形のみです。検証したランタイムのどれも、書き出しデータからメッシュアトラスを描画しないためです。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。