点と矩形の衝突

この記事では点と回らない矩形の衝突判定についてまとめていきます。

といっても回らない矩形との衝突判定は簡単なので、わざわざ説明の必要もないかもしれませんが。。。

考え方

矩形の左上を $(x_{1}, y_{1})$ 、右下を $(x_{2}, y_{2})$ 、$点P = (P_{x}, P_{y}) $ とします。

$P$ が 矩形と当たっているかどうかは、$P$ の座標が矩形の中(色のついた部分)にあるかどうかを判定できればいいわけです。

$P = (P_{x}, P_{y})$について、$x$ 座標と $y$座標をそれぞれ判定していきます。

$x$座標に着目

$x$座標にだけ着目してみると、$P$ が矩形の中にあるためには、$P_{x}$ の範囲が $x_{1} < P_{x} < x_{2} $ である必要があります。

この図の場合、$P_{x} は x_{1} ～ x_{2} $の範囲に収まっていますね。

$y$座標に着目

$y$座標に着目すると、$P$ が矩形の中にあるためには、$P_{y}$ の範囲が $ y_{2} < P_{y} < y_{1} $ である必要があります。

この図の場合、$P_{y} は y_{1} ～ y_{2} $の範囲に収まっていないので、矩形とは当たっていないということになります。

まとめ

点が矩形の中にあるかどうかは、 $({P_{x}}, {P_{y}})$ が以下の条件を満たすかどうかを判定すればよい。

$x_{1} < P_{x} < x_{2} かつ y_{2} < P_{y} < y_{1} $

サンプルコード

/**
 * 点と矩形が当たっているかどうか
 * @param point 点
 * @param rect 矩形
 */
export function intercect(point:Vector2, rect:Rect) 
{
  // rect.p1 が左上の座標
  // rect.p3 が右下の座標

  // ①点のx座標が矩形の左端より右にあり、かつ矩形の右端より左にあるか
  const isContainX = (rect.p1.x <= point.x) && (point.x <= rect.p3.x);
 
  // ②点のy座標が矩形の上端より下にあり、かつ矩形の下端より上にあるか
  const isContainY = (rect.p3.y <= point.y) && (point.y <= rect.p1.y);
 
  return (isContainX && isContainY);
}