TexturePackerをUnityへ · スプライトとクリップ
UnityのSprite Editorはグリッドで切れますが、パック済みアトラスはサイズの違うフレームが任意の位置に並ぶため、範囲はデータファイルから取る必要があります。TexturePackerのPNGとJSONをここに入れてUnity 6向けに書き出すと、Unityの座標に変換済みの範囲・ピボットと、それを適用してアニメーションごとにAnimationClipを作るエディタースクリプトが揃います。
TexturePackerのJSONは、スプライトごとにPNGの左上から測った矩形、トリム、任意の0–1のピボットを持ちます。Unityが求めるのは、左下から測ったスプライトの矩形と、矩形ごとの相対的なピボットです。PNGとJSONをNerulioに入れてUnity 6向けに書き出すと、変換済みの矩形とピボットを入れた.unity.jsonと、テクスチャを切り分け(Sprite、Multiple、Point、非圧縮)アニメーションごとにAnimationClipを作るエディタースクリプトNerulioSpriteImporter.csがバンドルに入ります。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枚のテクスチャに複数のスプライトを置くとき、Sprite ModeをMultipleにしてスプライトの矩形の一覧を持ちます。矩形は左下の角からピクセルで測り、スプライトのピボットは自分の矩形の中の0–1の点です。
TexturePackerのy軸は上から下へ進むので、位置y・高さhのフレームは矩形のy = ページの高さ − (y + h)になります。トリムしたフレームの矩形には保存ピクセルしかないため、フレーム全体で決めたピボットをその矩形の中へ移す必要があります。ピボットx = (ピボットpx − トリムx) ÷ w、ピボットy = (h − (ピボットpy − トリムy)) ÷ h。0–1から外れた値で正しく、ピボットが切り取られた余白の側にあることを意味します。
Pixels Per Unitは、スプライトがワールド単位でどれだけの大きさかを決めます。既定は100で、スクリプトはJSONに書かれた値を適用します。Unityのアニメーションは、決まった時刻にSpriteRendererのスプライトを差し替えるAnimationClipで、スクリプトはフレームごとに自分の開始時刻にキーを1つ書きます。
- Sprite Mode Multiple
- 名前付きのスプライト矩形を複数持つ1枚のテクスチャ。
- スプライトの矩形
- テクスチャ上の1スプライトの矩形・ピボット・名前。左下からのピクセル単位。
- Pixels Per Unit
- ワールドの1単位に相当するテクスチャのピクセル数。
- AnimationClip
- 時間とともにSpriteRendererのスプライトを変えるキーフレーム。
例:トリムしたフレーム1つの変換
パック済み38 × 50ページ上のrun_0:x 0、y 34、w 18、h 15
40 × 29のフレームでトリム位置 (10, 10)、ピボットは下中央 = フレーム全体の (20, 29) px
Unityの矩形y = 50 − (34 + 15) = 1 矩形 = (0, 1, 18, 15)
ピボットx = (20 − 10) / 18 = 0.5556
ピボットy = (15 − (29 − 10)) / 15 = −0.2667 矩形の下:足は切り取られた行にある
クリップ "run":スプライトのキー 0.0、0.1、0.2、0.3、0.4、0.5秒、ループあり、1周0.6秒6フレームのピボットはどれも元の40 × 29フレームの同じ点を指すので、矩形ごとにトリムが違ってもキャラクターは揺れません。
TexturePackerのパブリッシュ設定とUnityでの結果
| TexturePackerの設定 | そのときJSONに入るもの | インポートスクリプト実行後のUnity 6 |
|---|---|---|
| データ形式 JSON (Hash) または JSON (Array) | 名前ごとのframes、またはfilenameを持つリスト | スプライト名 = 拡張子なしのフレーム名 |
| Trim mode Trim | spriteSourceSize、sourceSize | 矩形 = 保存ピクセル。その中でピボットを正規化し、全フレームが1つの基準点を共有 |
| Allow rotationオン | rotated: true | Unity向けは回転したパックを拒否:回転なしでパックし直す |
| ピボットポイント | スプライト全体での0–1のpivot | スプライトごとのカスタムピボット。トリムした矩形の中へ変換 |
| 最大サイズ、マルチパック | meta.size。ページごとにJSON+PNGの組 | スクリプトがテクスチャのMax Sizeを、ページが収まる次の2のべき乗まで上げる |
| (設定なし) | 時間の情報なし | Studioで長さを決めるまで、クリップは1フレーム100ms |
できること
- 範囲をUnityの左下原点に変換(y=ページの高さ−y−h)、フレームごとに同じ名前のSpriteRectを1つ。
- ピボットは本来のフレーム上のピボットをトリム後の範囲内で正規化。トリムしたフレームも位置が揃い、0〜1の外の値も意図どおり。
- ドット絵向けのテクスチャ設定:Sprite、Multiple、Pointフィルター、非圧縮、ミップマップなし、ページが収まるまでMax Sizeを引き上げ。
- Pixels Per UnitはJSON内の数値(既定100)で、スクリプトが適用。ゲームが別の値なら読み込み前に書き換えを。
- アニメーションごとにAnimationClipを1つ:各フレームの開始時刻にSpriteRendererのスプライトキー、タグどおりのループ。
使い方
- アトラスのPNGとJSONを一緒にドロップ。
- フレーム名でまとまったアニメーションを確認し、タイムラインでピボットと長さを設定。
- パック&書き出しでUnity 6を選んで書き出し。
- フォルダーをEditorフォルダーごとAssets/にコピーすると、UnityがNerulioSpriteImporter.csをコンパイル。
- Tools › Nerulio › Import Studio JSONを実行して.unity.jsonを選ぶと、テクスチャにスプライトが、JSONの隣に.animクリップができます。
出力されるファイル
| ファイル | 用途 |
|---|---|
run.png | ページのテクスチャ(Nerulioが新たにパック、回転なし)。 |
run.unity.json | Pixels Per Unit、テクスチャ、スプライト(矩形、ピボット、ボーダー)、キーの時刻とループを持つクリップ。 |
Editor/NerulioSpriteImporter.cs | エディタースクリプト:Tools › Nerulio › Import Studio JSONがテクスチャ設定とスプライトの矩形を適用し、.animクリップを書く。 |
README-UNITY.md | このバンドルの手順。 |
Unity 6に取り込む
- フォルダーを
Assets/にコピーし、Editor/を中に残して、UnityがNerulioSpriteImporter.csをエディタースクリプトとしてコンパイルするようにします。 - 2D Spriteパッケージ(com.unity.2d.sprite)が入っていることを確認します。2Dテンプレートには含まれています。
- Tools › Nerulio › Import Studio JSONを実行し、
run.unity.jsonを選びます。テクスチャにスプライトができ、JSONの隣に.animクリップができます。 - キャラクターのSpriteRendererを持つオブジェクトのAnimator Controllerにクリップを追加します。各クリップがスプライトを差し替えます。
- ゲームが別の縮尺を使うなら、インポート前に
.unity.jsonのpixelsPerUnitを変えます。
結果の確認
- Sprite Editorでテクスチャを開きます。run_0 … run_5という6つの矩形があり、ピボットはどれも足の位置です(トリムしたフレームでは矩形の下)。
runクリップを再生します。1周0.6秒で、フレーム間でキャラクターが上下に動かないはずです。- テクスチャのインスペクター:Sprite Mode Multiple、Filter Mode Point、圧縮なし、ミップマップなし。
TexturePacker JSONからUnityのスプライト設定へ
| JSONの項目 | Unityのインポーターが設定する値 | 理由 |
|---|---|---|
| frame {x, y, w, h} | y=ページの高さ−(y+h)のSpriteRect | Unityのテクスチャは左下から始まる |
| spriteSourceSize、sourceSize | トリム後の範囲内で正規化したピボット | 全フレームで同じ基準点を保つ |
| pivot、またはPで置いたピボット | そのピボットでCustom配置 | キャラクターが正しい位置に立つ |
| フレーム名 | スプライト名、接頭辞からアニメーション | クリップが名前でスプライトを探す |
| meta.size | 収まる最小の2のべき乗までMax Sizeを引き上げ | 大きなページが縮小されるのを防ぐ |
| JSONにない | Point、非圧縮、ミップマップなし、PPU 100 | くっきりしたドット、PPUはJSONで変更可 |
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| スプライトが違う場所で切られ、上下にずれる | JSONの矩形を、yを反転せずに手で写した | 矩形のyをページの高さ − (y + h)と比べる | yを変換するインポートスクリプトを使う |
| フレーム間でキャラクターが跳ねる | トリムした矩形のピボットがCenterのまま | Sprite Editorでスプライトごとのピボットを見る | スクリプトで取り込む。ピボットはトリムした矩形ごとに正規化される |
| Tools › Nerulioのメニューがない | スクリプトがEditorフォルダーにない、または別の場所のコンパイルエラーが止めている | Consoleのコンパイルエラー | Editor/NerulioSpriteImporter.csをEditorフォルダーに置き、com.unity.2d.spriteを入れる |
| スプライトがぼやける・圧縮のノイズが出る | 取り込み後にテクスチャ設定が変わった(Bilinear、圧縮) | テクスチャのインスペクター | Pointフィルター、圧縮なし。Unityでドット絵がぼやけるを参照 |
| ヒットボックスがない | Unityのスプライトにはその項目がなく、このインポートでは運ばれない | 書き出しの注意にそう出る | ボックスはGeneric JSONで書き出し、コライダーは自分で作る |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| TexturePacker純正のUnityインポーター | TexturePackerからUnity向けに頻繁にパブリッシュするとき。Unity Asset Storeで配布されており、ここでは計測していません。 |
| Sprite Editorのグリッド分割 | シートが均一なグリッドのとき。パック済みアトラスでは矩形をデータファイルから取る必要があります。Unityでスプライトシートを参照。 |
| 元データから始める | .asepriteファイルがあるなら、AsepriteからUnityへがTexturePackerのJSONにはなかったタグと長さを保ちます。 |
エンジン別の書き出しと検証方法
「検証済み」は、実際の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プリセットで回避できます。
制限
- JSON内の回転したスプライトは回ったまま取り込まれ、Unity向けの書き出しは回転したパックを拒否します。
- TexturePackerのJSONにはフレームの時間がないので、書き出し前に長さを設定してください。
- 衝突ポリゴンとヒットボックスは、Unityの物理形状としては書き出しません。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル(グループの不透明度など)は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px(2億6,800万ピクセル)まで。ブラウザのメモリにも依存します。
バージョンと出典
Unity 6000.5.3f1のバッチモードで、書き出したバンドルにNerulioSpriteImporter.csを実行し、矩形、ピボット(共通の基準点1つ)、ピクセル、クリップのキーと長さを読み戻しました。TexturePackerの取り込みはsrc/studio/sprite/atlas-data.jsで、TexturePacker純正のUnityインポーターは試していません。Unityの用語はUnity 6のマニュアルに従います。
参照した公式ドキュメント
よくある質問
UnityにTexturePackerのインポーターは必要ですか?
不要です。バンドルに専用のエディタースクリプトが入っていて、2Dテンプレートに含まれる2D Spriteパッケージ(com.unity.2d.sprite)だけで動きます。Unity 6000.5.3f1のバッチモードで実行し、範囲・ピボット・ピクセル・クリップのキーと長さを読み戻して確認しました。
当たり判定もUnityに入りますか?
このインポーターでは入りません。Unityのスプライトにはその項目がないため、ボックスとコリジョンポリゴンは汎用JSONの書き出しに入り、Unity向けの書き出しでその旨を表示します。
JSONに回転したフレームがあります。
回った状態のまま読み込み、そのフレームの書き出しは未検証です。Unity向けの書き出し自体も回転パックを拒否します。TexturePackerで回転を切ってパックし直した2つのファイルを入れてください。
無料ですか?アカウントは必要ですか?
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか?
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ(IndexedDB)に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか?
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています(Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト)。