TexturePackerをGodot 4へ · プラグイン不要
TexturePacker（または同じJSONを書くパッカー）でまとめたシートをGodot 4のプロジェクトで使いたいなら、PNGとJSONを一緒にドロップしてください。各フレームをトリム情報ごと読み、名前でアニメーションにまとめ、AnimatedSprite2DシーンとSpriteFrames .tresで書き出します。検証でGodot 4.7.2が読み込み、フレームごとに描画したバンドル形式で、エディタープラグインは使いません。
TexturePackerのJSONデータファイル（ハッシュまたは配列）には、スプライトごとに名前、PNG上の矩形、トリム（spriteSourceSize、sourceSize）、rotatedフラグ、必要ならピボットが入っていますが、アニメーションと時間の情報はありません。PNGとJSONをNerulioにまとめて入れると、トリムを反映してフレームを読み、名前でアニメーションにまとめ（walk_01、walk_02 → walk）、エディタープラグインなしでGodot 4用のSpriteFrames .tres、AnimatedSprite2D .tscn、.png.importとして書き出します。Godot 4専用で、このバンドル形式はGodot 4.7.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
- 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
TexturePackerのファイルの中身と、Godotに必要なもの
TexturePackerのJSONはスプライトの一覧です。それぞれにframe（PNG上の保存ピクセルの位置）、spriteSourceSize（そのピクセルが元画像のどこにあったか）、sourceSize（元の大きさ）、rotated（断片が90度回転している）、ピボットを設定したなら0–1のpivotがあります。meta.imageがPNGの名前、meta.sizeがその大きさです。フレームの長さもアニメーションの一覧もなく、アニメーションは名前の付け方としてしか存在しません。
Godot 4では、AnimatedSprite2DがSpriteFramesリソースを再生してフレームアニメーションを表示します。ここでの1フレームはAtlasTextureで、regionがアトラス上の矩形、marginがトリムした余白を戻すので、トリムしたフレームも元の大きさを保ちます。AtlasTextureにはatlas、region、margin、filter_clipがあるだけで回転のプロパティはないため、回転したスプライトはパックし直す必要があります。
NerulioはTexturePackerのPNGをそのままは使いません。全フレームをトリムごと切り出し、タイムラインでタグの名前と長さを決めさせてから、回転なしでGodot用の新しいページをパックします。ページの配置はTexturePackerと違うことがありますが、フレーム名は変わりません。
- spriteSourceSize
- 元画像の中での保存ピクセルのx, y, w, h。
- sourceSize
- トリム前の元画像の幅と高さ。
- AtlasTextureのmargin
- トリムしたフレームを戻す
Rect2(左, 上, 足す幅, 足す高さ)。 - 相対の長さ
- Godotのフレームごとの倍率。1.0は1 ÷ アニメーション速度だけ表示。
例：トリムしたフレーム1つをJSONからSpriteFramesへ
TexturePacker JSON Godot 4 SpriteFrames (.tres)
"run_0": { [sub_resource type="AtlasTexture" …]
"frame": {"x":…,"y":…,"w":18,"h":15}, region = Rect2(x, y, 18, 15)、新しいページ上
"spriteSourceSize": {"x":10,"y":10,"w":18,"h":15},
"sourceSize": {"w":40,"h":29} } margin = Rect2(10, 10, 22, 14)
22 = 40 − 18, 14 = 29 − 15
filter_clip = true
名前 run_0 … run_5 → アニメーション "run"、6フレーム、各100ms（JSONに時間の情報なし）
"speed": 10.0 (1000 / 100ms) 全フレーム "duration": 1.0
Studioでrun_5を250msに → run_5 "duration": 2.5 (250 / 100)marginが18 × 15の断片を40 × 29のフレームの左と上から10px内側に戻すので、Godotはフレームを元の大きさで描き、大きさを測ります。
TexturePackerのパブリッシュ設定と、Godotに届くもの
| TexturePackerの設定 | そのときJSONに入るもの | Godot 4バンドルでの結果 |
|---|---|---|
| データ形式 JSON (Hash) または JSON (Array) | 名前をキーにしたオブジェクト、またはfilenameを持つリストのframes | どちらも読む。名前は拡張子なしで保持 |
| Trim mode Trim | trimmed: true、spriteSourceSize、sourceSize | AtlasTextureのmarginが元の大きさを戻す |
| Trim mode Crop, flush position | 切り詰めた大きさと同じsourceSize | フレームは切り詰めた大きさで届き、元のキャンバスは取り戻せない |
| Allow rotationオン | 回したスプライトにrotated: true | 回ったまま取り込み、書き出しは未検証。回転なしでパックし直す |
| Detect identical sprites | 複数の名前が1つの矩形を指す | 名前ごとにフレームは残り、.tresでは同じAtlasTextureを共有 |
| ピボットポイント | 0–1のpivot {x, y} | フレームのピボット。ノードのオフセットは最初のフレームのピボット |
| スプライト名 walk_01、walk_02 … | 名前だけ | アニメーションwalk、自然順（2が10より先） |
できること
- ハッシュ・配列どちらのJSONも、トリム済みフレームも可：spriteSourceSizeとsourceSizeがフレーム本来のキャンバスとオフセットに。
- 名前からアニメーション：walk_01、walk_02 …は「walk」に、自然順（2が10より前）で。名前そのものは保持。
- JSONにピボットがあれば使い、なければ下中央から始めてピボットツール（P）で動かす。
- TexturePackerのJSONには時間がないので全フレーム100msから。書き出し前にフレームごとかタグごとに実際の長さを。
- バンドル：SpriteFrames .tres（AtlasTextureの範囲＋余白）、Nearestフィルターとピボットのオフセット付きAnimatedSprite2D .tscn、fix_alpha_borderオフの.png.import。
使い方
- PNGと.jsonを一緒にドロップ（JSONのmeta.imageが対になる画像を示します）。
- インポートパネルでフレーム数、アニメーションのまとまり、画像の外にあるフレームを確認。
- タイムラインで名前・タグ・時間を直し、Enterでプレビュー。
- パック＆書き出しでGodot 4を選んで書き出し。この書き出し先はフレームを回転しません。
- フォルダーをres://以下のどこかにコピーし、.tscnをシーンにドラッグするか、.tresを自分のAnimatedSprite2Dに設定。
出力されるファイル
| ファイル | 用途 |
|---|---|
run.tres | SpriteFrames：タグごとに速度・ループ・相対の長さを持つアニメーション、AtlasTextureのregion・margin・filter_clip、ピボットとボックス入りのメタデータnerulio。 |
run.tscn | このリソースを使うAnimatedSprite2D。Nearestのテクスチャフィルター、最初のフレームのピボットをオフセットに。 |
run.png、run.png.import | 新しいページとインポート設定：可逆、ミップマップなし、Fix Alpha Borderオフ。 |
README-GODOT.md | このバンドルの手順。 |
Godot 4に取り込む
- 展開してフォルダーごと
res://以下にコピーします（例：res://characters/run/）。.tresは相対パスで新しいPNGを探します。 - ファイルシステムドックに取り込ませます。同梱の
.png.importが薄いピクセルを正確に保ちます。Godotの既定のインポートはアルファ20未満のピクセルの色を変えてしまいます。 run.tscnをシーンにドラッグするか、自分のAnimatedSprite2DのSprite Frames属性にrun.tresを読み込みます。- スクリプトでは
$Hero.play("run")で再生し、ループしないアニメーションにはanimation_finishedをつなぎます。 - ほかで使っていなければ、古いTexturePackerのPNGとJSONをプロジェクトから外し、同じ絵を二重に取り込まないようにします。
結果の確認
- SpriteFramesパネル：名前のグループごとにアニメーションが1つあり、フレーム数はJSONと同じ（run_0 … run_5なら6）。
- 400%に拡大して、トリムしたフレームを元画像と比べます。marginがトリムを戻しているので、大きさと位置が同じはずです。
print($Hero.sprite_frames.get_frame_texture("run", 0).margin)がそのフレームのmarginのRect2を出力します。
TexturePacker JSONの項目とGodotでの行き先
| TexturePacker JSON | Studioでは | Godot 4バンドルでは |
|---|---|---|
| framesのキーかfilename | 拡張子を除いたフレーム名 | 接頭辞からアニメーション名、メタデータにフレーム項目 |
| frame {x, y, w, h} | 元のシート上のフレーム範囲 | 新しくパックしたページのAtlasTexture region |
| spriteSourceSize、sourceSize | 本来のフレームキャンバスとオフセット | AtlasTextureのmarginで元のサイズを復元 |
| pivot | フレームのピボット（既定は下中央） | AnimatedSprite2Dのoffset、全ピボットはメタデータに |
| rotated: true | 回った状態で読み込み | 未検証、回転なしでパックし直しを |
| meta.image | JSONとPNGを対応付け | PNGページと.png.import（可逆、ミップマップなし） |
| 時間の項目なし | 変えるまでフレームあたり100ms | アニメーションのspeedと相対的な長さ |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| フレームが違うアニメーションにまとめられた | 名前が「名前＋番号」になっていない、または2つのグループが接頭辞を共有 | インポートパネルにまとめ方が表示される | 書き出し前に、タイムラインでフレーム名やタグを直す |
| 一部のフレームが横倒し | そのスプライトが回転ありでパックされた | JSONで"rotated": trueを検索 | TexturePackerでAllow rotationをオフにしてパックし直し、新しいファイルの組を入れる |
| どのアニメーションも同じ速さで再生される | JSONに時間の情報がなく、全フレームが100msから始まる | 書き出し前のタイムラインの長さ | フレームやタグごとに実際の長さを設定して書き出し直す |
| インポートパネルに画像の外にあるフレームがあると出る | JSONが別のPNGのもの、またはパック後にPNGの大きさを変えた | meta.sizeとPNGの大きさを比べる | meta.imageに書かれたPNGを、そのJSONと一緒に入れる |
| 薄いピクセル（光・煙）の色が変わる | 同梱の.png.importではなく、Godot既定のFix Alpha Borderオンで取り込んだ | PNGのインポートドック | 同梱の.png.importを残すか、Fix Alpha Borderを切って再インポート |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
TexturePacker純正のGodotインポーター（Godot SpriteSheet .tpsheet＋プラグイン） | TexturePackerからのパブリッシュを続け、自動で再インポートさせたいとき。CodeAndWebの説明では、.spritesフォルダーにスプライトごとのAtlasTextureと、10fpsでループするアニメーションのAnimationLibraryを作ります。Godot 4.7.2での試験では正しく描かれましたが、Godot既定のPNGインポートでは弓兵10フレーム中2フレームで薄いピクセルが変わりました。 |
| GodotのAdd Frames from Sprite Sheet | 均一なグリッドのシート専用です。パック済みアトラスはフレームの大きさがばらばらです。Godotでスプライトシートを参照。 |
| 元データから始める | .asepriteファイルが残っているなら、AsepriteからGodotへがTexturePackerのJSONにはなかったタグと長さを保ちます。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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は完全一致。 |
検証の根拠
GIFデコーダー：実在のGIF 29本で408/408フレームがPillowと一致、APNG 16本で132/132。.aseprite：コーパス231ファイルを読み込み・書き直し、Aseprite 1.3.18で開いてタグ・長さ・ピクセルが231/231一致。書き出し：実在のCC0アセットで実際のエンジンを49回実行し47回合格。失敗2回はPhaser 3.90のトリムXMLの不具合で、Phaser 3プリセットで回避できます。
制限
- JSON内の回転したスプライトは回ったまま取り込まれ、その書き出しは未検証です。
- TexturePackerの
.tpsheet形式は読みません。シートはJSON（HashかArray）でパブリッシュしてください。 - ポリゴンでパックしたシートは矩形として読み、ポリゴンのメッシュは無視します。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
NerulioのGodot 4バンドル（SpriteFrames .tres、.tscn、.png.import）をGodot 4.7.2で読み込み、全フレームを1倍と4倍で描いて元画像と比較しました。TexturePackerのJSONの読み込みはsrc/studio/sprite/atlas-data.jsです。TexturePacker 8.3.0とGodotプラグインv4.3.0は2026-09-25の比較で実行しました。Godotの動作はGodot 4.7のドキュメントに、プラグインの動作はCodeAndWebの説明に従います。
参照した公式ドキュメント
よくある質問
TexturePackerが回転して格納したフレームは？
シート上の向きのまま（回った状態で）読み込み、その書き出しは未検証です。TexturePackerで回転をオフにしてパックし直したファイルを入れてください。GodotのAtlasTextureは範囲を回転できないため、Godot向けは回転してパックしません。
Godotでもフレームの時間は保たれますか？
Godotのやり方で保たれます。アニメーションのspeedがfpsで、各フレームのdurationはそれに対する相対値なので、12fpsで250msは3.0と書かれます。逆再生とピンポンはフレーム順として展開。Godot 3.xはこのリソースを読めません。
当たり判定はどこに入りますか？
Studioで描いたボックスとコリジョンポリゴンは、ノードではなくSpriteFramesのメタデータ「nerulio」（sprite_frames.get_meta("nerulio")）に保存されます。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。