本文へスキップ

AsepriteをUnity 6へ · スプライトとアニメーションクリップ

.asepriteをドロップしてUnityバンドルで書き出し。アトラス、JSON、スプライトを切り(Point・無圧縮)タグごとにフレーム時間入りのAnimationClipを作る小さなエディタースクリプトが入っています。

Unityは.asepriteファイルをそのまま再生できず、テクスチャ上のスプライトとアニメーションごとのAnimationClipが必要です。ファイルをNerulioに入れてタグを確認し、Unity 6向けに書き出すと、パック済みPNG、JSON、エディタースクリプトが得られます。Tools › Nerulio › Import Studio JSONを実行すると、スクリプトがテクスチャを切り(Point・無圧縮・ピボットスライスのピボット)、タグごとにフレームごとの長さそのままの.animを書きます。逆再生・ピンポンのタグはフレーム単位で展開します。Unity 6000.5.3f1で確認済みで、Unity自体の2D Aseprite Importerパッケージが代替手段です。

スプライトシート、連番フレーム、GIF・APNG、.asepriteファイルをドロップ
空のStudioを開く
ブラウザ内で処理し、ファイルはアップロードされません。
Studio のスプライト作業画面:ピボット・ヒットボックス・ハートボックス付きのフレームと、アニメーションタグ付きタイムライン
CC0アセット(OpenGameArt)を開いた実際のStudio画面です。
書き出し先
  • Unity 6検証済み· Unity 6000.5.3f1
  • .aseprite検証済み· Aseprite 1.3.18
  • Godot 4検証済み· Godot 4.7.2
  • Phaser 3 / 4検証済み· Phaser 3.90 + 4.2
  • PixiJS 8検証済み· PixiJS 8.21
  • Aseprite JSON検証済み· Phaser load.aseprite · PixiJS 8.21
  • 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

AsepriteのタグからUnityのクリップへ

.asepriteファイルには、フレームごとのミリ秒の長さ、方向(順・逆・ピンポン)と繰り返し回数を持つタグ、レイヤー、ピボットを持てるスライスが入っています。Unityでこれに当たるのは、Sprite Mode Multipleのテクスチャ、正規化したピボットを持つフレームごとのスプライト、そして決まった時刻にSpriteRendererのスプライトを切り替えるキーを持つAnimationClipです。

Nerulioはフレームごとに表示中のレイヤーを合成してパックし、範囲をUnityの左下基準の座標で書きます。タグ1つがクリップ1つになり、キーはフレームの長さの累計の位置に置かれ、最後のフレームも自分の長さを保つよう締めのキーが付きます。無限に繰り返すタグはLoop Timeオン、回数のあるタグはLoop Timeオフです。クリップには繰り返し回数がないためです。

Unity自体の2D Aseprite Importer(4.xはUnity 6.4以降が必要)はファイルを直接取り込み、保存のたびに再インポートします。ドキュメントによればフレームごとの時間に対応し、∞をループするクリップにしますが、方向はForwardのみ対応で、スライスは取り込みません。

タグ
Asepriteで方向と繰り返し回数を持つ、名前付きのフレーム範囲。
ピボットスライス
ピボット点を持つAsepriteのスライス。Nerulioはこれをフレームのピボットに使います。
Loop Time
クリップを繰り返させるAnimationClipの設定。
締めのキー
最後のスプライトをもう一度置き、その長さを保つための最後のキー。

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

Aseprite                                 Unity 6 AnimationClip(キーの時刻、秒)
idle    4フレーム × 125 ms、∞            idle.anim    0, 0.125, 0.25, 0.375 | 終了 0.5    loop on
attack  100, 100, 150, 250 ms、×1         attack.anim  0, 0.1, 0.2, 0.35 | 終了 0.6        loop off
jump    3フレーム × 80 ms、ピンポン       jump.anim    フレーム0-1-2-1:0, 0.08, 0.16, 0.24 | 終了 0.32

32 × 32のキャンバスの(16, 31)にピボットスライス、トリムなしのフレーム
  Unityのピボット = (16 / 32, (32 − 31) / 32) = (0.5, 0.03125)   (yは上向き)

ピンポンのタグは0-1-2-1の順に展開して書くので、Unityで方向の設定に頼らなくても同じように再生されます。

変換後に残るもの

AsepriteNerulioUnity 6
フレームのピクセル(表示中のレイヤー)合成したフレームをPNGにパックそのテクスチャのスプライト範囲1つ
フレームの長さ(ms)フレームごとに保持キーの時刻:各フレームは前のフレームの長さの合計から始まる
タグ同じ名前のアニメーション1つ同じ名前の.animクリップ1つ
方向:逆方向・ピンポン再生順を展開して記録その順に並んだキー
繰り返し ∞ループLoop Timeオン
繰り返し 1、2、3…プレビューではその回数再生Loop Timeオフ:1回再生
ピボットスライス(またはPで打ったピボット)フレームのピボット(既定は下中央)スプライトのピボット、Customの配置、yは上向き
hit / hurtのスライスフレームごとのボックスUnity向けには書かない(汎用JSONにある)
レイヤー合成フレームごとにスプライト1つ、レイヤー別のスプライトはなし

できること

  • タグはフレームごとの長さを持つAnimationClipに。ピボットはAsepriteのスライスかStudioのピボットツールから。
  • Sprite Mode Multiple、Pointフィルター、圧縮なし — ドット絵に必要な設定です。
  • 範囲・ピボット・ピクセル・クリップのキーと長さをUnity 6000.5.3f1のバッチモードで確認。
  • Unityパッケージやインポーターは不要です。

使い方

  1. .asepriteをドロップしてタグを確認。
  2. パック&書き出しでUnity 6を選ぶ。
  3. バンドルをAssets/にコピー(Editorフォルダーごと)。
  4. Nerulioのメニューから取り込みを実行し、スプライトとクリップを作成。

出力されるファイル

ファイル用途
hero.pngパックしたフレーム(トリム、2px間隔、回転なし)。
hero.unity.jsonUnity座標のスプライト範囲、正規化したピボット、タグごとにフレームごとのミリ秒とループの有無を持つクリップ情報。
Editor/NerulioSpriteImporter.csエディタースクリプト:テクスチャの設定、スプライト範囲、.animクリップ。
README-UNITY.mdこのバンドルの取り込み手順。

Unity 6に取り込む

  1. バンドルのフォルダーをEditorサブフォルダーごとAssets/にコピーし、PNGはJSONの隣に置きます。Unityがスクリプトをコンパイルします。2D Spriteパッケージが必要です(どの2Dテンプレートにも入っています)。
  2. Tools › Nerulio › Import Studio JSONを実行し、hero.unity.jsonを選びます。
  3. テクスチャがSprite (2D and UI)、Multiple、Point (no filter)、Compression None、PPU 100になっているか確認します。Sprite Editorにはフレームごとにピボット付きの範囲が見えます。
  4. JSONの隣のidle.anim・attack.anim・jump.animをAnimationウィンドウで開いてキーを確認します。
  5. SpriteRendererを持つゲームオブジェクトのAnimator Controllerにクリップを入れます。attackのような1回きりのタグには、終わったらidleに戻る遷移を加えます。
  6. UnityのAseprite Importerパッケージが入っているなら、.asepriteファイル自体はAssets/に置かないでください。Unityが独自の方法でもう一度取り込みます。

結果の確認

  • attack.animのキーが0・0.1・0.2・0.35秒にあり、Asepriteのタグ全体の長さである0.6秒で終わるはずです。
  • idleはLoop Timeオン、attackはオフのはずです。
  • jumpをAsepriteのプレビューと並べて再生します。0-1-2-1の順序と80ms刻みが一致するはずです。
  • クリップを切り替えても足がピボットの位置にとどまるはずです。

トラブルシューティング

症状考えられる原因確認方法対処
クリップがループせず1回だけ再生されるAsepriteでタグに繰り返し回数(∞以外)が設定されているクリップのインスペクターのLoop Timeタグを∞にして書き出し直すか、UnityでLoop Timeにチェック
コンソールに「clip … names a missing sprite」取り込む前にPNGの名前を変えたか、JSONから離したPNGが書き出したときの名前のままJSONの隣にあるかファイルを一緒に置いて取り込み直す
スプライトがぼやける取り込み後にFilter Modeや圧縮の設定を変えたテクスチャのインスペクターPoint (no filter)とCompression None。Unityのドット絵のぼやけを参照
フレームごとにキャラクターが跳ねるピボットスライスがなく既定の下中央を使っている、またはフレームごとにピボットが違うSprite Editorでフレームごとのピボットの印を比べるAsepriteにピボットスライスを1つ置くか、NerulioでPを使ってピボットを指定。ピボットエディターを参照
スプライトが2組できるAssets/に置いた.asepriteをUnityのAseprite Importerも取り込んだプロジェクトウィンドウで.asepriteアセットが展開されている方法を1つに絞る:Assets/から.asepriteを外すか、このバンドルを使わない
ピンポンのタグが順方向にしか再生されないUnity自体のインポーター(順方向のみ対応)の結果で、このバンドルではないAnimatorがどのアセットのクリップを使っているか順序を展開したこのバンドルの.animを使う

ほかの方法

方法こんなときに向いています
Unityの2D Aseprite Importerパッケージ一日中Asepriteで描き、保存のたびにUnityに再インポートさせ、レイヤーごとに取り込みたいとき。タグは順方向のみ、スライスは非対応という点を受け入れる必要があります。
AsepriteからPNGシートを書き出してSprite Editorで切るアニメーションが1〜2個でフレームレートが一定のとき。Unityでスプライトシートを切るを参照。
同じファイルを別のエンジンでAsepriteをGodotへ、AsepriteをPhaserへ。

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

「検証済み」は、実際の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は完全一致。

検証の根拠

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つのスプライトへ統合されます。
  • 2回以上の繰り返し回数は保たれず、クリップは1回再生になります。
  • ヒット・ハートボックスはUnity向けには書き出しません。
  • グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
  • レイヤーが正確に合成できない.asepriteファイル(グループの不透明度など)は統合して読み込み、理由を読み込みパネルに表示します。
  • 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
  • 画像は一辺32,768px(2億6,800万ピクセル)まで。ブラウザのメモリにも依存します。

バージョンと出典

NerulioのUnityバンドルはUnity 6000.5.3f1のバッチモードで確認しました(スプライト範囲、ピボット、ピクセル、Point・無圧縮・Multiple、クリップのキーと時間)。実行時にAnimatorでクリップが再生されるかは確認していません。.asepriteの読み込みは、実在の231ファイルがAseprite 1.3.18で同じタグ・長さ・ピクセルのまま開き直せることで確認しました。Unity自体のAseprite Importerについての記述は、そのバージョン4.0のドキュメントに基づきます。

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

よくある質問

Unity純正のAsepriteインポーターとの違いは?

そちらを使っても構いません。この方法は同じタイミングでパック済みアトラスとクリップを作り、インポーターパッケージがない環境でも動きます。

フレームごとのピボットは保たれますか?

はい。各スプライト範囲にそのフレームのピボットが入ります(共通の基準点なら共通)。

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

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

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

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

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

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