GameCorder.net

このエントリーをはてなブックマークに追加

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);
}
		

実行している内容は非常に簡単です。
円の中心点と四角形の最短点を返し
その点と円との当たり判定を行なっているだけです。

円と四角形の当たり判定のサンプル

最後に円と四角形の当たり判定のサンプルです。
ドラッグすることで、円が動かせるようになっています。