GameMaker スプライトストリップ作成 · アニメーションごとに_stripN
GameMakerはアニメーションごとに1スプライトを求め、ストリップ取り込みはファイル名の_stripNからフレーム数を読みます。この書き出しはタグごとにピボット基準でセルを揃えたストリップを切り出します。その取り込み方式どおりに切っていますが、ここではGameMakerで読み込んでいません。
GameMakerは、ファイル名が_stripNで終わる横長の帯画像をNフレームのスプライトとして取り込み、1フレームの幅は帯の幅 ÷ Nです。384 × 64のspr_hero_run_strip6.pngは64 × 64のフレーム6枚になります。GameMakerはアニメーションごとに1スプライトを求め、スプライトごとに原点と速度は1つずつです。Nerulioはスプライトシート（またはGIF、個別のフレーム、.aseprite）をアニメーションごとにこうした帯1本に切り、全フレームをピボットにそろえ、原点と速度入りのgamemaker.jsonを添えます。GameMaker上では未検証です。GameMakerで読み込んだことはなく、命名と手順はGameMakerのマニュアルに従っています。
- GameMaker未検証
- 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
- CSS sprites検証済み· Chromium
- GIF / APNGデコード確認· Pillow
GameMakerが帯画像を読む仕組み
GameMakerではスプライトアセット1つが1つのアニメーションです。フレーム群、原点（既定は左上、またはプリセットや任意の点）、Frames per secondかFrames per game frame単位の再生速度、コリジョンマスクを持ちます。マニュアルの帯の決まりは、フレームを左から横に並べ、ファイル名を_stripNで終え、1フレームを帯の幅 ÷ Nとすることです。帯はSprite EditorのImportボタンか、IDEへのドラッグで取り込みます。
複数行あるシート全体は帯ではありません。GameMakerのImage Editorは1枚の画像を自分で分割でき（Convert to FramesまたはImport Strip Image）、フレーム数・フレームの幅と高さ・オフセットを指定します。これが手作業の方法で、入力した数値どおりに切るだけで、ピボットにはそろえません。
スプライトの原点は1つなので、全フレームの基準点がセル内の同じピクセルにないと、フレームが変わるたびにキャラクターが跳ねます。Nerulioはアニメーションごとに共通のセル1つへ、各フレームのキャンバス全体をピボットが同じ点に来るようずらして描き、その点をgamemaker.jsonとREADMEの原点として書きます。セルの幅は、ピボットより左の最大距離と右の最大距離の和です。
スプライトの速度も1つだけです。アニメーションの全フレームが同じ長さなら速度 = 1000 ÷ msを書き、違えばアニメーションの速度（Studioのタグは10 FPS）を書いて警告し、自分のコードで使えるようフレームごとのミリ秒をdurationsMsに残します。
- _stripN
- 画像をNフレームに切るようGameMakerに伝えるファイル名の接尾辞。
- 原点（Origin）
- スプライトの基準点。Sprite Editorでプリセットかx・yの直接入力で決める。
- Frames per second / per game frame
- GameMakerのスプライトの2つの速度の方式。
- Convert to Frames
- フレーム数・大きさ・オフセットで1枚の画像を分けるGameMakerのImage Editorのコマンド。
例：1行が1本の帯になる
シートの"run"行：64 × 64のフレーム6枚、各125 ms、ピボット下中央 (32, 64)
Nerulioの帯： spr_hero_run_strip6.png 6 × 64 = 幅384 px、高さ64 px
GameMakerの分割：384 / 6 = 1フレーム64 px（マニュアルの帯の決まり）
原点 x 32、y 64 速度 1000 / 125 = 毎秒8フレーム
"attack"行：4フレーム、100, 100, 150, 250 ms → スプライトの速度は1つだけ
playbackSpeed 10（タグの速度）＋警告、durationsMsに100, 100, 150, 250を保持
毎秒10フレームだとGameMakerは600 msではなく4 × 100 = 400 msで再生攻撃のリズムを守る必要があるなら、durationsMsを使ってコードでフレームの時間を制御するか、書き出す前に全フレームの長さをそろえてください。
できること
- アニメーションごとにspr_<名前>_<タグ>_stripN.pngを1枚（N＝フレーム数）。
- ピボット基準で揃えたセルなので、全フレームでoriginが同じ。
- スプライトごとのorigin・速度・フレームごとのミリ秒入りのgamemaker.json。
- GameMakerでは未検証：ヘッドレスのGameMakerがなく試せず、ストリップは切り出して元と比較しました。
使い方
- シートを入れて「適用」（またはフレーム・GIF・.aseprite）。
- アニメーションごとにタグ名を付け、ピボットを置く。
- パック＆書き出しでGameMakerを選ぶ。
- GameMakerで各ストリップを取り込み、gamemaker.jsonのoriginを設定。
出力されるファイル
パック＆書き出し › GameMakerが書き出すファイル（heroというファイルの場合）です。
| ファイル | 用途 |
|---|---|
spr_hero_run_strip6.png | アニメーションごとの横長の帯1本。名前にフレーム数が入っています。 |
gamemaker.json | スプライトごとにファイル、フレーム数、セルの幅と高さ、xorigin、yorigin、毎秒フレーム単位のplaybackSpeed、ループ、durationsMs、verified: false。 |
README-GAMEMAKER.md | 取り込み手順と、帯ごとのフレーム数・セルの大きさ・原点・速度。 |
GameMakerで（GameMakerのマニュアルに基づく。ここでは未実行）
- 帯ごとにスプライトを作り、Sprite EditorのImportを使うか、PNGをIDEへドラッグします。ファイル名は変えないでください。
_stripNの接尾辞があるからGameMakerがNフレームに切ります。 - スプライトのフレーム数とセルの大きさがREADMEと同じか確認します（例：64 × 64のフレーム6枚）。
- 原点をREADMEか
gamemaker.jsonのx・yで直接指定します（例：x 32、y 64）。 - 速度の方式をFrames per secondにし、READMEの値を入れます（例：8）。
- スプライトに必要なコリジョンマスクの方式（Automatic、Full Image、Manual）を選びます。
- ドット絵なら、対象プラットフォームのGame OptionsのGraphicsでInterpolate colours between pixelsを切ります。マニュアルでは既定でオンとされています。
結果の確認
- Sprite EditorにNフレームが表示され、各フレームの幅が帯の幅 ÷ Nのはずです。
- すべてのフレームで原点の十字が足元にあるはずです。
- プレビューがREADMEの速度で再生され、
runの1周が6 × 125 = 750msのはずです。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| 帯全体が1枚の横長フレームとして入る | ファイル名が変わって_stripNが消えた（ダウンロード時に「 (1)」が付くことも） | 取り込む前にファイル名を確認 | フレーム数を入れた…_stripN.pngに戻す |
| フレームが途中で切れる | 名前のNが画像の実際のフレーム数と違う | 帯の幅 ÷ NがREADMEのセル幅と同じか | 実際の数が入ったNerulioのファイル名をそのまま使う |
| フレームが変わるとキャラクターが跳ねる | 原点を既定（左上）のままにしたか、目分量で決めた | Sprite Editorの原点の入力欄 | READMEの原点を入れる。Nerulioはすでに全ピボットをその点にそろえている |
| 長さが不ぞろいなアニメーションが均等に再生される | GameMakerのスプライトは速度が1つなので、書き出しはタグの速度を使い警告している | 書き出しの注意とgamemaker.jsonのuniformTiming: false | コードでdurationsMsに従ってフレームを進めるか、書き出し前に長さをそろえる |
| アニメーションが速すぎる | 速度の方式がFrames per secondではなくFrames per game frameになっている | 値の横の速度の方式 | Frames per secondに切り替える |
| ゲーム内でドット絵がぼやける | Interpolate colours between pixelsがオン | Game Options › 対象プラットフォーム › Graphics | オフにする。Nerulioには動かせるGameMakerがなく、こうしたGameMakerの設定は一切試せない |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| GameMakerのImage EditorのConvert to FramesやImport Strip Image | フレームがすでに同じ基準点を持つ均一なグリッドのとき。フレーム数・大きさ・オフセットはGameMakerで入力します。 |
| .asepriteファイルから始める | タグが帯になり、時間はJSONに残ります：AsepriteをGameMakerへ。 |
| 個別のPNGフレーム | 別のツールやエンジンが1フレーム1ファイルを求めるとき：スプライトシートをPNGフレームへ。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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プリセットで回避できます。
制限
- GameMakerでは未検証：これらのファイルでGameMakerを動かしたことはなく、帯をデコード（Pillow）して元のフレームと比べただけです。
- ヒットボックスと当たり判定のポリゴンはGameMaker向けには書き出しません。
- スプライトごとに速度は1つなので、フレームごとの長さはgamemaker.jsonのデータとしてのみ残ります。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
確認したこと：288 × 480のサムライのシートから作ったGameMaker用の帯をPillowでデコードし、全セルが元のフレームと一致しました。GameMaker自体は動かしていません。検証環境にヘッドレスのGameMakerがないため、Studioはこの書き出し先を未検証と表示します。_stripNの決まり、取り込み方法、原点と速度の設定、補間のオプションはGameMakerのマニュアルに基づきます。
参照した公式ドキュメント
よくある質問
GameMakerで試しましたか？
いいえ。ここではGameMakerをヘッドレスで動かせないため未検証と表示します。ストリップはGameMakerの取り込み方式どおりに切り、元のフレームと比較しました。
GameMakerは再生時間を読みますか？
ストリップに時間は入りません。速度とフレームごとのミリ秒はgamemaker.jsonにあるので、手で入力してください。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。