今回は、引き続きEnterFrameを使って、あたり判定の計算をしてみます。
4角形同士のあたり判定
あたり判定の計算を行う上で、最も簡単な、4角形同士のあたり判定を実装します。 下の票を見てください。
|
この表は、赤い四角形と青い四角形のあたり判定のパターンを表した図です。 ここからも分かるように、「abcd」の4点のいずれかが、赤い四角形の中にあるときに「当たり」と判定できます。
計算方法ですが、まず「abcd」それぞれにXYがあるので、「aX aY」「bX bY」とします。 次に、あたり判定の対象になる四角形ですが、X座標が「LEFT RIGHT」、Y座標が「TOP BOTTOM」の4点存在します。それぞれの頭文字をとって「L R T B」としました。
すると、aの座標で考えると、「aXはLより大きく、Rより小さい、aYは、Tより大きく、Bより小さい」 不等式に直すと、「aX > L && ax < R && aY > T && aY < B」となります。
これをそのままif文の条件にしてしまえばいいのです。
function enterFrameTicker()
{
rot += 5;
rot %= 360;
//ラジアン角
var rad = rot * Math.PI / 180;
//円運動の計算
var offsetX = centerX + Math.cos(rad) * haba;
var offsetY = cenrerY + Math.sin(rad) * haba;
obj.css({top:offsetY + "px" , left:offsetX + "px"});
/*------------ここからあたり判定の計算開始-------------*/
//あたり判定用の右下座標
var L = offsetX;
var R = L + obj.width();
var T = offsetY;
var B = T + obj.height();
//青いボックスの4点座標を取得
var hitX = parseFloat(hitObj.css("left").replace(/px/ , ""));
var hitY = parseFloat(hitObj.css("top").replace(/px/ , ""));
var hitRight = hitX + hitObj.width();
var hitBottom = hitY + hitObj.height();
//あたり判定の計算
if(L < hitX && hitX < R && T < hitY && hitY < B)
{
$("#disp").text("hit");
}
else if(L < hitRight && hitRight < R && T < hitY && hitY < B)
{
$("#disp").text("hit");
}
else if(L < hitX && hitX < R && T < hitBottom && hitBottom < B)
{
$("#disp").text("hit");
}
else if(L < hitRight && hitRight < R && T < hitBottom && hitBottom < B)
{
$("#disp").text("hit");
}
else
{
$("#disp").text("none");
}
}
途中までは前回と同じ三角関数の円運動です。 コメントで、「 /*------------ここからあたり判定の計算開始-------------*/」 となっているところから見てください。
ここから、回転中の四角形の「LRTB」を取得しています。 LとTは、top、leftから取得できるので簡単ですが、RとBは、そもそも座標としては取得できないので、それぞれ、「R = left + 幅」「B = top + 高さ」で取得します。
次に、マウスについてくる四角形の座標を「hitX hitY hitRight hitBottom」も同じように取得します。
次に先ほどの図の「abcd」の点の座標にそれぞれ合わせると、
aX = hitX; aY = hitY;
bX = hitRight; bY = hitY;
cX = hitX; cY = hitBottom;
dX = hitRight; dY = hitBottom;
となります。 後は、if文で上から、「abcd」の順番で比較していきましょう、どれかに当たれば「hit」それ以外の場合は「none」ということになります。
如何でしょうか、ちょっとややこしいかもしれませんが、 四角形同士の当たり判定を使えば、たとえば簡単なシューティングゲームなんかが作れたりしますね。
河野 義貴
インハウスのFlashクリエイターとして勤務後、2010年独立。一年間のフリーランス期間を経て、2011年9月にスウィーツアンドストリーム株式会社を設立。主にFlash・HTML5を駆使した、PC・スマートフォン向けインタラクティブコンテンツを中心に活動中。マイナビクリエイターセミナーの講師としてもおなじみ。
