本文へスキップ

AsepriteをGameMakerへ · タグごとにストリップ

AsepriteのアニメーションをGameMakerへ持っていくには、タグ1つを1スプライトにする必要があり、ファイル名末尾の_stripNが何コマに分けるかを伝えます。ファイルをドロップしてGameMaker向けに書き出すと、タグ別の横長の帯画像と、原点・再生速度・ミリ秒を記したgamemaker.jsonができます。ただしGameMaker上では未検証です。動かせるGameMakerがなく、帯画像をデコードして元のフレームと照合するところまでしか確かめていません。

GameMakerは.asepriteファイルを開けず、画像を取り込みます。名前が…_stripNのPNGはNフレームのスプライトになります。ファイルをNerulioに入れてタグを確認し、GameMaker向けに書き出すと、タグごとに帯画像1枚(spr_hero_attack_strip4.png)ができます。逆再生・ピンポンは展開し、全フレームをピボットにそろえて原点1つで足りるようにし、原点・速度・フレームごとのミリ秒をgamemaker.jsonに書きます。GameMakerのスプライトは速度が1つなので、不ぞろいな時間はデータとしてだけ残ります。GameMaker上では未検証です。帯をデコードして元と比べただけで、GameMakerで読み込んだことはありません。

パックするフレーム画像、GIF、.asepriteファイルをドロップ
空のStudioを開く
ブラウザ内で処理し、ファイルはアップロードされません。
Studio のパック&書き出し:1ページにパックしたCC0の忍者のフレームと、それぞれ書き出しボタンがある18形式の一覧
CC0アセット(OpenGameArt)を開いた実際のStudio画面です。
書き出し先
  • 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

時間を持つタグから、速度が1つのスプライトへ

Asepriteはキャラクター全体を1ファイルに持ちます。長さがばらばらのフレーム、方向と繰り返し回数を持つ動作ごとのタグ、レイヤー、ピボットを持てるスライスです。GameMakerは動作ごとに別のスプライトアセットにフレーム、原点1つ、再生速度1つを持ち、マニュアルの帯の決まりによってPNG 1枚にそのスプライトの全フレームを入れられます。

Nerulioはフレームごとに表示中のレイヤーを合成し、タグを再生順にたどります。逆再生のタグは逆順に書き、3フレームのピンポンのタグは0-1-2-1になるので、Nは1周のステップ数です。1つのタグの全フレームは、ピボットが同じピクセルに来るよう共通のセル1つに描かれ、そのピクセルが原点です。ファイル名は小文字になり、英字・数字・アンダースコア以外は_になります。

2つの形式がいちばん違うのは時間です。タグの全フレームが同じ長さなら、速度はちょうど毎秒 1000 ÷ ms フレームです。違えば帯にはタグの速度(Studioのタグは10 FPS)を書いて警告し、実際のミリ秒はdurationsMsに残ります。繰り返し回数はJSONのloopになり、帯そのものには時間もループの設定もありません。

タグ
Asepriteで方向と繰り返し回数を持つ、名前付きのフレーム範囲。
帯(Strip)
スプライトの全フレームを並べた横長のPNG 1枚。名前は…_stripN。
共通のセル
1本の帯の全フレームが共有するセル。全ピボットが1点に来るように大きさを決める。
durationsMs
フレームごとの正確なミリ秒。gamemaker.jsonに残る。

例:32 × 32のキャラクターのタグ3つ

idle    4 × 125 ms、∞          → spr_hero_idle_strip4.png     速度 1000 / 125 = 8、loop true
jump    3 × 80 ms、ピンポン     → 順序0-1-2-1 → spr_hero_jump_strip4.png   速度 12.5
attack  100, 100, 150, 250 ms   → spr_hero_attack_strip4.png   速度 10 +警告、loop false

attackの32 × 32フレームのピボット:x = 16, 16, 20, 12(突き)、y = 31
  セルの幅   = 左の最大 20 + 右の最大 (32 − 12) 20 = 40
  セルの高さ = 31 + (32 − 31) = 32        原点 x 20、y 31
  帯 = 4 × 40 = 160 × 32 px

絵の中でピボットが動くため、attackのセルは32pxのフレームより広くなります。全ピボットをx 20に置くからこそ、腕が突き出る間も体がその場にとどまります。

変換後に残るもの

AsepriteNerulioのGameMaker用ファイルGameMaker
タグタグごとに帯1本(例:spr_hero_attack_strip4.png)取り込み時にNフレームに切られるスプライト1つ
方向:逆方向・ピンポンフレーム順を展開。N = 1周のステップ数その順のNフレーム
フレームの長さがすべて同じplaybackSpeed = 1000 ÷ msFrames per second単位の速度
フレームの長さが混在タグの速度+警告、実際のmsはdurationsMs速度は1つ。フレームごとの時間はコードでのみ
ピボットスライスかPのピボット全フレームを共通のセルに配置、xorigin・yorigin任意指定の原点
繰り返し ∞ / 回数JSONのloop: true / loop: false取り込みでは設定されない。1回再生のスプライトはコードで止める
表示中のレイヤー合成、非表示のレイヤーは除外統合されたフレーム
hit / hurtのスライス書かない(汎用JSONの書き出しを使う)コリジョンマスクはGameMakerで設定

できること

  • タグ1つに帯画像1枚、名前はspr_<ファイル>_<タグ>_stripN.png。Nは逆再生・ピンポンを展開した再生順のコマ数。
  • コマの大きさがすべて同じで基準点も各コマの同じ位置なので、GameMakerの原点1つで全フレームが定位置に。
  • スプライト単位のgamemaker.json:xorigin・yorigin、毎秒のコマ数で書いたplaybackSpeed、loop、各コマのdurationsMs。
  • 見えているレイヤーだけを重ねて描き、非表示のレイヤーは入れません。
  • READMEにGameMaker側の手順を記載:Create Sprite › Import(またはPNGをAsset Browserへドラッグ)のあとOriginとSpeedを入力。

使い方

  1. .asepriteをドロップして、タイムラインでタグを見ておく。
  2. Pツールで基準点を打つか、ファイルにあったpivotスライスを使う。GameMakerの原点はこの点。
  3. パック&書き出しで書き出し先をGameMakerにして書き出し。
  4. GameMakerに帯画像を1枚ずつ取り込み、gamemaker.jsonかREADMEにある原点と速度を入れる。
  5. ドット絵なら対象プラットフォームのGame OptionsのGraphicsでInterpolate colours between pixelsを切っておく。

出力されるファイル

ファイル用途
spr_hero_attack_strip4.pngタグごとの帯1本。セルの大きさがそろい、ピボットが1点にある。
gamemaker.jsonスプライトごとにファイル、フレーム数、セルの大きさ、原点、毎秒フレーム単位の速度、ループ、durationsMs、uniformTiming、verified: false。
README-GAMEMAKER.md取り込み手順と、帯ごとの原点・速度。

帯をGameMakerに取り込む(マニュアルに基づく。ここでは未実行)

  1. バンドルを展開します。タグごとにPNGが1枚あります。それぞれを名前を変えずに、Sprite EditorのImportボタンかIDEへのドラッグで別々のスプライトに取り込みます。
  2. コードから呼べるよう、スプライトアセットの名前を接尾辞を除いたファイル名(spr_hero_attack)にします。
  3. 原点をREADMEのx・yで直接指定します。上のattackならx 20、y 31です。
  4. 速度の方式をFrames per secondにし、READMEの値を入れます。idleは8、jumpは12.5、attackは10です。
  5. 1回だけ再生するタグ(loop: false)は、最後のフレームのあとにコードでidleのスプライトに戻します。
  6. ドット絵なら、対象プラットフォームのGame Options › GraphicsでInterpolate colours between pixelsを切ります。

結果の確認

  • spr_hero_jumpは0-1-2-1の順の4フレーム、spr_hero_attackは40 × 32のフレーム4枚のはずです。
  • attackの全フレームで原点の十字が足元にとどまるはずです。
  • idleの1周は4 × 125 = 500msで、Asepriteのプレビューと同じはずです。

.asepriteからGameMakerのファイルへ

.asepriteの情報GameMaker向け書き出し
8コマのタグ「run」spr_hero_run_strip8.png
全コマ同じ長さ(例:100ms)playbackSpeed=毎秒10コマ
長さが混ざったコマplaybackSpeedはタグのfps、実際のmsはdurationsMs、警告あり
pivotスライスかPで打った基準点xorigin / yorigin、全コマで同じ位置
繰り返し0(ずっとループ)loop: true
逆再生・ピンポン帯画像のコマ順として展開して記録
hit・hurtのスライスこのファイルには入らない(汎用JSONにある)
検証GameMaker上では未検証、デコードして元のフレームと照合

トラブルシューティング

症状考えられる原因確認方法対処
攻撃がAsepriteより速く再生される長さが混在しているのにスプライトの速度は1つ(10)なので、150・250msのフレームも100msになるuniformTiming: falseと書き出しの警告コードでdurationsMsに従ってフレームの時間を合わせるか、Asepriteでタグの長さをそろえる
ピンポンのスプライトのフレームがタグより多い往復の順序を帯に展開して書いたため(3フレーム → 4)フレーム順0-1-2-1正常です。順方向に再生し、さらに反転させないでください
idleとattackで原点が違う帯ごとにセルが別なので、絵の上では同じ基準点でも数値が違うREADMEの帯ごとの値を比べるスプライトごとにそれぞれの原点を入れる。1つの原点を全部にコピーしない
レイヤーが欠ける、非表示のはずのレイヤーが見えるファイルで表示中のレイヤーだけを合成するAsepriteのレイヤーの表示状態Aseprite(またはNerulioのタイムライン)でレイヤーの表示を切り替えて書き出し直す
ファイル名がタグ名と違う名前は小文字にし、空白や記号は_にする("Attack 2" → attack_2)READMEに全ファイルが載っている書かれたファイル名を使うか、Asepriteでタグ名を変える
GameMakerの中で何かがおかしいこの書き出しはGameMakerで読み込んだことがない—NerulioはGameMakerの動作を確認できません。マニュアルと照らし合わせ、直せるよう事例を知らせてください

ほかの方法

方法こんなときに向いています
AsepriteのFile › Export Sprite Sheetでタグごとに横長の帯を書き出し、_stripNに改名すでにAsepriteがあり、タグのピボットが1つで時間が均一なとき。原点と速度は手で入れます。
手元にあるスプライトシートスプライトシートからGameMakerの帯を作る。
フレームごとの時間を持てる別のエンジンAsepriteをGodotへはフレームごとの長さを保ちます。

エンジン別の書き出しと検証方法

「検証済み」は、実際の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 / 4atlas JSON (multiatlas) · .anims.json検証済み Phaser 3.90 + 4.2両バージョンでフレームとアニメーションを描画。
PixiJS 8spritesheet JSON · animations · anchor · meta.scale検証済み PixiJS 8.21回転・複数ページのアトラスも確認。
Aseprite JSONhash / array · frameTags · slices検証済み Phaser load.aseprite · PixiJS 8.21タグの方向と繰り返し回数を保持。
.asepritelayers · tags · durations · slices検証済み Aseprite 1.3.18Asepriteのコマンドラインで開いて描画。
Spine / libGDX.atlas検証済み spine-canvas 4.2Spineランタイムで回転・トリム領域をすべて描画。libGDX本体は未実行。
Starling / Sparrow XMLXML per page検証済み Phaser 4.2Phaser 3.90はトリムされたXMLフレームを誤って描画します(Phaser側の不具合)。「Sparrow XML (Phaser 3)」プリセットはトリムを切り、3.90・4.2とも合格。
LÖVELua quads · nerulio_atlas.lua · main.lua検証済み LÖVE 11.5同梱ヘルパーで全フレームを描画し、全アニメーションを再生。
Defold.atlas · .tilesourceビルド確認 Defold bob.jar 1.13.1Defoldのコマンドラインビルダーでビルドし、生成テクスチャのUVを読み戻して確認。
GameMakerspr_<name>_stripN.png · gamemaker.json未検証GameMakerでは読み込んでいません(ヘッドレス実行不可)。ストリップはGameMakerの取り込み方式どおりに切ります。
CSS sprites.css · preview .html検証済み Chromium同梱スタイルシートで全クラスを描画。
GIF / APNGone 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つ。全フレームがピクセル単位で復元できます。

制限

  • GameMakerでは未検証:帯をデコードして元のフレームと比べただけです。
  • スプライトごとに速度は1つなので、不ぞろいな時間はgamemaker.jsonにだけ残ります。
  • GameMaker用のファイルにはヒットボックスも当たり判定の形もありません。
  • ポリゴン(メッシュ)パッキングはありません。検証したエンジンのどれも、書き出しデータからメッシュアトラスを描画しないためです。
  • GameMakerのストリップはGameMaker本体では未検証です。
  • 拡大縮小バリエーション(@0.5x〜@4x)はニアレストネイバーのみです。
  • トリムしたStarling XMLはPhaser 3.90で正しく描画されないため、「Sparrow XML (Phaser 3)」プリセットを使ってください。

バージョンと出典

確認したこと:GameMaker用の帯がPillowでデコードでき、全セルが元のフレームと一致すること。.asepriteの読み込みは、実在の231ファイルがAseprite 1.3.18で同じタグ・長さ・ピクセルのまま開き直せることで確認しました。確認していないこと:GameMakerで何かを読み込むこと。検証環境にヘッドレスのGameMakerはありません。帯の命名、取り込み方法、原点、速度の方式、補間のオプションはGameMakerのマニュアルに基づきます。

参照した公式ドキュメント

よくある質問

GameMakerで実際に開いて確かめましたか?

私たちの確認には含まれていません。動かせるヘッドレスのGameMakerがないので、この書き出し先には未検証の表示を付けています。確かめたのは、帯画像がPillowでデコードでき、各コマが元のフレームと同じであることまでで、ファイル名はGameMakerマニュアルのsprite stripの決まりに合わせています。

1つのタグの中でコマの長さが違うときは?

GameMakerのスプライトは再生速度を1つしか持てません。長さが混ざっていればタグのfpsを使って警告を出し、コードでコマごとに合わせられるよう、実際のミリ秒はdurationsMsにそのまま残します。

攻撃判定のボックスも移りますか?

GameMaker用のファイルに入るのは絵・原点・時間だけです。ボックスやコリジョンポリゴンが必要なら汎用JSONで書き出してください。

無料ですか?アカウントは必要ですか?

このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。

スプライトはアップロードされますか?

いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ(IndexedDB)に自動保存され、.nerulioファイルとして保存できます。

Asepriteやエンジンのプラグインは必要ですか?

いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています(Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト)。