AsepriteをGodot 4へ · プラグインなしでSpriteFrames
PATH上のAsepriteもエディタープラグインも不要。.asepriteをドロップしてタグを確認し書き出すと、検証でGodot 4.7.2が読み込み、フレームごとに描画したバンドルが得られます。
.asepriteファイルには、フレームごとのミリ秒単位の長さ、タグ（方向と繰り返し回数を持つ名前付きのフレーム範囲）、レイヤー、スライスが入っています。Godot 4はこのファイルを直接開けず、AnimatedSprite2DでSpriteFramesリソースを再生します。Nerulioはブラウザでファイルを読み、タグごとに同じタイミングのSpriteFramesアニメーションを作り、フレームを1枚のPNGにパックし、すぐ使えるシーンを添えます。フォルダーをres://以下にコピーして.tscnをシーンに置けば、最初のタグがNearestフィルターで再生されます。Godot 4専用で、4.7.2で確認しています。
- Godot 4検証済み· Godot 4.7.2
- .aseprite検証済み· Aseprite 1.3.18
- 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
- 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
.asepriteの中身と、Godotに必要なもの
Asepriteはアニメーションの文書全体を保存します。フレームごとに長さ（ms）があり、タグはフレームの範囲に名前を付けて1つのアニメーションにまとめ（walk = 4〜9番）、再生方法も決めます。順方向・逆方向・ピンポン、無限ループか決まった回数かです。レイヤーは絵の部品を分け、スライスはピボット位置やヒットボックスなどの矩形を示します。
Godot 4では、AnimatedSprite2DノードがSpriteFramesリソースを読んでフレームアニメーションを再生します。アニメーションごとに名前・毎秒フレーム数（FPS）・ループの有無・フレーム一覧があり、フレームはテクスチャと相対的な長さで構成されます。Godotは1フレームを「相対の長さ ÷（FPS × 速度倍率）」秒表示するため、ミリ秒の値はそのまま写さず換算する必要があります。
Nerulioはすべてのタグを10 FPSで書き出します。1ティックは100ms（Asepriteの既定のフレームの長さ）で、各フレームの相対の長さは「ミリ秒 ÷ 100」です。そのため1つのタグの中で長さがばらばらでも、1フレームずつの表示時間がAsepriteと一致します。
- タグ
- Asepriteで方向（順・逆・ピンポン）と繰り返し回数を持つ、名前付きのフレーム範囲。
- SpriteFrames
- アニメーションの名前・速度（FPS）・ループ・フレームを保存するGodotのリソース。
- AtlasTexture
- 大きなテクスチャの矩形領域。書き出したフレームはそれぞれパック済みPNGの1領域を指します。
- 相対の長さ
- Godotのフレームごとの倍率。1.0はFPSの1ティック、2.0は2ティック表示されます。
例：タグが3つある32 × 32のキャラクター
16フレームとタグ3つを持つ.asepriteを書き出すと、SpriteFramesには次の値が入ります。
Aseprite Godot 4 SpriteFrames
idle フレーム0–3 各125 ms ∞ idle 10 FPS 1.25 × 4 loop on
walk フレーム4–9 各100 ms ∞ walk 10 FPS 1.0 × 6 loop on
attack フレーム10–15 100,100,100,100, attack 10 FPS 1.0, 1.0, 1.0, 1.0, loop off
150, 250 ms ×1 1.5, 2.5
相対の長さ = ms / (1000 / 10 FPS) = ms / 100 125 ms → 1.25 250 ms → 2.5
検算 1.25 / 10 = 0.125秒 2.5 / 10 = 0.250秒 （Asepriteと同じ）attackはAsepriteで1回だけ再生する設定なので、ループはオフになります。再生後は最後のフレームで止まるため、スクリプトでノードのanimation_finishedシグナルを受けてidleを再生し直してください。
変換後に残るもの
| Aseprite | Nerulio | Godot 4 |
|---|---|---|
| フレームのピクセル（表示中のレイヤー） | 合成したフレームをPNG 1ページにパック | そのPNGのAtlasTexture領域 |
| フレームの長さ（ms） | フレームごとに保持 | 相対の長さ = ms ÷ 100。アニメーション速度は10 FPS |
| タグ | 同じ名前のアニメーション1つ | 同じ名前のSpriteFramesアニメーション |
| 方向：逆方向・ピンポン | 再生順を展開して記録（ピンポン：0-1-2-3-2-1） | その順に並んだフレーム |
| 繰り返し ∞ | ループ | loop = true |
| 繰り返し 1、2、3… | プレビューではその回数再生 | loop = false：Godotでは1回再生（回数は保存されない） |
| タグが1つもない | 全フレームのアニメーションdefaultを1つ | アニメーションdefault |
| ピボット付きのスライス | フレームのピボット（なければ既定値：下中央） | ノードのoffset = −最初のフレームのピボット、centered = false |
| hit / hurt などの名前のスライス | フレームごとのボックス | リソースのメタデータnerulioに保存（ノードは作らない） |
| レイヤー・合成モード・不透明度 | Studioでは保持 | 統合：Godotには合成済みのフレームが入る |
Godot 4.7には独自のピンポンループもありますが、書き出しは順序をフレーム単位で直接書くため、その機能には依存しません。
できること
- ブラウザで.asepriteを読み込み：レイヤー、タグ（方向・繰り返し）、フレームごとの長さ、スライス→ピボット・ボックス・9スライス。
- AtlasTexture範囲、トリム余白、相対的な長さ、ループ入りのSpriteFrames .tres。
- texture_filter = Nearestとピボットオフセット付きのAnimatedSprite2D .tscn。
- 可逆圧縮・ミップマップなし・fix_alpha_borderオフの.png.import（薄いピクセルの色が変わりません）。
使い方
- .asepriteファイルをドロップ。
- タイムラインでタグと長さを確認（正確に合成できるレイヤーはレイヤーのまま）。
- パック＆書き出しでGodot 4を選ぶ。
- バンドルをGodotプロジェクトに展開してシーンを開く。
出力されるファイル
| ファイル | 用途 |
|---|---|
hero.tres | SpriteFramesリソース：アニメーション、FPS、ループ、相対の長さ、AtlasTexture領域とトリム余白、ピボット・ボックス・衝突ポリゴン入りのメタデータnerulio。 |
hero.tscn | このリソースを使うAnimatedSprite2Dを1つ持つシーン：Nearestフィルター、最初のタグを自動再生、ピボットをオフセットに設定。 |
hero.png | パック済みのフレーム（1枚に収まらなければページが増えます）。 |
hero.png.import | Godotが読むインポート設定：可逆、ミップマップなし、Fix Alpha Borderオフ。薄いピクセルの色が変わりません。 |
README-GODOT.md | このバンドル用の以下の手順。 |
Godot 4に取り込む
- バンドルを展開し、フォルダーごと
res://以下の好きな場所にコピーします（例：res://characters/hero/）。.tresは相対パスでPNGを探すので、ファイルは一緒に置いてください。 - ファイルシステムドックのインポートが終わるのを待ちます。同梱の
hero.png.importの設定で、アトラスは可逆・ミップマップなしで取り込まれます。 hero.tscnをシーンにドラッグするか、自分のAnimatedSprite2Dを選んでSprite Frames属性にhero.tresを読み込みます。- ノードのAnimation属性かSpriteFramesパネルでアニメーションを選びます。同梱のシーンは最初のタグを自動再生します。
- スクリプトでは
$Hero.play("walk")で切り替えます。ループしないタグはanimation_finishedをつないでidleを再生し直します。 - 自分で作ったノードには、プロジェクト設定 › Rendering › Textures › Canvas Textures › Default Texture FilterをNearestに一度変えるか、ノードのTexture › FilterをNearestにします。
結果の確認
- シーンを実行します。100msのフレーム6枚の
walkは、Asepriteのプレビューと同じく0.6秒ごとに繰り返すはずです。 - SpriteFramesパネルを開きます。各アニメーションのフレーム数がタグと同じはずです（ピンポンのタグは展開した順で表示）。
- 2Dビューポートを400%に拡大します。ピクセルの境界が四角いままなら正常で、ぼやける場合はノードがLinearフィルターです。
print($Hero.sprite_frames.get_meta("nerulio"))でフレームごとのピボットとボックスが出るか確認します。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| スプライトがぼやける | ノードがプロジェクト既定のLinearフィルターを継承している | 拡大して、ノードのTexture › Filterを確認 | ノードのFilterをNearestに、またはプロジェクトのDefault Texture FilterをNearestに |
| 薄いピクセル（光・煙）の色が変わる | 同梱の.png.importではなく、Godot既定のFix Alpha Borderオンで取り込んだ | PNGのインポートドックでFix Alpha Borderがオン | hero.png.importをPNGの隣に置くか、Fix Alpha Borderを切って再インポート |
| タグが1つない | ファイルにタグがなく全部defaultになった、または書き出し前にタグ名を変えた・消した | 書き出し前にNerulioのタイムラインのタグ行を確認 | Asepriteかタイムラインでタグを直して書き出し直す |
| 1回だけのはずのタグがループする／ループのはずが止まる | 繰り返し∞はループオン、回数指定はループオフになる | SpriteFramesパネルでそのアニメーションのループ切り替え | タグの繰り返しを変えるか、GodotでLoopを切り替える。1回再生のタグはanimation_finishedを使う |
| アニメーションが切り替わるときにキャラが跳ねる | フレームごとにピボットが違うが、ノードのオフセットは1つ（最初のフレームのピボット） | 書き出し時の注意にピボット不一致の警告が出る。全ピボットはmetadata/nerulioにある | 全フレームで同じピボットのスライスを使うか、書き出し前にNerulioでピボットをそろえる（ピボットエディター） |
| Asepriteより速い・遅い | ノードのSpeed Scaleやplay()のカスタム速度が1でない | インスペクターのSpeed Scale | Speed Scaleを1にし、play()はカスタム速度なしで呼ぶ |
| Godot 3で.tresが開けない | フレームごとの長さを持つGodot 4形式のリソース | — | Godot 4を使うか、PNGのスプライトシートで書き出してGodot 3で手作業でフレームを組む |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| AsepriteでPNGシートを書き出し（File › Export Sprite Sheet）、GodotのSpriteFramesパネルでAdd Frames from Sprite Sheetを使う | アニメーションが1〜2個で長さが均一なとき。ファイルは少なくて済みますが、FPSはアニメーションごとに手で設定し、フレームごとの長さは失われます。Godotでスプライトシートを使うも参照。 |
| Godot Asset Libraryの.asepriteインポートプラグイン | 絵を頻繁に直し、保存のたびにGodotに再インポートさせたいとき。こうしたプラグインはAsepriteのプログラムを呼び出すため、取り込むすべてのPCにAsepriteが必要です。 |
| 同じファイルを別のエンジンで | AsepriteをUnityへ、AsepriteをPhaserへ。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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プリセットで回避できます。
制限
- 2回以上の繰り返し回数は保存されず、Godotでは1回再生になります。
- レイヤーは統合されて入ります。Godotで部品ごとに動かすなら、部品ごとに別ファイルで書き出してください。
- ヒット・ハートボックスはリソースのメタデータとしてだけ入ります。
Area2DとCollisionShape2Dのノードは自分で作ってください。 - グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
検証の実行では、Godot 4.7.2がNerulioのバンドルを読み込み、アニメーションごとのフレーム数・速度・ループ・相対の長さを読み戻し、全フレームを1倍と4倍で描画して元画像と比較しました。.asepriteの読み込みは実在の231ファイルで確認し、Aseprite 1.3.18で同じタグ・長さ・ピクセルのまま開き直せました。上の手順のGodotの動作はGodot 4.7の公式ドキュメントに基づきます。
参照した公式ドキュメント
よくある質問
Asepriteのインストールは必要？
不要です。ファイルはブラウザで解析します。231ファイルの.asepriteコーパスで、222件はレイヤーごと、9件は理由を表示して統合して読み込みました。
.png.importを同梱する理由は？
Godotの既定のインポートはアルファ20未満のピクセルの色を変えます（fix_alpha_border）。バンドルの設定でこれを切り、その設定でテストのエフェクトシートがGodotで合格しました。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。