GIFをスプライトシートに変換（フレーム時間を保持）
GIFを入れると、全フレームを遅延・破棄方法ごとデコードして、その時間を持つフレームにし、エンジンが読むアニメーションデータと一緒にシートへパックします。
GIFやAPNGをドロップすると、Nerulioが全フレームをディレイと廃棄方法を適用した完全な絵としてデコードし、ディレイをフレームの長さに変換し（GIFの1/100秒 × 10 = ms）、空の縁をトリムし、同一フレームは1回だけ保存してシートにパックします。エンジンのターゲットを選べばタイミングも一緒に渡ります。PhaserとAseprite JSONにはフレームごとのミリ秒、Godotには相対的な長さ、Unityにはクリップのキーとして入ります。ディレイ0または1（1/100秒）のフレームは、ファイルの値を使うと選ばない限り、ブラウザと同じく100 msで再生します。
- 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
GIFのフレームがまだスプライトのフレームではない理由
GIFは常に完成した絵ではなく、変化した部分を保存します。1つの画像が画面の一部しか覆わないこともあり、廃棄方法が次の画像の前にすることを決めます。0や1はそのまま残し、2はその矩形を背景に消し、3は以前の状態に戻します。目に見えるフレームは、これをすべて順番に描いた結果です。Nerulioはファイルを同じように再生し、結果ごとにキャンバス全体のフレームとして保存するので、前の画像が描いた部分がスプライトのフレームから抜け落ちません。
タイミングはフレームごとに1/100秒単位なので、ディレイ4は40 msです。0と1は特別です。WebKitは10 ms以下のフレームを100 msで再生し、GIFはおそらくそう見える前提で作られています。Nerulioも既定では同じ扱いにし、判断項目として示して、保存された値を使う代替案を用意します。APNGはディレイを分数（delay_num/delay_den秒）で持つので、ミリ秒単位でそのまま入ります。
ループはNETSCAPE2.0ブロックから来ます。0なら無限、回数nはn + 1回の再生として読みます。ブロックがなければ1回再生です。ファイル全体がファイル名のアニメーション1つになり、この繰り返し回数がエンジンのループ設定につながります。
- 廃棄方法
- 次の画像の前にGIFの画像をどうするか：残す（0/1）、背景に消す（2）、以前の状態に戻す（3）。
- ディレイ
- GIF：1/100秒単位。APNG：
delay_num/delay_den秒。 - キャンバス全体のフレーム
- 合成後の絵。GIFの論理画面と同じ大きさです。
- エイリアス
- 見えるピクセルが同じ2つのフレームは、シートに1回だけ保存します。
具体例：12フレームの爆発
explosion.gif 96 × 96、12フレーム、ディレイ 4 4 4 4 8 8 8 8 8 8 8 8 (1/100 s)、loop 0
長さ 4 × 40 ms + 8 × 80 ms = 160 + 640 = 1サイクル 800 ms
フレーム 96 × 96 の完全な絵 12枚（廃棄方法を適用）、トリムしてパック
ループ NETSCAPE 0 → 繰り返し ∞
Phaser anims.json duration 40 × 4, 80 × 8 (ms) repeat -1
Godot FPS = 1000 / (800 / 12) = 1000 / 66.67 = 15 相対 0.6 × 4, 1.2 × 8
検算 0.6 / 15 = 0.040 s 1.2 / 15 = 0.080 s最初のフレームのディレイが0なら100 msとして読み込み、インポートパネルが「ファイルのディレイを使う」を代替案として示します。
何がどこに対応するか
| GIF／APNGでは | Nerulioでは | シートとデータでは |
|---|---|---|
| 画像 + 廃棄方法（部分的な矩形のこともある） | 合成後のキャンバス全体のフレーム1つ | オフセット付きのPNG上のトリム領域 |
| ディレイ（GIFは1/100秒、APNGは分数） | ms単位のフレームの長さ。0–1はファイルの値を選ばなければ100 ms | フレームごとのms（Phaser、Aseprite JSON、PixiJSのmeta）、相対的な長さ（Godot）、キーの時刻（Unity） |
NETSCAPEループ 0 / n / なし（APNGはnum_plays） | 繰り返し ∞ / n + 1回 / 1回（APNGは保存された回数） | Phaserのrepeat −1 / n / 0、Godotのループ オン／オフ |
| ファイル全体 | ファイル名のアニメーション1つ | エンジンのファイルのアニメーション1つ |
| 同一フレーム（溜め） | エイリアスとして1回だけ保存 | 項目2つ、領域1つ |
| 透明色インデックス | アルファ0 | PNGの透明ピクセル |
| パレットの色 | 正確なRGBA | PNGに正確な色 |
できること
- GIF・APNGの全フレームと遅延・破棄方法を取り込み、欠落はありません。遅延0または1（1/100秒）のフレームはブラウザと同じく100 msとし、ファイルの値をそのまま使う選択肢もあります。
- Pillowと照合したデコーダー：実在のGIF 29本で408/408フレーム、APNG 16本で132/132フレーム一致。
- トリムして同一フレームをまとめて密にパック、またはフレーム全体を保持。
- Phaser・PixiJS JSON、Godot SpriteFrames、Unityクリップ、Aseprite JSONなどでシートを書き出し。
使い方
- GIFかAPNGをドロップ。
- Studioが全フレームをパックしたパック＆書き出し画面を開きます。スプライトタブではフレームごとの長さ付きタイムラインを確認できます。
- エンジンのプリセットを選ぶ。
- シートとデータファイルを書き出し。
出力されるファイル（Phaser 3/4ターゲット）
| ファイル | 用途 |
|---|---|
explosion.png | パック済みのシート。 |
explosion.json | 各フレームの領域、トリムのオフセット、ピボットを持つアトラスJSON（ハッシュ）。 |
explosion.anims.json | anims.fromJSON用のアニメーション：フレーム順、フレームごとのms単位のduration、repeat。 |
README-PHASER.md | このバンドルを読み込むコード。 |
Phaser 3・4で再生する
- PNGと2つのJSONファイルをアセットフォルダにコピーします。
preload()で：this.load.atlas('explosion', 'explosion.png', 'explosion.json')とthis.load.json('explosion-anims', 'explosion.anims.json')。create()で：this.anims.fromJSON(this.cache.json.get('explosion-anims'))のあとthis.add.sprite(100, 100, 'explosion').play('explosion')。- ピクセルアートならゲームを
pixelArt: trueで作成します。他のエンジンならそのターゲットを選んでください：Godot、Unity、PixiJS。
結果の確認
- スプライトのタイムラインにGIFと同じ数のフレームがあり、それぞれディレイ × 10 msです。
- エンジンでの1サイクルはディレイの合計です（例では800 ms）。
- パック済みフレームの一覧に、トリムされた数と1回だけ保存された数が出ます。溜めの長いGIFほど小さくなります。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| 一部のフレームが思ったよりずっと遅い | ディレイが0か1（1/100秒）で、ブラウザと同じく100 msで再生しています | インポートパネル：ディレイの判断に該当フレーム数が出ます | エンジンで速く再生すべきなら、ファイルのディレイを選んでください（0は1 msになります） |
| アニメーションが1回再生して止まる | GIFにNETSCAPEのループブロックがなく、「1回再生」と読みました | アニメーションパネル：繰り返し | 書き出し前に繰り返しを∞にしてください |
| シートがGIFより大きい | 全フレームが完全な絵になり、変化のない部分を省いていたGIFの圧縮は引き継がれません | パック済みフレーム：トリムとエイリアスの数 | トリムをオンのままに。同一フレームは1回だけ保存しますが、ディザのかかったフレームはまず一致しません |
| 縁が硬い、明るい・暗い縁取りがある | GIFは1ビット透明で、作成時に縁を背景色と混ぜていることが多いためです | 輪郭を拡大します | GIFが保存していない柔らかいアルファはNerulioには復元できません。元のフレームがあればそれを使ってください |
| 「More than 4096 frames」「too large to decode」 | デコーダは4096フレーム、またはデコード後約2億6800万ピクセルで止まります | フレーム数 × 幅 × 高さ | GIFを分割するか、必要な部分だけ先に切り出してください |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| GIFの元になったフレーム | 元のPNGやプロジェクトがあるとき。本物のアルファと正確なタイミングはどのGIFにも勝ります。 |
| ezgifなどのオンライン分割ツール | パックやエンジン用データなしで、フレーム画像だけが別々に欲しいとき。 |
| 逆方向：スプライトシートからGIFへ | シートがあって、共有用の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つ。全フレームがピクセル単位で復元できます。
制限
- GIF全体が1つのアニメーションになります。複数の動作が入っているならタイムラインでタグに分けてください。
- GIFが保存していない柔らかい縁は復元できません。
- ポリゴン（メッシュ）パッキングはありません。検証したエンジンのどれも、書き出しデータからメッシュアトラスを描画しないためです。
- GameMakerのストリップはGameMaker本体では未検証です。
- 拡大縮小バリエーション（@0.5x〜@4x）はニアレストネイバーのみです。
- トリムしたStarling XMLはPhaser 3.90で正しく描画されないため、「Sparrow XML (Phaser 3)」プリセットを使ってください。
バージョンと出典
GIFデコーダは実際のGIF 29個でPillowと比較し、408フレームすべてが一致し、ChromiumのImageDecoderとも一致します。APNGデコーダはすべての廃棄・ブレンド方法を含む16ファイルで132フレームすべてが一致しました。PhaserターゲットはPhaser 3.90と4.2が読み込みました。GIFとAPNGの項目はW3Cの仕様、短いディレイの規則はWebKitのソースに基づきます。
参照した公式ドキュメント
よくある質問
シートはGIFのタイミングを保ちますか？
はい。各フレームの遅延が長さとして保存され、フレームごとの時間を持つ形式（Godot、Unity、Phaser anims、Aseprite JSON、PixiJS meta）に書き込まれます。
GIFはアップロードされますか？
いいえ。このブラウザのタブ内でデコードします。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。