ピクセルアートの当たり判定：見た目の範囲と分ける

最初に座標の取り決めを書く

開発者に元の寸法、座標原点、軸の向き、矩形の意味を伝えます。この例の原点は32×32画像の左上で、xは右へ、yは下へ増えます。キャンバス上の表示サイズを変えても、これらの値は変わりません。

選んだ当たり判定はx=8、y=7から始まり、元の画素で16×23です。右端と下端の含まない境界値は24と30で、どちらも32以内に収まります。これは説明用の設計値です。実際の矩形はゲームの移動と衝突の挙動に合わせて調整してください。

別ファイルの重ね合わせ画像を頼む

新しいCiyoプロジェクトを作り、元画像の寸法と矩形を一つの依頼にまとめます。デザインエージェントには元のファイルを残し、コピー上に衝突範囲を描くよう指定してください。キャンバスのプレビューが小さくても座標を読めるよう、返信に一覧も求めます。

Ciyo Agentとコードツールを使いました。プロンプトはコードで仮のキャラクターを作り、有料の画像・動画生成を使わないよう明示しています。本番のキャラクターでは承認済みのスプライトを添付し、そのファイルについて同じ検査を依頼してください。

再現可能なコードだけで、背景が透明な架空の32x32ピクセルアートのキツネを作成してください。有料生成器は使わないでください。元スプライトの座標で、別の当たり判定矩形x=8 y=7 width=16 height=23を設定してください。元スプライトを変更せず、最近傍補間で8xにした別のPNG確認画像に色付きの当たり判定を重ねてください。元のPNG、確認用PNG、元の寸法・当たり判定・左上原点を記したテキストのJSON一覧を納品してください。可視アルファ領域が衝突範囲とは限らないことを説明してください。元画像と確認画像をキャンバスへ追加してください。元の寸法、整数座標、矩形が画像内に収まること、重ね合わせ後も元画素のハッシュが変わらないことを確認してください。ゲームエンジンとの連携は主張しないでください。実際のCiyoワークスペースで作るコード生成の説明用データです。

二つの輪郭を区別して読む

結果には元のPNGと256×256の確認画像があります。青い重ね合わせは指定した衝突矩形、マゼンタの破線は可視アルファ領域の境界です。市松模様は確認用の背景で、元スプライトには含まれません。

可視領域はx=5、y=0、幅=26、高さ=31です。耳と尻尾は衝突矩形の外に伸びています。測定を分ける理由はここにあります。見える絵は外見を示し、設計した衝突形状はゲーム上の意図を示します。

元のファイルと座標一覧を調べる

キャンバスのスクリーンショットではなく元のファイルをダウンロードします。32×32で、本当のアルファ透明度があるか確認してください。一覧を元の単位で読み、x + width ≤ 画像の幅、y + height ≤ 画像の高さを確かめます。元画像の保存が必要なら、確認画像を作る前後で元画素のハッシュを比較します。

確認画像を本番スプライトに混ぜない

保存した例をデコードした画素のハッシュは、エージェントが報告した値と一致しました。重ね合わせは別ファイルです。ゲーム中に意図してデバッグ表示を出す場合を除き、その画像をスプライトとして配布しないでください。

• キツネの座標一覧を開く
• スプライトのピボットをそろえる
• 元のキツネのPNG
• 独立した当たり判定の確認画像

ゲームの実行環境で衝突を試す

元画像を取り込み、矩形をエンジンの衝突設定へ変換します。エンジン側のピボットのずれは明示してください。キャラクターの予定表示サイズで、壁、地面、狭い隙間、操作との関係を試します。矩形ファイルが正しくても、公平な操作感の証明にはなりません。

Godotの物理ドキュメントでは衝突形状を独立したオブジェクトとして扱います。この区別は本例の受け渡し方に合っていますが、例をGodotや別のエンジンへ取り込んだわけではありません。移動規則、攻撃が有効なフレーム、ダメージの待ち時間には別の実装と確認が必要です。

• Godotの物理入門
• 透明スプライトのファイルを確認する