Unity スプライトシート分割 · Unity 6のスプライトとクリップ
Sprite Editorでグリッドを推測する代わりに測定し、タイムラインでアニメーション名を付け、エディタースクリプトがピボット付きスプライトとアニメーションごとのAnimationClipを作るバンドルで書き出します。
Unity 6でスプライトシートを使うには、PNGのTexture TypeをSprite (2D and UI)、Sprite ModeをMultipleにし、Sprite EditorでSlice › Grid By Cell Sizeを選びます。Pixel Sizeがフレームサイズ、Offsetが余白、Paddingが間隔です。ドット絵ならFilter ModeをPoint (no filter)、CompressionをNoneにし、全スプライトのPixels Per Unitをそろえてから、スプライトでAnimationClipを作ります。Nerulioは測定とクリップ作りを肩代わりします。PNG、JSON、スプライトの範囲をピボット付きで書きアニメーションごとにクリップを作るエディタースクリプトを書き出します。Unity 6000.5.3f1で確認済みです。
- Unity 6検証済み· Unity 6000.5.3f1
- 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
- .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
Unityが1枚のテクスチャを複数のスプライトに分ける仕組み
Unityはスプライトシートを、複数のSpriteサブアセットを持つ1つのテクスチャアセットとして扱います。Sprite Mode Multipleは画像に複数の要素があるという意味で、Sprite Editorがスプライトごとに矩形1つとピボット1つを保存します。SliceメニューにはAutomatic（透明で分かれた塊）、Grid By Cell Size、Grid By Cell Count、Isometric Gridがあります。グリッドではPixel Sizeがセル、Offsetが左上からのグリッドのずらし、Paddingがスプライト間の間隔で、Keep Empty Rectsは空のセルもスプライトにするかを決めます。
Pixels Per Unitは、テクスチャの何ピクセルをワールドの1ユニットにするかを決めます。64pxのフレームは既定値100では0.64ユニット、64ならちょうど1ユニットです。2D Pixel Perfectのドキュメントは、全スプライトで同じPPU、Filter Mode Point、Compression Noneを求めています。Bilinearフィルターと圧縮が、ドット絵をぼかしたりにじませたりする原因です。
Unityのアニメーションは、決まった時刻にSpriteRendererのスプライトを切り替えるキーを持つAnimationClipで、AnimatorがAnimator Controllerを通して再生します。Animationウィンドウでクリップを作ると、コントローラーとAnimatorコンポーネントも自動で作られます。シートから手作業で作ったクリップは、ふつう全スプライトに同じフレームレートを使います。
Nerulioはグリッドを測り（信頼度を見て変更可能）、行アニメーションの名前、フレームごとの時間、ピボットを決めさせてから3つのファイルを書き出します。エディタースクリプトはテクスチャをSprite / Multiple / Point / 無圧縮 / ミップマップなし / PPU 100に設定し、フレームごとにピボット付きのスプライト範囲を書き、各フレーム自身の開始時刻にキーを持つ.animをアニメーションごとに作ります。
- Sprite Mode Multiple
- テクスチャに複数のスプライトがあり、範囲はSprite Editorで決める。
- Pixels Per Unit（PPU）
- ワールド1ユニットあたりのテクスチャのピクセル数。ゲーム内の全スプライトでそろえる。
- Grid By Cell Size
- Pixel Size（セル）、Offset（余白）、Padding（間隔）を受け取るスライス方式。
- ピボット
- スプライトの原点。範囲内で0〜1に正規化し、yは上向き。
- AnimationClip
- 時間とともにSpriteRenderer.spriteを変えるキーの集まり。Animatorが再生する。
例：384 × 128のシート、アニメーション2つ
シート384 × 128 px：64 × 64のセルが2行 × 6列、余白・間隔なし
Grid By Cell Size：Pixel Size 64 × 64、Offset 0 × 0、Padding 0 × 0 → スプライト12個
ワールドでの大きさ：64 px / PPU 100 = 0.64ユニット 64 px / PPU 64 = 1ユニット
Nerulioの書き出し（行名idle・run、フレーム125 ms、ピボット下中央）：
Unityの範囲のy（原点は左下）= ページの高さ −（y + h）
下中央のピボット → 各範囲内で(0.5, 0)
run.animのキー：0, 0.125, 0.25, 0.375, 0.5, 0.625秒 + 締めのキー0.75秒
loop on（繰り返し∞） クリップのフレームレート10締めのキーは最後のスプライトをもう一度置き、クリップが先頭に戻る前に最後のフレームも125msきちんと表示されるようにします。
できること
- 絵からセル・余白・間隔を測定し、空のセルは除外。
- クリックや入力で決めたフレームごとのピボットが各スプライト範囲に入ります。
- スクリプトがSprite Mode Multiple、Pointフィルター、Compression Noneを設定。
- タグごとにフレームの長さ入りのAnimationClip。Unity 6000.5.3f1のバッチモードで確認。
使い方
- シートを入れて「適用」を押す。
- アニメーション名・時間・ピボットを設定。
- パック＆書き出しでUnity 6を選ぶ。
- バンドルをEditorフォルダーごとAssets/にコピー。
出力されるファイル
パック＆書き出し › Unity 6が書き出すファイル（ファイル名に由来し、ここではhero）です。
| ファイル | 用途 |
|---|---|
hero.png | パックしたフレーム（トリム、2px間隔、回転なし）。数が多ければページが増えます。 |
hero.unity.json | Unityの左下基準の座標に直したスプライト範囲、正規化したピボット、フレームごとのミリ秒入りのクリップ情報。 |
Editor/NerulioSpriteImporter.cs | Tools › Nerulio › Import Studio JSONメニューのエディタースクリプト：インポート設定、スプライト範囲、AnimationClip。 |
README-UNITY.md | このバンドル用の下記の手順。 |
Unity 6に取り込む
- 展開したフォルダーを
Assets/以下（例：Assets/Characters/Hero/）にコピーし、PNGはJSONの隣に置きます。NerulioSpriteImporter.csの入ったEditorフォルダーはUnityがコンパイルし、どの2Dテンプレートにも入っている2D Spriteパッケージ（com.unity.2d.sprite）が必要です。 - Tools › Nerulio › Import Studio JSONを選び、プロジェクト内の
hero.unity.jsonを指定します。 - スクリプトがテクスチャをSprite (2D and UI)、Multiple、Point (no filter)、無圧縮、ミップマップなし、PPU 100にし、フレームごとにピボット付きのスプライトを書きます。Sprite Editorを開くと範囲が見えます。
- JSONの隣にアニメーションごとのクリップ（
idle.anim、run.anim）も書きます。各フレームの時刻にSpriteRendererのスプライトをキーにし、Loop Timeはタグのとおりです。 - クリップをAnimator Controllerに入れ、SpriteRendererを持つゲームオブジェクトのAnimatorにそのコントローラーを割り当てます。
- ゲームが別のPPU（16pxタイルなら16など）を使うなら、取り込み後にテクスチャのPixels Per Unitを全スプライトで同じ値に変えます。
Nerulioを使わない場合：PNGを選び、Texture TypeをSprite (2D and UI)、Sprite ModeをMultiple、Filter ModeをPoint (no filter)、CompressionをNoneにして適用します。Sprite EditorでSlice › Grid By Cell Sizeを選び、Pixel Size・Offset・Padding・Pivotを入れてSliceとApplyを押します。続いてWindow › Animation › Animationを開き、ゲームオブジェクトのクリップを作って一定間隔でスプライトのキーを打ちます。
結果の確認
- Sprite Editorで、埋まったセルごとに範囲が1つあり、ピボットの印が足元にあるはずです。
- テクスチャのインスペクターがFilter Mode Point (no filter)、Compression Noneになっているはずです。
- Animationウィンドウで
run.animのキー6つが0.125秒間隔で並び、0.75秒で終わるはずです。 - Gameビューを整数倍で見ると、ピクセルの境界がくっきりし、フレームが変わっても足が動かないはずです。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| スプライトがぼやける・にじむ | Bilinearフィルターかテクスチャ圧縮 | テクスチャのインスペクターのFilter ModeとCompression | Point (no filter)とNoneに。Unityのドット絵のぼやけを参照 |
| スライスがずれる、スプライトを半分に切る | Pixel Sizeに間隔が含まれている、またはOffset・Paddingが違う | 最後の列で赤いスライスの枠と絵を比べる | 測ったセル・余白・間隔を入れる。フレームサイズを参照 |
| Tools › Nerulioがない、スクリプトがコンパイルされない | スクリプトがEditorという名前のフォルダーにない、または2D Spriteパッケージがない（3Dテンプレート） | コンソールのUnityEditor.U2D.Sprites関連のエラー | Editor/NerulioSpriteImporter.csの場所を保ち、パッケージマネージャーで2D Spriteを入れる |
| 「is not inside this project's Assets folder」と出る | ファイルダイアログで選んだJSONがAssets/の外にある | エラーに出ているパス | バンドルをAssets/にコピーし、そのコピーを選ぶ |
| タイルと並べるとスプライトの大きさが合わない | 書き出しはPPU 100で、タイルは別の値 | 2つのテクスチャのPixels Per Unitを比べる | 全スプライトのテクスチャでPPUをそろえる |
| 自分で変えたインポート設定が消えた | Import Studio JSONを再実行すると、Point・無圧縮・PPU 100を再適用し、同名のクリップを作り直す | 編集後にメニューを再実行したか確認 | 取り込みのたびに設定をかけ直すか、手で直したクリップは名前を変える |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| Unity自体のSprite Editorでのスライス（上の手作業の方法） | 均一なシートで、フレームレートが1つのクリップが少しなら、プロジェクトに何も足さずに済みます。 |
| Slice › Automatic | 透明で分かれたスプライトで、セルの大きさをそろえる必要がないとき。範囲ごとに大きさが変わるのでピボットを確認してください。 |
| 元の.asepriteファイルから | タグとフレームごとの時間も移せます：AsepriteをUnityへ。 |
| TexturePackerのアトラス | データ付きですでにパック済みのフレーム：TexturePackerをUnityへ。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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プリセットで回避できます。
制限
- 書き出しは常にPPU 100です。ゲームが別の値を使うならUnityで変えてください。
- 検証では範囲・ピボット・ピクセル・クリップのキーを確かめましたが、実行時にAnimatorでクリップが再生されるかは確かめていません。
- ヒットボックスと当たり判定のポリゴンはUnity向けには書かず、汎用JSONにだけ残ります。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
NerulioのUnityバンドルをUnity 6000.5.3f1のバッチモードで実行しました。同梱のインポートスクリプトのApplyとCreateClipsを呼び出し（メニューがファイルダイアログを開くためリフレクションで呼び出し）、Pointフィルター、無圧縮、Multipleモード、288 × 480のサムライのシートのスプライト範囲60個中60個、同一の絵、1つの共通ピボット基準、クリップのキーと時間を読み戻して確認しました。上に書いたUnityの手順と設定は、Unity 6のマニュアルと2D Pixel Perfectパッケージのドキュメントに基づきます。
参照した公式ドキュメント
よくある質問
対応するUnityのバージョンは？
バンドルはUnity 6000.5.3f1で確認しました。古いバージョンは試していません。
元のシートの配置を保てますか？
トリムと回転を切ると、パックしたページでフレームがそのまま保たれ、スプライト範囲はパック後の配置に従います。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。