GDevelop スプライトシート · フレーム画像に分割して使う
GDevelopのスプライトオブジェクトは、アニメーションをフレームごとの別々の画像で組み立てます。そのためスプライトシート1枚は、使う前に分割が必要です。従来のスプライトラボがフレームを見つけ、ずれた枠を直させてから、フレームごとに1枚ずつ順に番号を振ったPNGのZIPを保存できます。
GDevelopのスプライトオブジェクトは、アニメーションを1フレーム1枚の別々の画像で組み立てるので、スプライトシートは先に分割する必要があります。NerulioにはGDevelop専用の書き出しはなく、提供するのは普通のPNGフレームです。スプライトラボがグリッドを測り、フレームごとに同じ大きさのPNGを読み順に番号付き（hero_001.png …）でZIPにまとめて保存できます。GDevelopではアニメーションごとに1行分の画像を追加し、フレーム間の時間を秒（1 ÷ FPS、既定は0.08秒）で設定してループをオンにします。ここではGDevelopで何も読み込んでおらず、GDevelop側の手順はGDevelopのwikiに基づきます。
- Frame PNGs測定確認· Pillow
GDevelopがシートに求めるもの
GDevelopのスプライトオブジェクトにはアニメーションがあり、アニメーションは表示されている順に再生される画像の一覧です。アニメーションごとに2フレーム間の時間が秒で1つ（既定0.08秒）あり、ループの切り替えがあります。ループしないと1回再生して最後のフレームで止まります。アニメーションに付けた名前は、イベントの「Change the animation (by name)」で使います。
エディター自体はPNGをフレームに分割しません。GDevelopには回り道が2つあります。内蔵のPiskelエディターはフレームが等間隔の1アニメーション分のシートを取り込めます。Sprite Sheet Animations拡張はTiled Spriteを行・列、またはTexturePackerのpixi.js形式のJSONで動かします。それ以外はフレームの画像を取り込みます。
どのスプライトも、画像の左上にあるOrigin点（オブジェクトの位置を決める）と、画像の大きさの半分の位置にあるCenter点（回転と反転の中心）から始まります。1つのアニメーションのフレームの大きさがばらばらだと、これらの点が絵の別の場所に来てキャラクターが揺れます。フレームの大きさをそろえれば防げますし、GDevelopはアニメーション内の全画像で同じ点を共有できます。
Nerulioが受け持つのは分割です。グリッドモードではスプライトラボがセルサイズ・余白・間隔を測るので、全PNGがセルの大きさになります。自動モードは大きさのばらばらなシートから透明で分かれたスプライトを見つけ、整列（Normalize）の段階で共通のキャンバスに載せます。ピクセルは描き直さずコピーし、不透明な背景は先にキーカラーで消せます。ZIPには時間・名前・ヒットボックスは入りません。
- フレーム間の時間
- GDevelopのアニメーションごとに1つあるフレームの時間（秒）。1 ÷ FPS。
- ループ
- 既定はオフで1回再生。オンで繰り返す。
- Origin / Center
- スプライトの既定の点：左上の角と、画像の大きさの半分。
- Scale mode（Sampling）
- プロジェクトの設定。"nearest"ならドット絵がくっきり保たれる。
例：3行のシート
hero.png 512 × 192 px：64 × 64のセルが3行（idle、run、attack）× 8列
スプライトラボ、グリッド：セル64 × 64 → 64 × 64のPNG 24枚入りのhero-frames.zip
hero_001 … hero_008 = idle hero_009 … hero_016 = run hero_017 … hero_024 = attack
GDevelopのスプライトオブジェクト「Hero」：画像8枚のアニメーション3つ
run 12 FPS → フレーム間の時間 = 1 / 12 = 0.083秒
idle 100 ms → 0.1秒 GDevelopの既定0.08秒 = 12.5 FPS
Origin (0, 0) 左上 Center (32, 32) = 64 × 64の半分するとrunの1周は8 × 0.083 ≈ 0.67秒です。アニメーションごとにフレームの時間は1つだけなので、2倍長く止めたいフレームは2回追加します。
できること
- グリッドモードはセルサイズ・余白・間隔を測るので、すべてのPNGが同じサイズになり、GDevelopで再生してもフレームがぶれません。
- 自動モードは、サイズがばらばらのシートから透明なすき間で分かれたスプライトを見つけ、帽子や剣のように離れた小さなパーツも本体とまとめます。
- ファイル名はシート名＋ゼロ埋めの番号（hero_001.png、hero_002.png …）なので、ファイル選択画面でもフレーム順に並びます。
- ピクセルは描き直さずそのままコピー。各PNGがシート上で示した枠と一致することを測定済みで、拡大や補間はありません。
- 詳細設定のキーカラーで、マゼンタなどの不透明な背景を分割前に透明にできます。
- 正直に書くと、これらのファイルをGDevelopで開いて確認はしていません。表の手順はGDevelopの一般的な流れです。
使い方
- スプライトシートをスプライトラボにドロップ。
- そろったシートはグリッド、ばらばらなシートは自動を選び、枠を確認。
- ずれた枠をドラッグか数値で直し、フレームを読み順に並べる。
- フレームのPNGをZIPで保存して展開。
- GDevelopで1つのアニメーションの画像を順にスプライトオブジェクトへ追加し、フレーム間の時間とループを設定。
出力されるファイル
従来のスプライトラボのフレーム保存（GDevelop専用の書き出しではありません）です。
| ファイル | 用途 |
|---|---|
hero-frames.zip | フレームごとにPNG 1枚。名前はシートに由来。 |
hero_001.png … | 読み順に並んだフレーム。ファイル選択画面でも順番が保たれるよう最低3桁にゼロ埋めし、グリッドモードでは各PNGがセルの大きさです。 |
GDevelopでアニメーションを作る（GDevelopのwikiに基づく。ここでは未実行）
- フレームを展開します。GDevelopで新しいオブジェクトを追加し、Spriteを選んで名前を付けます。
- Add an animationを押して名前（idle）を付けます。画像の追加で
hero_001からhero_008までをまとめて選びます。GDevelopは表示されている順に再生します。 - 時計のアイコンの横にフレーム間の時間を入れます。秒単位の1 ÷ FPSで、10 FPSなら0.1です。
- idleとrunはループをオンにし、1回きりのattackはオフのままにします。
- 行ごとに繰り返し、イベントの「Change the animation (by name)」でアニメーションを切り替えます。
- ドット絵なら、ゲームのプロパティでプロジェクトのScale mode（Sampling）をnearestにします。
- オブジェクトを足元基準で立たせたいなら、Edit pointsでOrigin点を動かし、アニメーション内の全画像で点を共有したままにします。
結果の確認
- 各アニメーションの画像がファイルの順に並んでいるはずです：idle 001–008、run 009–016、attack 017–024。
- プレビューでrunの1周が1フレーム0.083秒でおよそ0.67秒のはずです。
- 全画像が64 × 64なので、フレーム間でキャラクターがずれないはずです。
- Scale modeがnearestなら、拡大してもピクセルの境界がくっきりしているはずです。
ZIPからGDevelopのアニメーションまで
| GDevelopでの作業 | ZIPから使うもの | ヒント |
|---|---|---|
| フレーム画像を順番に追加 | 1行分のPNG（例：hero_001〜hero_008） | ゼロ埋めの番号なのでファイル選択画面でも順番どおり |
| 動作ごとに1アニメーション | シートの1行ごとに1まとまりのファイル | イベントで呼ぶ名前を付ける |
| フレーム間の時間を設定 | フレーム時間（秒）。10 fpsなら0.1 | ZIPに時間は入らず、1つの値がアニメーション全体に適用 |
| ループ | 待機・歩きはオン、1回きりの攻撃はオフ | アニメーションごとに決める |
| フレームサイズ | グリッドで切れば全PNGが同じサイズ | サイズが混ざるとキャラクターがぶれる |
ここに書いた内容はGDevelopで実行していません。表はオブジェクトエディターの一般的な手順です。PNG自体はシート上の枠と一致することを測定しています。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| アニメーションが1回再生して止まる | ループは既定でオフ | そのアニメーションのループの切り替え | ループをオンにする |
| フレームの順番が違う | 別の順番でファイルを選んだ、またはゼロ埋めしていない名前が1、10、2の順に並んだ | アニメーション内の画像の順序 | ZIPのゼロ埋めの名前を使い、必要なら画像を並べ替える |
| キャラクターが揺れる | フレームの大きさがばらばら（自動モードで分割）で、OriginとCenterが絵の別の場所に来る | 画像の大きさを比べる | グリッドで分割するか、保存前に整列（Normalize）を実行。アニメーション全体で点を共有 |
| スプライトがぼやける | Scale modeがlinear | ゲームのプロパティ › Scale mode | nearestにする |
| GIFの不ぞろいな時間が均等に再生される | 1つのアニメーションにフレーム間の時間は1つだけ | 元のディレイと比べる | 長く止めたいフレームを2回入れるか、動作を2つのアニメーションに分ける |
| Piskelの取り込みでシートがずれて切れる | フレームサイズが合っていない、またはシートに複数のアニメーションがある | PiskelのImport and Mergeウィンドウのフレームの枠 | 1アニメーション分の実際のフレームサイズを入れるか、スプライトラボで分割する。フレームサイズを参照 |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| GDevelop内蔵のPiskel：Import as Sprite sheet | フレームが等間隔な1アニメーションなら、ほかのツールなしでフレームがそのままアニメーションに入ります。 |
| Sprite Sheet Animations拡張 | Tiled Spriteに画像1枚を置いたまま、行・列やTexturePackerのpixi.js JSONでフレームを動かしたいとき。NerulioのPixiJS書き出しも似たframes + animationsの構造ですが、この拡張で試したことはありません。 |
| どのツールにも使える個別フレーム | 同じ分割をエンジン全般向けに説明したページ：スプライトシートをPNGフレームへ。 |
出力ファイルと検証方法
「測定確認」は、ダウンロードしたファイルをページ外（Pillow・numpy・独立したパーサー）で開き直して性質を測ったという意味です。ゲームエンジンでの読み込みは試していません。
| 書き出し先 | ファイル | 検証 |
|---|---|---|
| Frame PNGs | <sheet>-frames.zip (one PNG per frame) | 測定確認 Pillow各フレームPNGがシート上の枠と一致（Chromium・Firefox）。ZIPに位置情報はありません。 |
検証の根拠
ZIPから読み直したフレームが元シートの該当範囲とピクセル単位で一致。
制限
- NerulioにはGDevelop専用の書き出しがありません。時間・名前・ヒットボックスなしのPNGフレームだけです。
- GDevelopでは何も読み込んでおらず、GDevelopの手順はwikiに基づきます。
- GDevelopのアニメーションはフレーム間の時間が1つなので、不ぞろいな時間はフレームの重複で表す必要があります。
- 従来のラボにはタイムラインとタグがありません。アニメーションはStudioを使ってください。
- フレームはアルファの島か、確認したグリッドで切ります。
- 非常に大きいシートは帯ごとに分割し、進行状況を表示します。
バージョンと出典
Nerulioが受け持つ部分：スプライトラボがシートを分割し、ZIP内の全PNGがシート上の枠と一致し、拡大や補間がないことを測定しました。GDevelopは動かしていません。オブジェクト、アニメーション、ループ、フレームの時間、点、Piskel、Scale modeについてはGDevelop 5のwikiに基づきます。
参照した公式ドキュメント
よくある質問
なぜGDevelopの外でシートを分割するのですか？
GDevelopのスプライトアニメーションは個別のフレーム画像でできています。ここで分割すれば、ピクセルが正確で順番も予測できる画像が手に入り、書き出す前に枠を1つずつ確認できます。
1枚のシートに複数のアニメーションが入っています
ZIPは1回保存すれば十分です。ファイルはシートの読み順（行ごと）に並ぶので、GDevelopで行ごとにアニメーション（idle、walk、attack …）を作り、その行のファイルを追加してください。
読み込んだアニメーションがぶれます
サイズの違うフレームは、再生時に互いにずれることがあります。グリッドで切って同じサイズの枠にするか、保存前に整列（Normalize）の段階で全フレームを共通のキャンバスに載せてください。
ZIPに時間や当たり判定は入りますか？
いいえ、PNGだけです。時間と当たり判定のマスクはGDevelopで設定します。Godot・Unity・Phaser向けにフレームごとの時間を持つアトラスも必要なら、同じシートをStudioで開いてください。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。