# 描画されたターゲットとポインター テストが 1 つの座標マップを共有するようにします。

> ポインター位置をゲームのワールド座標に変換し、スケーリング後も表示されるターゲットとクリック可能なヒット領域が位置合わせされたままになるようにします。

- URL: https://oneshotgems.ai/ja/topics/hit-testing-canvas-coordinates
- カテゴリ: ゲーム開発者向け
- 種類: ガイド
- 更新日: 2026年10月5日

キャンバスのボタンはポインターの真下に見えていても、クリックを取りこぼすことがあります。イベントはビューポート上のピクセルで測られる一方、ゲームは論理的なワールド座標で描画するためです。ヒットテストに使う座標系を一つ決め、プレイフィールドの描画に使ったものと同じ表示変換で、ポインター位置を変換します。このガイドでは、その変換に絞って説明します。固定サイズのゲームの周囲にあるレターボックス領域も含め、ページ上のポインター位置を論理座標上の対象までたどることで、レスポンシブレイアウトの検討を補います。

## キャンバスの原点を減算し、ポイントをスケールします。

イベントの clientX と clientY、および canvas.getBoundingClientRect() によって返される四角形から開始します。長方形はビューポートを基準にして配置されるため、拡大縮小する前にその左と上を減算します。論理ゲームが 800 x 450 で、表示される四角形が 400 x 225 の場合、ローカルの x と y を 2 倍します。ページのスクロール位置に関係なく、表示された中心にあるポインターは論理 (400、225) にマップされます。

ウィンドウの幅に基づく仮定ではなく、実際のコンテンツの四角形を使用します。 CSS の境界線やキャンバスの外側のパディングを考慮し、サイズ変更や向きの変更後にマッピングを更新します。ゲームでカメラ オフセット、レターボックス、または別のワールド変換が使用されている場合は、ポイントをゲームのヒット領域と比較する前に、これらの操作を逆の順序で反転します。

## デッドスペースを含む表面全体をテストする

変換されたポインターの位置に一時的な十字線を置き、キャンバスの 4 つの隅、中心、およびターゲットの各端をすべてテストします。簡単なキャリブレーション チェックは、描画された円の中心をクリックし、報告されたワールド ポイントが円の中心近くにあることを確認することです。次に、その外側をクリックして、ヒット境界が意図した許容マージンと一致していることを確認します。 MDN は、clientX をビューポート相対として文書化し、getBoundingClientRect() をビューポート相対の要素境界を返すものとして文書化します。これらの測定値をペアにすることで、座標空間の混合を回避できます。

## レンダリングを続けて領域をリンクする

ターゲットのワールド位置と寸法を一度保存​​し、そのデータを使用してターゲットを描画し、それに対してポインタをテストします。表示されるアイコンとクリック領域に対して個別に手入力した画面座標を維持することは避けてください。キャンバスのスケール、CSS サイズ、デバイスのピクセル比、またはカメラのオフセットを変更した後、再テストします。座標プローブは正しいがターゲットがまだ外れている場合は、任意のピクセル オフセットを追加する代わりに、その形状計算と入力順序を検査します。

## よくある質問

**キャンバスのヒットには offsetX と offsetY を使用する必要がありますか?** これらは単純な未変換のキャンバスには便利ですが、明示的なクライアント座標、要素の境界、およびゲームの変換により、レイアウトやカメラのスケーリングが変更されたときに各変換ステップがより明確になります。

**devicePixelRatio はポインタ変換に属しますか?** ポインタがポイントし、シェイプにバッキング ストア ピクセルが使用されている場合のみ。一般的なアプローチでは、ビューポート座標を論理ゲーム単位にマップし、レンダリング変換内でデバイス ピクセルのスケーリングを維持します。

## 気になることを、もっと

- [ブラウザ ゲーム入力にポインタ イベントを使用する](https://oneshotgems.ai/ja/topics/pointer-events-for-games): ゲーム ループでのキャプチャ、デバイス ID、互換性動作を維持しながら、ポインタ イベントを通じてマウス、ペン、タッチをモデル化します。
- [ブラウザーゲームのレスポンシブレイアウトを作る](https://oneshotgems.ai/ja/topics/responsive-game-layouts): シミュレーション状態を画面サイズに結び付けることなく、ゲーム サーフェスをそのコンテナに適応させ、変更するビューポート間でレイアウトをテストします。

## 関連情報

- [MDN クライアントX](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX)
- [MDN getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

---
正規ページ: https://oneshotgems.ai/ja/topics/hit-testing-canvas-coordinates