スプライトシート＆XML作成 · Starling / Sparrow XML

Sparrow XMLは各フレームをSubTextureとして持ち、トリムをframeX・frameYで保存します。HaxeFlixelなどのエンジンはフレーム名の接頭辞でアニメーションをまとめます。この書き出しはページごとにXMLを書き、検証ではPhaserが読み込んで描画しました。HaxeFlixel・FNFのエンジンは試していません。

Sparrow / Starling XML（多くのFNF modの「spritesheet and XML」）は、パックしたPNGをTextureAtlas element (imagePath="…")で、フレームごとにSubTexture1つで記述します。name、x、y、width、heightがあり、トリムしたフレームにはframeX、frameY（負のオフセット）とframeWidth、frameHeight（元の大きさ）が付きます。Nerulioはページごとに1つのXMLを書き、回転はしません。Phaser 4.2はトリムしたフレームを正しく描きますが、Phaser 3.90は描けないため、Phaser 3ではトリムをオフにする「Sparrow XML (Phaser 3)」プリセットを使ってください。HaxeFlixelとFNFのエンジンは試していません。

パックするフレーム画像、GIF、.asepriteファイルをドロップ

空のStudioを開く

ブラウザ内で処理し、ファイルはアップロードされません。

書き出し先

Starling / Sparrow XML検証済み· Phaser 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
Spine / libGDX検証済み· spine-canvas 4.2
LÖVE検証済み· LÖVE 11.5
Defoldビルド確認· Defold bob.jar 1.13.1
GameMaker未検証
CSS sprites検証済み· Chromium
GIF / APNGデコード確認· Pillow

SubTextureの読み方

フレーム1つが要素1つです。x、y、width、heightでページから保存ピクセルを切り出します。トリムしたフレームなら、frameXとframeYがそのピクセルから見てフレーム全体がどこから始まるかを示します。フレーム全体は左上から始まるので負の値です。frameWidth、frameHeightはその大きさです。

アニメーションはファイルに保存されず、フレーム名から組み立てます。たとえば名前がrun_で始まるすべてのSubTextureです。Phaserは接頭辞とgenerateFrameNamesでこれを行うので、アニメーション一覧を持つJSONアトラスより名前が重要になります。

知っておくべきバグ：Phaser 3.90のAtlasXMLパーサーは、トリム後の大きさと元の大きさを逆の順でsetTrimに渡します。そのためPhaser 3.90ではトリムしたXMLのフレームが正しく描かれません。同じファイルはPhaser 4.2では正しく描かれます。「Sparrow XML (Phaser 3)」プリセットはトリムをオフにするので、どのフレームにもframeX/frameYがなく、両バージョンで合格します。Nerulioのエンジン検証49回のうち、失敗はこの2回だけでした。

TextureAtlas: ルート要素。imagePathがPNGページの名前で、幅と高さも持ちます。
SubTexture: 1フレーム：名前とページ上の矩形。
frameX, frameY: 保存ピクセルから見たフレーム全体の負のオフセット（トリムしたフレームのみ）。
frameWidth, frameHeight: トリム前のフレームの大きさ。
pivotX, pivotY: フレーム全体の上のピクセル単位のピボット。Nerulioは書きますが、PhaserのXMLローダーは読みません。

例：2つのプリセットでの同じフレームと、Phaser 3.90のバグ

Starling / Sparrow XMLプリセット（トリムあり）、ページ38 × 50
SubTexture name="run_0" x="0" y="34" width="18" height="15"
            frameX="-10" frameY="-10" frameWidth="40" frameHeight="29" pivotX="20" pivotY="29"

「Sparrow XML (Phaser 3)」プリセット（トリムなし）、ページ82 × 91
SubTexture name="run_0" x="0" y="0" width="40" height="29" pivotX="20" pivotY="29"

Phaser 3.90 AtlasXMLの呼び出し   setTrim(18, 15, 10, 10, 40, 29)
Frame.setTrimが期待する順        setTrim(40, 29, 10, 10, 18, 15)  （元の大きさが先、トリム後が最後）

ここでトリムをオフにする代償：38 × 50 = 1,900 px²ではなく82 × 91 = 7,462 px²（3.9倍）

PhaserのJSONパーサーはsourceSizeを先に、spriteSourceSizeを後に渡します。だからトリムしたJSONアトラスはPhaser 3.90でも問題なく、同じフレームをXMLにすると崩れます。

できること

トリムフレームのframeX・frameYとピボット入りSubTextureのページごとのXML。
プリセットは2つ：Starling / Sparrow XML（トリムあり）と、トリムを切った「Sparrow XML (Phaser 3)」。
Phaser 4.2は両方を描画。Phaser 3.90はトリムしたXMLフレームを誤描画する（Phaser側の不具合）ので、Phaser 3プリセットを使ってください。
この書き出し先は回転しません。

使い方

連番フレーム・GIF・.aseprite、またはシート（適用まで）を入れる。
タイムラインでフレーム名を確認。それぞれがSubTextureの名前になります。
パック＆書き出しでStarling / Sparrow XMLかSparrow XML (Phaser 3)を選ぶ。
エンジンでPNGとXMLを読み込む。

出力されるファイル

ファイル	用途
`run.xml`	`TextureAtlas` element (`imagePath="run.png"`, width, height)と、フレームごとの`SubTexture`。frameX・frameY・frameWidth・frameHeightはトリムしたフレームにだけ、pivotX・pivotYはピクセル単位。
`run.png`	ページ。複数ページならrun-0.pngとrun-0.xml、run-1.pngとrun-1.xmlのように。

読み込む

Phaser 4.2：this.load.atlasXML("run", "run.png", "run.xml")のあとthis.add.sprite(x, y, "run", "run_0")。どちらのXMLプリセットでも動きます。
Phaser 3.90：「Sparrow XML (Phaser 3)」で書き出し、同じ方法で読み込みます。
名前からアニメーションを作る：this.anims.create({ key: "run", frames: this.anims.generateFrameNames("run", { prefix: "run_", start: 0, end: 5 }), frameRate: 10, repeat: -1 })。
ほかのエンジン（HaxeFlixel、FNFのエンジン、Starling）も同じSubTextureの構造を読みますが、ここでは実行していません。頼る前に、トリムしたフレームを1つ元画像と比べてください。

トラブルシューティング

症状	考えられる原因	確認方法	対処
Phaser 3.90でだけ、トリムしたフレームがずれる・大きさが違う	Phaser 3.90のAtlasXMLが、トリム後と元の大きさを逆順で`setTrim`に渡す	そのフレームに`frameX`があり、同じファイルがPhaser 4.2では正常	「Sparrow XML (Phaser 3)」プリセット（トリムなし）、JSONアトラス（こちらはトリムが正常）、またはPhaser 4を使う
フレームが回転・反転する	フレームを回転させたパッカーのXML（`rotated="true"`）で、PhaserのXMLパーサーはこれを読まない	XMLで`rotated`を検索	回転なしでパックし直す。NerulioのXML書き出しは回転したパックを拒否する
アニメーションに違うフレームが混ざる	接頭辞が広すぎる：`run_`が`run_attack_0`にも一致する	XMLのフレーム名を一覧する	書き出し前に、アニメーションごとに一意の接頭辞を付ける
スプライトの原点がピボットを無視する	PhaserのXMLローダーは矩形とトリムの属性だけを読み、pivotX/pivotYは読まない	スプライトの原点が中央のまま	`sprite.setOrigin(0.5, 1)`を呼ぶか、Phaserが`pivot`を原点にするJSONアトラスを使う

ほかの方法

方法	こんなときに向いています
PhaserのJSONアトラス	Phaserのゲームなら：3.90でも4.2でもトリムが正常で、ピボットがスプライトの原点になり、アニメーションのファイルも付きます。Phaserのテクスチャアトラスを参照。
既存のFNFシートのプレビュー・変換	手元のspritesheet + XMLをGIFにしたいなら、FNFスプライトシートをGIFにを参照。

エンジン別の書き出しと検証方法

「検証済み」は、実際の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)」プリセットを使ってください。

バージョンと出典

忍者と弓兵のフレームセットで、Phaser 3.90.0と4.2.1に読み込んで描画しました。トリムありのStarlingプリセットは3.90でだけ失敗し（エンジン実行49回中2回）、Phaser 3プリセットは両方で合格しました。setTrimの引数の順はPhaser 3.90のソースから引用しています。HaxeFlixel、Starling、FNFのエンジンは実行していません。

参照した公式ドキュメント

よくある質問

Friday Night Funkin'・HaxeFlixelで使えますか？

試していません。XMLはPhaserでのみ検証しました。同じSparrow XML形式ですが、ここではHaxeFlixelのビルドは動かしていません。

Phaser 3でトリムしたフレームがずれるのはなぜ？

Phaser 3.90のXMLパーサーがトリム後と元のサイズを逆に渡すためです。「Sparrow XML (Phaser 3)」プリセットはトリムを切り、3.90・4.2とも合格します。

無料ですか？アカウントは必要ですか？

このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。

スプライトはアップロードされますか？

いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。

Asepriteやエンジンのプラグインは必要ですか？

いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。