8.円と四角形との当たり判定
円と四角形との当たり判定です。
判定条件として、円の中心と四角形の一番近い点を見つけ出し
その点と円の中心との距離を求め、当たり判定があれば、円と四角形が当たっていることになります。
ここで問題なのが、円の中心点と四角形の最短点を見つける方法です。
最短点を見つけるために以下の関数を使います。
/**
* chapter8
* 指定した最小値・最大値の値以下を返す
**/
function clampOnRange(x,min,max){
if(x < min){
return min;
}else if(x > max){
return max;
}else{
return x;
}
}
この関数では、min,maxの範囲内にある値を返します。
円と四角形の当たり判定の例でX軸を基準に考えると
円の中心が四角形の外部にあれば、max,minのどちらかの値が入り
内部にあれば、円の中心点がそのまま返るので、
各々の軸の最短点が返されることになります。
続いて、四角形と中心点との最短点を返す関数を見て見ましょう
四角形と円の中心点との最短点を返す関数
/**
* chapter8
*
* @param point
* @param rectangle
* @returns
*/
function clampOnRectangle(point,rectangle){
var clamp = new Vector2D();
// x軸とy軸の最短点を取得し返すだけ
clamp.x = clampOnRange(point.x,rectangle.origin.x,rectangle.origin.x + rectangle.size.x );
clamp.y = clampOnRange(point.y,rectangle.origin.y,rectangle.origin.x + rectangle.size.y );
return clamp;
}
関数の説明にあるように、円の中心点と四角形の最短点を返すのみです。
これを踏まえて、円と四角形の当たり判定を行う関数を見て見ましょう。
四角形と円の当たり判定を返す関数
/**
* chapter8
* 円と四角形の当たり判定
* @param circle cCircle
* @param rectangle Rectangle
* @returns
*/
function circleRectangleCollision(circle,rectangle){
clamped = clampOnRectangle(circle.Center,rectangle);
return circle.CollisionWithPoint(clamped);
}
実行している内容は非常に簡単です。
円の中心点と四角形の最短点を返し
その点と円との当たり判定を行なっているだけです。
円と四角形の当たり判定のサンプル
最後に円と四角形の当たり判定のサンプルです。
ドラッグすることで、円が動かせるようになっています。