ヒットボックス・ハートボックス アニメーター

スプライトフレームごとに当たり判定レイヤーを描画。オニオンスキンで動きをプレビューし、ピクセル単位で座標を編集してJSON出力。

スプライトアニメーションを読み込み、分割を確認して攻撃・喰らい・物理押し出しなどの判定エリアを描画します。

ローカル専用アニメーションデスク。画像が送信されることはありません。
画像素材を作業台に配置

スプライトシートまたは連番PNG/WebP画像を選択してください。

フレーム分割
モーションプレビュー
アニメーションステージ

画像を読み込んで当たり判定の描画を開始してください。

タイムライン
プロジェクト出力

JSONファイルには画像名、ピボット、判定形状のみが保存され、画像ピクセルは含まれません。

Zoom 100%
ユーティリティスタジオ

このユーティリティをあなたのサイトに追加しませんか?

WordPress、Notion、またはご自身のサイト向けに、カラーとダークモードをカスタマイズできます。

よくある質問

Hitbox(攻撃判定)とHurtbox(食らい判定)の違いは何ですか?

Hitboxは攻撃を発生させる領域、Hurtboxはダメージを受ける領域を指します。Pushboxはキャラクター同士の押し出し判定、Grabboxは 掴み判定、Sensorは検出エリアとして機能します。

スプライト画像が外部 server に送信されることはありますか?

いいえ。画像のデコード、切り出し、描画、出力処理はすべてブラウザ内でローカルに完結します。ローカルストレージには編集設定のみが保存されます。

JSON出力ではどの座標系が使用されますか?

各フレームは切り出された枠の左上を原点(0,0)としてピクセル単位で測定されます。矩形や円のサイズはピボット位置とともに保存されます。

スプライトシートと個別フレーム画像の両方を編集できますか?

はい。PNGやWebPのスプライトシートの縦横分割数を指定するか、連番の個別画像ファイルを一括選択して読み込むことができます。

出力データはすべてのゲームエンジンでそのまま使えますか?

JSONはエンジンに依存しない汎用フォーマットです。フレーム範囲、ピボット、レイヤー名、形状データが記録されています。

参考文献