スプライト ピボット（原点）エディター · フレームごとの基準点
ワンクリックでフレームのピボットをピクセルグリッドに置くか、タグ全体にまとめて設定。ピボットは各エンジンの原点フィールドにそのまま渡ります。
ピボット（オリジン、アンカーとも呼ぶ）は、ゲームオブジェクトの位置に置かれるフレーム上の点です。回転はこの点を中心に行われ、大きさの違うフレームはこの点でそろいます。Nerulioでは、1フレーム・選択・タグ・全フレームを対象に、ピクセルグリッド上をクリック（P）して決め、フレームキャンバスに対する0〜1で保存し、書き出し時に各エンジンの項目へ変換します。Unity・Phaser・PixiJSはフレームごとのピボットに従えますが、Godotのノードはオフセットが1つだけなので、書き出し先ごとに実際に何が渡るかを下の表にまとめました。
- 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
ピボットの値は1つ、エンジンの流儀はいろいろ
ピボットの数え方はエンジンごとに違います。Unityはスプライト矩形の左下から0〜1（Normalized）かピクセルで測ります。PhaserとPixiJSはyが下向きのフレームに対する0〜1です。GodotのAnimatedSprite2Dにはピボットがなく、ノード全体に対するピクセル単位の描画オフセットがあるだけです。Nerulioは値を1つ（フレームキャンバスに対する0〜1、yは下向き、指定しなければ下中央0.5, 1.0）だけ持ち、書き出し先ごとに変換するので、一度決めたピボットはトリム・パック・エンジンの変更を経ても保たれます。
フレームの大きさが違ったりトリムされたりすると、フレームごとのピボットが効いてきます。そのためGodotのシーンは最初のフレームのピボットをノードのオフセットにし、全フレームのピボットをリソースのメタデータに残し、1つのアニメーション内でピボットが違えば警告します。どのエンジンでも堅実なのは、フレームを1つのキャンバスに載せ、タグごとに足元へピボットを1つ置く構成です。
ピボットツールは整数ピクセルにスナップし、フレームをそろえる・反転する・ブレを補正するときに絵と一緒に動きます。
- ピボット／オリジン／アンカー
- オブジェクトの位置に置かれるフレーム上の点。呼び名はエンジンによって違います。
- 正規化ピボット
- フレームやスプライト矩形に対する0〜1。Unityはyを下から、PhaserとPixiJSは上から数えます。
- ノードのオフセット（Godot）
- AnimatedSprite2Dがテクスチャをノードの原点からずらして描くピクセル値。全フレームで1つ。
例：1つのピボットを5つのエンジン向けに書く
48 × 64のフレームキャンバスで、ピボットは下中央。パッカーは立ちフレームを (14, 34) の 20 × 30 に、ジャンプフレームを (14, 20) の 20 × 30 にトリムします。
Nerulio ピボット (0.5, 1.0)、48 × 64 基準 → ピクセル (24, 64)
Godot .tscn centered = false、offset = (−24, −64)
Phaser / PixiJS pivot / anchor (0.5, 1.0)、48 × 64 の元フレーム基準
LÖVE px = 24、py = 64
Unity 立ち ((24 − 14) ÷ 20, (30 − (64 − 34)) ÷ 30) = (0.5, 0.0)
Unity ジャンプ ((24 − 14) ÷ 20, (30 − (64 − 20)) ÷ 30) = (0.5, −0.467)ジャンプフレームのUnityのピボットは自分の矩形より下にあります。だからこそ足が同じ位置に留まります。トリムでピボットが動く理由はトリム後のスプライトのブレで説明しています。
書き出し先ごとに渡るもの
| 書き出し先 | Nerulioが書くもの | エンジン側の扱い |
|---|---|---|
| Godot 4 | シーン：centered = false、offset = 最初のアニメーションの最初のフレームの −ピボット。全フレームのピボットは metadata/nerulio | AnimatedSprite2Dは全フレームをそのオフセット1つで描く。フレームごとのピボットには自作のスクリプトが必要 |
| Unity 6 | スプライトごとのカスタムピボット。スプライト矩形に対する0〜1、yは上向き（トリムしたフレームでは0〜1の外もある） | スプライトごとにピボットを持つので、クリップはフレームとともにピボットも切り替える（Unity 6000.5.3f1で読み戻し確認） |
| Phaser 3 / 4 | アトラスJSONのフレームごとの pivot {x, y} | Phaser 3.90はフレームのカスタムピボットとして扱い、アニメーションのフレームも含めてフレームが変わるたびにsetOriginを呼ぶ |
| PixiJS 8 | フレームごとの anchor {x, y} | テクスチャの既定アンカーになる。Spriteは作成時に取り込み、AnimatedSpriteは updateAnchor = true のときだけフレームごとに従う |
| Aseprite JSON、.aseprite | ピボットが変わるフレームにキーを持つ pivot スライス | Asepriteではピボット点つきのスライスとして見える |
| LÖVE 11 | Luaのフレーム表の px、py | 同梱の nerulio_atlas.lua が各フレームのピボットを (x, y) に合わせて描く |
| GameMaker | タグごとに1本のストリップで、全ピボットを1点に合わせる。その点が gamemaker.json とREADMEのオリジン | Sprite EditorでスプライトのOriginとして入力（GameMakerではUNVERIFIED） |
| Defold、Spine / libGDX、CSS | ピボットなし | エンジン側で設定 |
Starling / Sparrow XMLにもピクセル単位の pivotX・pivotY が入りますが、使うかどうかは読み込む側しだいです。
できること
- ピボットツール（P）：クリックで現在フレームのピクセルグリッドにスナップ。
- 適用範囲：このフレーム、選択フレーム、タグ、全フレーム。
- 整列や反転をしてもピボットは絵に付いて移動。
- 書き出し：Godotのシーンオフセット、Unityのスプライトピボット、PixiJSのanchor、Asepriteのスライスピボット、GameMakerのorigin。
使い方
- スプライトを入れて読み込みを適用。
- フレームパネルで範囲を選び、Pを押す。
- 足元（または中心）をクリックし、矢印キーで微調整。
- エンジン向けに書き出すと、ピボットがその形式で記録されます。
結果の確認
- オニオンスキン（F3）を付けてタグをコマ送りします。ピボットの十字が体の同じ位置に留まるはずです。
- Godot：書き出しの注記（ピボット不一致の警告）を読み、
print($Hero.sprite_frames.get_meta("nerulio"))でフレームごとのピボットを見ます。 - Unity：Sprite Editorでテクスチャを開くと、各スプライトのPivotはCustomで、値は例の正規化値です。
- Phaser：
sprite.play('run')のあと、sprite.originX・sprite.originYが現在のフレームのピボットと同じです。
トラブルシューティング
| 症状 | 考えられる原因 | 確認方法 | 対処 |
|---|---|---|---|
| Godotでアニメーションが切り替わるとキャラが跳ねる | ノードのオフセットは最初のアニメーションの最初のフレームから取った1つだけで、ほかのアニメーションはピボットが違う | Godot書き出しの注記、metadata/nerulio のピボットを比べる | キャラの全タグでピボットを1つにするか、アニメーション切り替え時にスクリプトでメタデータから offset を設定する |
| PixiJSのAnimatedSpriteがフレームごとのピボットを無視する | updateAnchor の既定値がfalseで、最初のテクスチャのアンカーのままになる | sprite.updateAnchor を出力する | updateAnchor = true にするか、タグのピボットを1つにする |
| Unityのピボットが0未満や1超えになる | トリムしたフレームで、キャンバス全体に対するピボットが小さくなった矩形の外にある | Sprite EditorのCustom Pivotの値 | 直す必要はない。それで絵がそろう。0〜1が必須のツールならトリムなしでパックする |
ほかの方法
| 方法 | こんなときに向いています |
|---|---|
| エンジン側でピボットを設定（UnityのSprite EditorのPivot、GameMakerのOrigin、Godotのノードのオフセット） | ピボットが1つのスプライトを、めったに書き出し直さないとき。 |
| Asepriteのピボットスライス | ピボットを.asepriteの元データで管理したいとき。Nerulioは読み込み時にピボットスライスを読み、.asepriteとAseprite 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プリセットで回避できます。
制限
- Godotには、スクリプトを書かないかぎりフレームごとではなくノードごとに1つのピボットが渡ります。
- Defold、Spine / libGDX、CSSの書き出しにはピボットがありません。
- GameMakerのオリジンはGameMaker本体ではUNVERIFIEDです。
- グリッド・島の推定は信頼度つきのプレビューで、「適用」を押すまで何も切りません。すべての選択に代替案があり、ワンクリックで切り替えられます。
- レイヤーが正確に合成できない.asepriteファイル（グループの不透明度など）は統合して読み込み、理由を読み込みパネルに表示します。
- 読み込んだアトラス内の回転フレームは回転したままで、その書き出しは未検証です。
- 画像は一辺32,768px（2億6,800万ピクセル）まで。ブラウザのメモリにも依存します。
バージョンと出典
Unity 6000.5.3f1が全スプライトのピボットを読み戻し、共通の基準点に対して絵が元の位置に置かれました。Godot 4.7.2はオフセット付きのシーンを読み込みました。PhaserとPixiJSがピボットをどう扱うかはPhaser 3.90のソースとPixiJS 8のドキュメントによるもので、Nerulioで実行した結果ではありません。
参照した公式ドキュメント
- Unity 6 manual: Sprite Editor tab reference
- Godot 4.7 docs: AnimatedSprite2D
- Phaser 3.90 source: JSONHash parser (pivot, trim)
- Phaser 3.90 source: AnimationState.setCurrentFrame
- PixiJS 8 docs: AnimatedSprite (updateAnchor)
- PixiJS 8 docs: Texture.defaultAnchor
- Aseprite docs: Slices
- GameMaker manual: The Sprite Editor
よくある質問
ピボットはピクセル？0〜1？
フレームキャンバス基準の0〜1で保存し、ツールは整数ピクセルにスナップします。各エンジン形式はこの値から変換されます。
Unityでもフレームごとにピボットが入りますか？
はい。同梱のインポートスクリプトがUnity 6のスプライト範囲をピボット付きで作成します（Unity 6000.5.3f1で確認）。
無料ですか？アカウントは必要ですか？
このページの機能はすべて無料で、アカウントなしで使えます。透かしや制限された書き出しはありません。
スプライトはアップロードされますか？
いいえ。Studioはこのブラウザのタブ内でデコード・パック・書き出しを行います。プロジェクトはブラウザ（IndexedDB）に自動保存され、.nerulioファイルとして保存できます。
Asepriteやエンジンのプラグインは必要ですか？
いいえ。.asepriteファイルはブラウザで読み書きします。エンジン別のバンドルには必要なものが入っています（Godotはインポート設定とシーン、UnityとGodotのタイルセットは小さなエディタースクリプト）。