トリム後にスプライトがガタつく · オフセット保持

パック前は静止していたキャラがパック後に揺れるなら、トリムのオフセットが失われています。各フレームを見えるピクセルだけに切り詰めたのに、エンジンが切り抜きごとに別々に位置やピボットを決めているのです。元のフレームサイズとオフセットを保つか、切った分だけピボットを動かせば直ります。

トリムはフレームごとに見えるピクセルだけを残すので、フレームごとに大きさと左上の角が変わります。エンジンがその切り詰めた矩形を基準に、つまり角や、切り詰めた範囲の「中央」のピボットでフレームを置くと、フレームごとに体の別の点から描かれ、その差のぶんキャラクターがぶれます。対処は、各フレームの元の大きさとオフセット（sourceSizeとspriteSourceSize、GodotのAtlasTextureのmargin、キャンバス全体で計算したUnityのピボット）を保つか、フレームを1つのキャンバスに戻し、そのうえで残りを測ることです。Nerulioの測定はブレをピクセルで示し、補正は意図して描いた動きを残したままブレを取り除きます。

パックするフレーム画像、GIF、.asepriteファイルをドロップ

空のStudioを開く

ブラウザ内で処理し、ファイルはアップロードされません。

書き出し先

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
GameMaker未検証
CSS sprites検証済み· Chromium
GIF / APNGデコード確認· Pillow

トリムが変えるもの、それがブレになる仕組み

トリム前は、48 × 64のアニメーションの全フレームが1つのキャンバスを共有するので、ピクセル (24, 64) のピボットはどのフレームでも体の同じ点です。トリムは不透明な矩形だけを残します。立ちフレームは (14, 34) の20 × 30、剣を突き出したフレームは同じ角の34 × 30になります。大きさと原点がフレームごとに変わり、元の位置へ戻る手がかりはパッカーが書くオフセットだけです。JSONアトラスのsourceSizeとspriteSourceSize、GodotのAtlasTextureのmargin、Spineアトラスのoffsets、Sparrow XMLのframeXとframeYです。

ブレの大きさは、基準点が体の上で動いた距離に等しくなります。切り詰めた範囲の中央をピボットにすると、立ちフレームの中央は x = 14 + 10 = 24、剣のフレームは 14 + 17 = 31。エンジンは両方の中央をオブジェクトの位置に置くので、剣を出すたびに体が左へ7px跳びます。原点が左上でオフセットを無視すると、3px下から始まる範囲は3px上に描かれます。原因は3つです。オフセットが書かれていない、書かれているのにローダーが無視した、ピボットをキャンバス全体ではなく切り詰めた範囲ごとに決めた。

ブレがすべてパッカーのせいとは限りません。不ぞろいに描いたり切ったりしたフレームもぶれます。Nerulioはフレームそのもので測ります。揃えパネルの測定は、フレームごとに基準点を1つ（絵の下中央、絵の中央、アルファの重心、ピボット）取り、5フレーム幅の局所2次式で滑らかな軌道を当てはめ、各フレームが軌道から外れた距離を最大値とRMS（ピクセル）で示してタイムラインに印を付けます。1.5pxを超えると警告します。フレーム間の移動量は別に示します。歩きや上下動は残したい動きだからです。

補正の原則も同じです。補正（動きを保つ）は各フレームを滑らかな軌道までの距離を丸めたぶんだけ動かすので、描いた上下動や進む歩きは残ります。最初のフレームに固定は、全フレームの基準点を1枚目の点に置きます。その場に立っているべきidleには正しく、進む動きには誤りです。ゲームのコードがキャラを動かしフレームに移動が含まれないなら、そもそもフレームに動きは入っていません。どちらの補正も絵を整数ピクセルでしか動かしません。

sourceSize / spriteSourceSize: フレームの元の大きさと、切り詰めた矩形がその中のどこにあったか。
キャンバス全体基準のピボット: トリム前のフレームで測ったピボット。トリム後も体の同じ点に留まる。
ブレ（残差）: フレームの基準点が滑らかな軌道から離れている距離（ピクセル）。

例：意図した動きがある場合とない場合の測定と補正

Nerulioのブレ測定（絵の下中央、既定の設定）で計算した値です。

idle、8フレーム、絵の下中央のx：24, 24, 27, 24, 24, 21, 24, 24
測定               ブレ最大 1.54px、RMS 0.86px、移動最大 3.0px、警告：1.5px超は見える
補正（動きを保つ） 移動 0, +1, −2, +1, −1, +2, −1, 0px → ブレ 0.51px
最初のフレームに固定 移動 0, 0, −3, 0, 0, +3, 0, 0px   → ブレ 0.00px

1フレームごとに2px進み1px上下する歩き：x 18, 20, 22 … 32
測定               ブレ最大 0.34px、警告なし、移動最大 2px
最初のフレームに固定すると 0, −2, −4 … −14px 動かして歩きが消える

idleは固定が正解（その場に立つべき）、歩きは動きを保つか、補正しないのが正解です。補正の前にフレームが1つのキャンバスを共有している必要があります：フレームを1つのキャンバスにそろえる。

できること

「トリム（サイズと位置を保持）」は、フレームごとに元のキャンバスサイズと、切り出したピクセルがあった位置を保存。
書き出しでは各エンジンが読む形でオフセットを書き（下の表）、ピボットは切り抜きではなく元のフレームのキャンバス基準で計算。
「切り抜き・位置を保持（ピボット移動）」はフレームを実際に小さくし、同じだけピボットをずらすので絵は元の位置のまま。
エンジン実行では、Godot 4.7.2、Phaser 3.90・4.2、PixiJS 8.21がトリムしたフレームを描画し、元のフレームと比較。Unity 6000.5.3f1ではピボットが1つの共通基準点で読めました。
絵そのものが揺れる（フレームごとに少しずつ違う位置に描かれている）なら、フレーム整列が揺れをピクセル単位で測り、整数ピクセルの移動で直します。

使い方

フレーム、シート（適用まで）、GIF、.asepriteのどれかを入れる。
1フレームにピボット（P）を打ってタグ全体に適用。例：足元の下中央。
オニオンスキン（F3）を付けてループ再生し、絵自体が跳ねていないか確認。
パック＆書き出しで「トリム（サイズと位置を保持）」のままにするか、小さくしたいなら「切り抜き・位置を保持」を選んで書き出す。

結果の確認

書き出す前にオニオンスキン（F3）を付けてタグを再生します。隣り合うフレームの足が重なるはずです。
揃えパネルで測定を押します。警告が出ず、ブレが1.5px未満であること。
エンジンで、切り詰めた大きさが大きく違う2フレームで止め、足の位置をピクセルで比べます。同じ位置のはずです。
Unityでは、トリムしたフレームのCustom Pivotが0〜1の外になることがあります。正常で、それでフレームがそろいます。

書き出し先ごとのトリムしたフレームの位置の保ち方

書き出し先	オフセットの保ち方
Godot 4	AtlasTextureのmargin = オフセット＋切り落とした分、全フレームが元のサイズを保つ
Unity 6	元のキャンバスのピボットをトリム後のスプライト範囲内で正規化（0〜1の外もあり得る）
Phaser、PixiJS、Aseprite JSON、Generic JSON	spriteSourceSize（オフセット）とsourceSize（元のサイズ）、TexturePacker方式
Spine / libGDX .atlas	offsets：xは左から、yは元フレームの下から、元のサイズと一緒に
Starling / Sparrow XML	frameX / frameY（負のオフセット）とframeWidth / frameHeight
Defold	元キャンバスのサイズのフレーム画像なので、戻すオフセットがない
CSSスプライト	トリムしない：要素の箱が保存した矩形
GameMakerのストリップ	全フレームを1つのセルにピボットを原点に合わせて配置（GameMakerでは未検証）

トラブルシューティング

症状	考えられる原因	確認方法	対処
武器や手足が出るたびに体が横にずれる	ピボットが切り詰めた矩形ごとの中央になっている	切り詰めた幅を比べる：ずれ = 範囲の中央の差	ピボットをキャンバス全体で測る。Nerulioはどの書き出し先にもそう書く。ほかのパッカーならトリム前にピボットを決めるか、トリムを切る
エディターでは平気なのに、パック後に上下に揺れる	ローダーがトリムのオフセット（spriteSourceSize、frameX / frameY）を無視している	トリムしたフレームとトリム前の元画像を同じ位置に描いて比べる	オフセットを読むローダーを使う。Phaser 3.90はトリムしたSparrow XMLを正しく描けないので、トリムを切るSparrow XML (Phaser 3) プリセットを使う
Godot：1つのアニメーション内は安定、切り替えで跳ぶ	AnimatedSprite2Dのオフセットは最初のフレームのピボットから取った1つだけで、ほかのアニメーションはピボットが違う	Godot書き出しの注記のピボット不一致の警告	キャラの全タグでピボットを1つにするか、スクリプトで `metadata/nerulio` からオフセットを設定する
Phaser 3.90で一部のトリム済みフレームだけ1pxずれる	pixelArtかroundPixelsがオンだと、Phaser 3.90は元の幅（高さ）が奇数のトリム済みフレームを右（下）に1pxずらして描く。Phaser 4とPixiJS 8は同じファイルを正確に描く	ずれたフレームのキャンバスの幅か高さが奇数	フレームのキャンバスを偶数サイズにする（タグを偶数サイズにそろえる）か、Phaser 4を使う
トリム前の元のフレームからすでにぶれている	絵が不ぞろいに描かれた・切られた：パックではなく作画の問題	Nerulioでトリム前のフレームを測る	補正（動きを保つ）か最初のフレームに固定。意図した上下動と誤りを見分けられるツールはないので、タグごとに選ぶ

ほかの方法

方法	こんなときに向いています
トリムなしでパックする	常に安定しますが、アトラスの容量が増えます。CSSスプライトがトリムしない理由でもあります。
TexturePackerのTrimモード（スプライトが元の大きさを保つ）	TexturePackerでパックするとき。Trimモードはオフセットを保存し、Cropモードはフレームを小さくします。TexturePackerの無料の代わりも参照。

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

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

検証の根拠

書き出し：実在のCC0アセットで実際のエンジンを49回実行し47回合格。失敗2回はPhaser 3.90のトリムXMLの不具合で、Phaser 3プリセットで回避。実在の5フレームセットでパッカー比較（CodeAndWeb無料Webパッカー、GAPTools、free-tex-packer）：回転ありで5つすべて最小、回転なしで5つ中4つ。全フレームがピクセル単位で復元できます。

制限

エンジンやローダーがオフセットをどう読むかをNerulioは変えられません。書き出し先ごとの形式で書けるだけです。
ゲームのコードで設定したピボットは、書き出したピボットより優先されます。
ポリゴン（メッシュ）パッキングはありません。検証したエンジンのどれも、書き出しデータからメッシュアトラスを描画しないためです。
GameMakerのストリップはGameMaker本体では未検証です。
拡大縮小バリエーション（@0.5x〜@4x）はニアレストネイバーのみです。
トリムしたStarling XMLはPhaser 3.90で正しく描画されないため、「Sparrow XML (Phaser 3)」プリセットを使ってください。

バージョンと出典

Nerulioのトリム済みフレームはGodot 4.7.2、Phaser 3.90・4.2、PixiJS 8.21が描画し、元のフレームと比較しました（配置の検査）。Unity 6000.5.3f1は全フレームを1つの基準点に置くピボットを読み戻しました。Phaser 3.90の奇数サイズのずれとトリムXMLの不具合も同じ実行で測定しています。TexturePackerのモードとPhaserのパーサーは、それぞれのドキュメントとソースに基づきます。

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

よくある質問

別のパッカーでトリムしたらフレームが揺れたのは？

オフセットがそもそも書かれていないか、書かれていても無視されたか、ピボットを切り抜いた矩形ごとに決めたため「中央」ピボットが切り抜きごとに動いたかです。元のキャンバス基準で測ったピボットなら3つとも避けられます。

トリムを切るだけではだめ？

それでも直りますが、アトラスの領域が増えます。Studioは必要な所だけで切ります。CSSスプライトは要素の箱が保存した矩形そのものなので、切り詰めるとオフセットが失われるためトリムしません。

Unityのピボットが0〜1の外になるのは？

Unityのピボットはスプライト範囲が基準です。トリムしたフレームでは切り抜きが範囲なので、元のキャンバスで測ったピボットがその外に来ることがあり、まさにそれがフレームを揃えています。

Godotはノードごとにoffsetが1つだけ。問題ない？

AnimatedSprite2Dのoffsetは1つなので、シーンは最初のフレームのピボットを使います。トリムはAtlasTextureのmarginでフレームごとに保たれ、すべてのピボットはリソースのメタデータに残ります。

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

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

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

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

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

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