スプライトシートをGIFに · アニメーションごとに1本
シートをフレームに切り、それぞれの時間を持つアニメーションに分け、アニメーションごとにGIF（フレームごとの遅延・1ビット透過）か全ピクセルを保つAPNGで書き出します。
シートをフレームに切り（Nerulioがグリッドを測るか、スプライトを島として見つけます）、行ごとにアニメーションにし、速度を決めてAnimated GIFで書き出すと、アニメーションごとにGIFが1つ、フレームごとのディレイ付きでできます。シート自体にタイミングはないので、フレームレートは自分で選びます。GIFは1/100秒単位なので、10・20・25・50 fpsは正確に、12 fps（83.3 ms）は80 msになります。透明はオン／オフで、255色までは色が正確です。
- 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へ
スプライトシートは1枚のPNGにポーズを格子状に並べたものです。動かすには、画像が教えてくれない3つの情報が要ります。各フレームの位置（セルサイズ、マージン、スペーシング）、どのフレームが同じ動作か（普通は1行が1アニメーション）、各フレームをどれだけ表示するか。Nerulioは1つ目をピクセルから測り、2つ目を行から提案し、3つ目は1フレーム100 msから始めます。
GIFは1/100秒の整数倍しか待てません。100をフレームレートで割って整数になれば正確に保存されます。10 fps（10）、20 fps（5）、25 fps（4）、50 fps（2）です。それ以外の速度はフレームごとに丸められ、20 msより短いフレームは書きません。
シートが透明ではなく単色の上にあるなら、読み込み時にその色を抜いてください。抜かないとGIFにその色が出ます。フレームはアニメーションごとに1つのセルにピボットで揃えて置くので、サイズの違う島として切った行もガタつきません。
- フレームレート（fps）
- 毎秒のフレーム数。フレーム時間 = 1000 ÷ fps ミリ秒。
- ディレイ
- GIFのフレームごとの待ち時間、1/100秒単位。
- グリッド
- シートのセルサイズ、マージン、スペーシング。
- ピンポン
- 端のフレームを繰り返さずに往復する順序：0-1-2-3-2-1。
具体例：384 × 256のシートを4つの速度で
シート 384 × 256 px、6列 × 4行
セル 384 / 6 = 幅 64 px、256 / 4 = 高さ 64 px
行 row_1 … row_4、各6フレーム
fps フレーム時間 GIFのディレイ 6フレーム1サイクル
8 125 ms 13 /100 → 130 ms 780 ms (意図 750)
10 100 ms 10 /100 → 100 ms 600 ms (一致)
12 83.3 ms 8 /100 → 80 ms 480 ms (意図 500)
25 40 ms 4 /100 → 40 ms 240 ms (一致)6フレームの行をピンポンにすると1サイクルは10ステップ（0-1-2-3-4-5-4-3-2-1）なので、10 fpsで1.0秒です。
何がどこに対応するか
| シート／Studio | Nerulio | GIF |
|---|---|---|
| グリッドのセル（または島） | 1フレーム、空のセルは除外 | GIFの1フレーム |
| 行 | アニメーションrow_n、タイムラインで改名 | アニメーションごとに1ファイル |
| キーカラー（マゼンタ、緑 …） | 読み込み時に透明化 | 透明色インデックス |
| フレームレートまたは1フレームのms | フレームごとの長さ | 1/100秒単位のディレイ、最小2 |
| 方向、繰り返し | フレーム順に展開して記録、繰り返しは保持 | フレーム順、ループ回数 |
| サイズの違うフレーム | アニメーションごとに1セル、ピボットで揃える | GIFごとにフレームサイズ1つ |
できること
- 測定したグリッドや島でシートを分割。行ごとにアニメーションにできます。
- フレームごとの長さ、方向（順・逆・ピンポン）、繰り返し回数。
- アニメーションごとの適応パレット1つ（255色まで完全一致）と1ビット透過のGIF、完全一致のAPNG。
- 共有用に、単色背景へ4倍ニアレストネイバーで拡大したWebM動画も作成。
使い方
- スプライトシートを入れて「適用」を押す。
- タイムラインでアニメーションと時間を確認。
- パック＆書き出しを開く。
- 「Animated GIF」（またはAPNG）で書き出し。
出力されるファイル
| ファイル | 用途 |
|---|---|
sheet_gif.zip | sheet.pngというシートを書き出したときのダウンロード。中にsheet_gif/フォルダがあります。 |
sheet_gif/sheet_row_1.gif | 1行目のアニメーション。先にタグ名を変えるとsheet_walk.gifのような分かりやすい名前になります。 |
GIFを使う
- ZIPを展開します。アニメーションごとにGIFが1つです。
- 1つをブラウザで開いて速度を確かめます。10 fpsの6フレームの行は0.6秒ごとにループします。
- GIFを載せる背景の上で縁を確認します。柔らかいアルファが必要なら同じパネルからAPNGで書き出してください。
- 動画投稿ならWebM動画（ニアレスト4倍）で書き出してください。逆方向はGIFからスプライトシートへを参照。
結果の確認
- 6フレームの行のGIFはフレームが6つ、ピンポンなら10です。
- どのフレームにも元の背景色が出ていないこと。出ていれば読み込み時にキーカラーが適用されていません。
- 書き出しメモに丸めたディレイが出ます。10・20・25・50 fpsでは出ません。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| GIFにフレームが半分だけ、または2つ同時に映る | グリッドの推定がずれています（マージン、スペーシング、数ピクセル違うセルサイズ） | シート表示：絵に重なるグリッド線 | 別のグリッド候補を選ぶか、セルサイズ・マージン・スペーシングを入力してください。切り出しがずれるときを参照 |
| スプライトの後ろにマゼンタや緑が見える | キーカラーが適用されていません | インポートパネル：背景色 | 検出された色に切り替えて適用し直してください。スプライト背景の除去を参照 |
| アニメーションがガタつく | 島として切ったフレームのピボットがばらばらです | オニオンスキン（F3） | タグのピボットを1つに決めるか、フレームを揃えてください。トリム後のガタつきを参照 |
| 速度が少し違う | フレーム時間が1/100秒の整数倍ではありません | 上の表と比べます | 10・20・25・50 fpsにするか、APNGで書き出してください |
| 柔らかい影が濃くなる・消える | 1ビット透明：アルファ128以上は不透明、それ未満は透明になりました | 半透明ピクセルについての書き出しメモ | APNGで書き出してください |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| 同じパネルのAPNG | 柔らかい縁とミリ秒のタイミングが大事なとき。全ピクセルが正確です。 |
| ezgifなどのオンラインGIFツール | すでにフレームごとの画像があり、アニメーションのタグなしで手早くGIFだけ欲しいとき。 |
| Aseprite：File > Import Sprite Sheetのあと書き出し | Asepriteを持っていて、その中でアニメーションを仕上げ続けたいとき。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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プリセットで回避できます。
制限
- シートにはタイミングがないので、速度は常に自分で決め、1フレーム100 msから始まります。
- GIFはシートのピクセルサイズのままで、GIF書き出しに拡大オプションはありません。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
GIFの出力は、書き出したファイルをPillowでデコードし、全フレームとディレイが書いたとおりか確認しています。グリッドとキーカラーの検出はStudioの取り込み機能で、実際のアセットのシートをUIから読み込み、既定の選択のままでフレームが正しく切れることを確認しました。GIFの制約はW3CのGIF89a仕様に基づきます。
参照した公式ドキュメント
よくある質問
GIFの半透明の縁が硬いのはなぜ？
GIFの透過はオン・オフの2段階だけです。柔らかいアルファを保つならAPNGで書き出してください。
ドットはくっきりしたままですか？
フレームは1:1で書き出し、スムージングしません。WebMはニアレストネイバーで4倍に拡大します。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。