衝突の計算について

矩形のパラメータ

矩形と矩形の衝突を計算したいと思います。ここでは、プレイヤーと地形との当たり判定という事で、地形側の矩形は完全に固定し、プレイヤー側の矩形が壁から押されるようにします。
以下のパラメータを使用します。

　

// プレイヤーのパラメータ ------------- my_x = 0; // 座標 my_y = 0; my_dx = 0; // 移動量 my_dy = 0; my_rect_x = -10; // 矩形x座標(座標からのオフセット) my_rect_y = -10; // 矩形y座標(座標からのオフセット) my_rect_w = 20; // 矩形幅 my_rect_h = 20; // 矩形高さ // ブロックのパラメータ --------------- bl_rect_x = 50; // 矩形x座標 bl_rect_y = 100; // 矩形y座標 bl_rect_w = 100; // 矩形幅 bl_rect_h = 50; // 矩形高さ

　

まず矩形Ａと矩形Ｂとで当たり判定を取ります。当たり判定の具体的な解説はこちら。

　

　

// プレイヤーの矩形 var my_x_min = my_rect_x + my_x; // x最小 var my_y_min = my_rect_y + my_y; // y最小 var my_x_max = my_x_min + my_rect_w; // x最大 var my_y_max = my_y_min + my_rect_h; // y最大 // ブロックの矩形 var bl_x_min = bl_rect_x; // x最小 var bl_y_min = bl_rect_y; // y最小 var bl_x_max = bl_x_min + bl_rect_w; // x最大 var bl_y_max = bl_y_min + bl_rect_h; // y最大 if(my_x_max < bl_x_min){ }else if(my_y_max < bl_y_min){ }else if(my_x_min > bl_x_max){ }else if(my_y_min > bl_y_max){ }else{ // 当たり判定あり }

　

　

重なっているのが分かったら、重ならない位置まで補正します。
とりあえず、壁に近ければ外に外に出すように下のように考えて見ましょう。

　

　

　

　

　

これで計算すると「上下方向」と「左右方向」のどちらも移動する必ずどこかの角に移動してしまいます。 そこで「上下方向」か「左右方向」どちらか１つの方向だけ移動するようにします。

どちらに移動するかは、補正するまでの移動距離が短いほうにします。

　

　

ただこれを計算するとちょっと複雑になるため、もうひとつ別のやり方を考えて見ましょう。

　

　

サンプルではこの方法を採用しています。

　

半分を境にどちらに補正するか決めていましたが、あえて範囲を縮めて見ましょう。 下の図のようにめり込み許容量を決めておいてそこに当たっていた場合補正するようにします。

　

　

　

　

　

MAX_LENGTH = 10; // めり込み許容範囲 // プレイヤーの矩形 var my_x_min = my_rect_x + my_x; // x最小 var my_y_min = my_rect_y + my_y; // y最小 var my_x_max = my_x_min + my_rect_w; // x最大 var my_y_max = my_y_min + my_rect_h; // y最大 // ブロックの矩形 var bl_x_min = bl_rect_x; // x最小 var bl_y_min = bl_rect_y; // y最小 var bl_x_max = bl_x_min + bl_rect_w; // x最大 var bl_y_max = bl_y_min + bl_rect_h; // y最大 if(my_x_max < bl_x_min){ }else if(my_y_max < bl_y_min){ }else if(my_x_min > bl_x_max){ }else if(my_y_min > bl_y_max){ }else{ // ブロックの上端 if(my_y_max - bl_y_min < MAX_LENGTH){ my_y = bl_y_min - my_rect_y - my_rect_h; // 上に補正 } // ブロックの下端 if(bl_y_max - my_y_min < MAX_LENGTH){ my_y = bl_y_max - my_rect_y; // 下に補正 } // ブロックの左端 if(my_x_max - bl_x_min < MAX_LENGTH){ my_x = bl_x_min - my_rect_x - my_rect_w; // 左に補正 } // ブロックの右端 if(bl_x_max - my_x_min < MAX_LENGTH){ my_x = bl_x_max - my_rect_x; // 右に補正 } }

　

これだと自動的に壁に近いほうに移動する事ができます。
ただ、欠点があってめり込みの許容範囲より多くめり込むと地形をすり抜けてしまいます。

　

　

そういうわけで最高移動量を決めておいて、移動量がめり込み許容範囲より大きい値にならないようにします。

　

MAX_LENGTH = 10; // めり込み許容範囲 if(my_dx > MAX_LENGTH) my_dx = MAX_LENGTH; if(my_dx <-MAX_LENGTH) my_dx =-MAX_LENGTH; if(my_dy > MAX_LENGTH) my_dy = MAX_LENGTH; if(my_dy <-MAX_LENGTH) my_dy =-MAX_LENGTH;

　

また、角の挙動が少しおかしくなるので次に解説する、「移動している方向によって当たり判定を取らない」処理を入れてみましょう。

　

もうひとつ、アクションゲームのようなブロックの上に乗ったりする挙動を作るにはさらに細工が必要です。

下の図を見てください。めめくんがジャンプしてブロックに乗ろうとしています。上の画像のような挙動を行いたいのですが これまで紹介したやり方だとジャンプ上昇中に、ブロックに吸着してしまいます。

　

　

そこで移動量の方向によって当たり判定を無視するようにします。
そもそも上昇中の物体が、ブロックの上端と接触するという事は、自然界ではありえない事です。という事は、 y 方向の移動量がマイナスのときは上端の当たり判定を無視しても問題なさそうです。

　

他にも、
y 方向の移動量がプラスのときは下端の当たり判定を無視、
x 方向の移動量がマイナスのときは右端の当たり判定を無視、
x 方向の移動量がプラスのときは左端の当たり判定を無視
しましょう。

　

　

MAX_LENGTH = 10; // めり込み許容範囲 // プレイヤーの矩形 var my_x_min = my_rect_x + my_x; // x最小 var my_y_min = my_rect_y + my_y; // y最小 var my_x_max = my_x_min + my_rect_w; // x最大 var my_y_max = my_y_min + my_rect_h; // y最大 // ブロックの矩形 var bl_x_min = bl_rect_x; // x最小 var bl_y_min = bl_rect_y; // y最小 var bl_x_max = bl_x_min + bl_rect_w; // x最大 var bl_y_max = bl_y_min + bl_rect_h; // y最大 if(my_x_max < bl_x_min){ }else if(my_y_max < bl_y_min){ }else if(my_x_min > bl_x_max){ }else if(my_y_min > bl_y_max){ }else{ // 下に移動中 if(my_dy > 0){ // ブロックの上端 if(my_y_max - bl_y_min < MAX_LENGTH){ my_y = bl_y_min - my_rect_y - my_rect_h; // 上に補正 } // 上に移動中 }else{ // ブロックの下端 if(bl_y_max - my_y_min < MAX_LENGTH){ my_y = bl_y_max - my_rect_y; // 下に補正 } } // 右に移動中 if(my_dx > 0){ // ブロックの左端 if(my_x_max - bl_x_min < MAX_LENGTH){ my_x = bl_x_min - my_rect_x - my_rect_w; // 左に補正 } // 左に移動中 }else{ // ブロックの右端 if(bl_x_max - my_x_min < MAX_LENGTH){ my_x = bl_x_max - my_rect_x; // 右に補正 } } }

　

　

それと当たり判定はブロックの上端から調べていったほうがいいでしょう。
崖ギリギリに立つという動きをすると横に移動してしまうのを防ぐためです。

　

　

円と線のパラメータ

円をプレイヤー、線を地形として衝突を計算したいと思います。 ここでは、プレイヤーと地形との当たり判定という事で、地形側の線は完全に固定し、プレイヤー側の円が壁から押されるようにします。
以下のパラメータを使用します。

　

// プレイヤーのパラメータ ------------- my_x = 0; // 中心座標 my_y = 0; my_dx = 0; // 移動量 my_dy = 0; my_rad = 20; // 円の半径 // ブロックのパラメータ --------------- ax = 50; // 開始座標 ay = 100; bx = 100; // 終了座標 by = 50;

　

まず円と線分とで当たり判定を取ります。交差判定のアルゴリズムはこちらです。

今回は、「このまま進んだら地形と衝突するか？」という「交差判定」ではなく 一度壁にめり込ませてから「めり込んでいるか判定」し、壁から補正するような計算をします。

　

　

円の現在の位置から線の法線と逆方向に半径の長さの線を出して当たり判定を取ります。

　

　

// 始点から終点のベクトル var sx = bx - ax; var sy = by - ay; // ベクトルを正規化 var length = Math.sqrt((sx * sx) + (sy * sy)); if(length > 0) length = 1 / length; sx *= length; sy *= length; // 線の法線 var nx = -(sy); var ny = sx; // 玉から面と垂直な線を出して面と交差するか調べる var sx = -nx * my_rad; var sy = -ny * my_rad; var d = -(ax * nx + ay * ny); var t = -(nx * my_x + ny * my_y + d) / (nx * sx + ny * sy); // 線と交差している（この時点では無限線） if(t > 0 && t <= 1){ // 交点 var cx = my_x + t * sx; var cy = my_y + t * sy; // 交点が線分の間にあるか調べる var acx = cx - ax; var acy = cy - ay; var bcx = cx - bx; var bcy = cy - by; if((acx * bcx) + (acy * bcy) <= 0){ // 当たりあり } }

　

ただ、この当たり判定だけでは下のような位置に来たときに当たり判定をすり抜けてしまいます。

　

　

この問題は後で対応するとして、先に衝突の処理をして見ましょう。
まず線と線の交点から法線方向に半径分移動させて線の上にのるようにしましょう。

　

my_x = cx + my_rad * nx; my_y = cy + my_rad * ny;

　

次に反射方向です。ここでは衝突時の反射係数( 0 ～ 1 )を 0.8 としています。

　

var t = -(nx * my_dx + ny * my_dy)/(nx * nx + ny * ny); my_dx += t * nx * 2 * 0.8; my_dy += t * ny * 2 * 0.8;

　

さて先ほどの当たりすり抜けの件ですが、下の図のような玉の移動をするとあたりをすり抜ける事がわかります。

　

　

という事で、玉の移動量が半径を超えないようにします。

　

// 速度制限 if(Math.sqrt(my_dx * my_dx + my_dy * my_dy) > my_rad){ var length = Math.sqrt((my_dx * my_dx) + (my_dy * my_dy)); if(length > 0) length = 1 / length; my_dx = my_dx * length; my_dy = my_dy * length; my_dx *= my_rad; my_dy *= my_rad; }

　

どうしても1フレーム前の位置より現在の位置までの長さが半径を超える場合は、その距離までの交差判定を取るか、半径の長さずつ移動させて何回も当たり判定を取るといいでしょう。

　

後は、線の始点と終点近くの当たりすり抜けですが、ここは円と始点、円と終点の当たり判定を取れば解決できそうです。

　

　

点と円の当たり判定を取ります。

　

// 始点と円の当たり判定 var sx = my_x - ax; var sy = my_y - ay; if(sx * sx + sy * sy < my_rad * my_rad){ // 当たりあり } // 終点と円の当たり判定 var sx = my_x - bx; var sy = my_y - by; if(sx * sx + sy * sy < my_rad * my_rad){ // 当たりあり }

　

点から円を補正します。

　

// 始点と円の当たり判定 var sx = my_x - ax; var sy = my_y - ay; if(sx * sx + sy * sy < my_rad * my_rad){ // 正規化 var length = Math.sqrt((sx * sx) + (sy * sy)); if(length > 0) length = 1 / length; sx = sx * length; sy = sy * length; // 位置補正 my_x = ax + sx * my_rad; my_y = ay + sy * my_rad; } // 終点と円の当たり判定 var sx = my_x - bx; var sy = my_y - by; if(sx * sx + sy * sy < my_rad * my_rad){ // 正規化 var length = Math.sqrt((sx * sx) + (sy * sy)); if(length > 0) length = 1 / length; sx = sx * length; sy = sy * length; // 位置補正 my_x = bx + sx * my_rad; my_y = by + sy * my_rad; }

　

反射方向を計算します。衝突時の反射係数( 0 ～ 1 )を 0.8 としています。

　

// 始点と円の当たり判定 var sx = my_x - ax; var sy = my_y - ay; if(sx * sx + sy * sy < my_rad * my_rad){ // 正規化 var length = Math.sqrt((sx * sx) + (sy * sy)); if(length > 0) length = 1 / length; sx = sx * length; sy = sy * length; // 位置補正 my_x = ax + sx * my_rad; my_y = ay + sy * my_rad; // 反射方向 var t = -(sx * my_dx + sy * my_dy)/(sx * sx + sy * sy); my_dx += t * sx * 2 * 0.8; my_dy += t * sy * 2 * 0.8; } // 終点と円の当たり判定 var sx = my_x - bx; var sy = my_y - by; if(sx * sx + sy * sy < my_rad * my_rad){ // 正規化 var length = Math.sqrt((sx * sx) + (sy * sy)); if(length > 0) length = 1 / length; sx = sx * length; sy = sy * length; // 位置補正 my_x = bx + sx * my_rad; my_y = by + sy * my_rad; // 反射方向 var t = -(sx * my_dx + sy * my_dy)/(sx * sx + sy * sy); my_dx += t * sx * 2 * 0.8; my_dy += t * sy * 2 * 0.8; }

　

これで円と線と衝突処理を計算する事ができました。
ただ、この当たり判定はかなり重いので、実際に使うときは当たり判定データを一定の座標間隔ごとに分ける等の高速化しないと実用に耐えれないでしょう。