ゲーム開発入門② 座標と当たり判定を理解しよう

キャラクターを動かしたり、アイテムを取ったりするには、画面上の位置を数値で扱います。

この記事では、2Dゲームの座標と、四角形同士が重なったかを調べる方法を扱います。繰り返し処理の流れはゲームループの記事で確認できます。

XとYで位置を表す

2D画面では、横方向をX、縦方向をYで表すのが一般的です。

多くのゲーム画面では左上が(0, 0)です。右へ進むとXが増え、下へ進むとYが増えます。ただし、使うエンジンや座標系によって向きは異なるため、最初に確認してください。

右へ移動: x = x + speed
左へ移動: x = x - speed
下へ移動: y = y + speed
上へ移動: y = y - speed

画像には幅と高さがあります。四角形として考えると、次の4つの値で範囲を表せます。

この見えない判定用の形は、コライダーやヒットボックスと呼ばれることがあります。

軸に平行な四角形同士の判定は、次の関数で表せます。

function isHit(a, b) {
  return (
    a.x < b.x + b.width &&
    a.x + a.width > b.x &&
    a.y < b.y + b.height &&
    a.y + a.height > b.y
  );
}

4つの条件は、左右と上下の範囲がどちらも重なっているかを調べています。この方法はAABB判定と呼ばれます。

画像の透明な部分まで大きな四角形に含めると、「まだ触れていないのに当たった」と感じることがあります。

その場合は、画像より少し小さい判定用の四角形を用意します。見た目の座標と判定の座標を完全に同じものとして扱わないことが、自然な操作感につながります。

当たり判定は、重なったかどうかをtrueまたはfalseで返します。

if (isHit(player, coin)) {
  score += 10;
  coin.visible = false;
}

コインを非表示にしないと、重なっている間は毎フレーム得点が増えることがあります。「1回だけ起こす処理」になっているか確認しましょう。

プレイヤーのxが40、widthが32のとき、右端のX座標はいくつでしょうか。

40 + 32 = 72

右端のX座標は72です。

左端の位置へ横幅を足すと右端になります。当たり判定では、相手の左端と自分の右端を比べることで、横方向の重なりを調べます。