スプライト基準点エディターの使い方
- スプライトシートをドロップし、検出されたグリッドを確認します。
- 大きなフレーム表示をクリックして基準点を置くか、プリセットを使います。中央、下中央、左上、または足元（最も下のピクセルから自動検出）。
- 矢印ボタンか , と . キーでフレームを送り、矢印キーで基準点を微調整します（Shift = 4 px）。
- プレビューを確認します。各フレームが基準点に揃えて地面ラインの上に描かれるので、ガタつきは一目瞭然です。
- FPS、フレームごとの表示時間、ループモードを設定し、汎用、Aseprite 形式、Godot 形式の JSON を書き出します。
得られるもの
- 汎用 JSON：フレームの矩形、基準点（px と 0–1）、表示時間、fps、ループ
- Aseprite 形式の JSON（frameTags 付き json-array）
- Godot 向け JSON（リージョン、オフセット、相対的な表示時間）
ゲーム制作で使って得たコツ
- 「足元」は各フレームの見えているピクセルの下中央を見つけます。サイドビューのキャラの多くにとって正しい基準点です。
- オニオンスキンは前のフレームを基準点に揃えて描くので、フレーム間で足や頭を正確に合わせられます。
- キーフレームには個別の表示時間を設定して長く見せましょう。予備動作やヒットのフレームは基本時間の 2–3倍が合うことが多いです。
- 書き出した JSON を読み込み直すと基準点と FPS が復元されるので、あとから戻って調整できます。
活用例
- AI 生成やトレースしたアニメーションのガタつきを取る
- フレームごとに異なる攻撃やジャンプの原点を設定する
- フレームごとの原点を読むエンジン向けにシートを準備する
- タイミングのデータをプログラマーに渡す
よくある質問
基準点（ピボット）とは何ですか？
ゲーム内でスプライトの座標に置かれる、フレーム上の点です。キャラなら普通は両足の間にするので、フレームがどう描かれていても地面に立って見えます。
アニメーションが滑ったりガタついたりするのはなぜですか？
フレームごとにキャラの位置が違うからです。フレーム単位の基準点があればエンジン側で補正でき、ここのプレビューで書き出す前に結果を確認できます。
どの形式で書き出せますか？
すべてを含む汎用 JSON、フレームタグと正規化した基準点付きの Aseprite 形式 json-array、リージョンとフレーム中心からのオフセット付きの Godot 形式 JSON です。
基準点を読み込み直せますか？
はい。3つの書き出し形式のどれでも読み込み直して、基準点、表示時間、FPS を復元できます。
画像は変更されますか？
いいえ。シートはそのままで、書き出すのは JSON データだけです。
シートはアップロードされますか？
いいえ。すべてブラウザ内のローカルで処理されます。