当たり判定は触れたかを数で調べる
当たり判定(衝突判定)は、2つのものが触れているかを、数で調べる方法です。星を受け止めたか、敵に当たったかを、ゲームは毎フレームこの判定で決めます。
絵を見て決めるのではなく、位置と大きさの数を比べます。
このレッスンのゴール
メモ
2つのものが当たっているかを、数を比べて判定できる。
重要な言葉
| ことば | いみ |
|---|---|
| 当たり判定 | 2つのものが触れているかを調べること |
| 矩形 | 縦と横の辺が、画面の軸に沿った長方形 |
| 半径 | 円の中心から、ふちまでの長さ |
| 距離 | 2つの点のあいだの長さ |
| 境界ボックス | ものを囲む、いちばん小さな矩形 |
学生が入力するセルは、このプレビューでは空白です。
矩形は横と縦の両方が重なると当たり
2つの矩形は、横も縦も重なっているとき、当たっています。横が重なるとは、それぞれが、相手の終わりより前に始まることです。
辺がぴったり触れるだけのときは、ラボのゲームでは、当たっていないとして扱います。
例: 星と箱の当たり判定
<p id="out"></p>
例: 6組の矩形の結果
| 2つの矩形 | 当たり |
|---|---|
| 離れている | 当たらない |
| 重なっている | 当たる |
| 辺だけ触れている | 当たらない |
| 一方が、もう一方の中にある | 当たる |
| 同じ列で、縦に離れている | 当たらない |
| 角が少し入っている | 当たる |
学生が入力するセルは、このプレビューでは空白です。
ラボで、同じ判定を確かめる
ラボのスクリプト collide.py は、同じ判定を Python で書き、6組に使います。スクリプトが出す言葉は英語です。
apart: False のように、組の名前と True か False が1行ずつ出ます。結果は、上の表と同じになります。
6組の矩形を判定する
docker exec jupyter python3 steps/collide.pyここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
円は中心の距離で判定する
ボールのように丸いものは、円で調べます。2つの円は、中心の距離が、半径の和より短いとき、当たっています。
平方根を避けるため、距離の2乗と、半径の和の2乗を比べます。なお、ラボのゲームに円はありません。これはこのレッスンの例です。
例: 半径5の円の判定
| もう一方の中心のずれ | 距離の2乗 | 半径の和の2乗 | 当たり |
|---|---|---|---|
| 横3、縦4 | 25 | 100 | 当たる |
| 横0、縦9 | 81 | 100 | 当たる |
| 横6、縦8 | 100 | 100 | 当たらない |
| 横10、縦10 | 200 | 100 | 当たらない |
学生が入力するセルは、このプレビューでは空白です。
例: 円と円の判定
<p id="out"></p>
よくある間違い
注意
丸いものにも、矩形の判定をそのまま使えばよいと考える人がいます。矩形には角があるので、円のはしの何もない場所でも、当たりになります。丸いものには、円の判定を使います。
全部の星を調べて、当たった星を消す
ゲームは、毎フレーム、すべての星を箱と比べます。ラボのゲームは、星のリストを、うしろから順に調べます。
当たった星を splice で取り除いても、まだ調べていない星の番号が、ずれないからです。
星を取り除く行を探す
docker exec jupyter grep -n splice game/game.jsここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。