2D当たり判定超入門この講演の対象者 • これからゲームを作ろうとしてるプログラマ – 当たり判定の実装とコツを学べるかも？ • プログラマ以外のゲーム制作者 – 当たり判定がどうなってるか何となく理解できる – バグも見つけやすくなるかも？ • すでに経験のある人 – かなり入門的なんで暇かも超基本円の当たり判定弾とキャラクターの衝突などに使う弾とキャラクターの衝突などに使う円の交差判定方法は？ • 円Ａの中心から円Ｂの中心までの距離が、円Ａと円Ｂの半径より小さければ交差している • 円の中心同士の距離は、ピタゴラスの定理（三平方の定理）を使う。三平方の定理ＣＢＡＡの２乗＋Ｂの２乗＝Ｃの２乗こんなイメージ半径の和＜斜辺 ⇒ 交差していない半径の和＞斜辺 ⇒ 交差している計算式 (cx1‐cx2)^2 + (cy1‐cy2)^2 ≦ (r1+r2)^2 • 左辺が円の中心同士の距離の２乗 • 右辺は２つの円の、半径の和の２乗 • ２乗してるのは、左辺をsqrt(平方根) するよりも右辺を２乗するほうが高速なため点と円 (px‐cx)^2 + (py‐cy)^2 ≦ r^2 （点のＸ座標－円の中心Ｘ座標）の2乗＋（点のＹ座標－円の中心Ｙ座標）の2乗 ≦ 円の半径の2乗片方が半径０の円になったようなもの。さっきの内容が分かっていれば非常に単純こんなイメージ円の半径＜斜辺 ⇒ 交差していない円の半径＞斜辺 ⇒ 交差している矩形の当たり判定弾とキャラクターの衝突などに使う (0, 0) (640, 0) (0, 480) (640, 480) ※左上を(0, 0)とするスクリーン座標で矩形０の左＜矩形１の右かつ矩形０の上＜矩形１の下かつ矩形０の右＞矩形１の左かつ矩形０の下＞矩形１の上矩形０・矩形１の衝突判定式 Left0 < right1 && top0 < bottom1 && right0 > left1 && bottom0 > top1 矩形の当たり判定 • 比較演算だけなのでかなり高速 • だいたい、以下の２つのパターンが多い – 左, 上, 右, 下でデータを持つ – 左, 上, 幅, 高さでデータを持つ • 簡単なゲームならこれだけで充分超基本終了 • ここまでに説明した判定処理だけでも、２Ｄゲームは充分作れます。 • まずは作ってみて、どうしても複雑なことがしたくなったら、別の判定方法を勉強しましょう。ベクトルの利用ベクトルを使うと何ができる？ • アクションゲームを簡単に作れます • ２Ｄゲームであれば、前述の円・矩形の判定と、ベクトルさえ分かっていればほとんどのゲームを作れますその前にベクトルのおさらい（分かる人は飛ばして下さい）ベクトルとは？ • 大きさと方向を持った、線みたいなもの • 2次元ベクトルなら、(X方向, Y方向）で方向を、表す • ベクトルＡは、Ａと表現することが多い • ベクトルＡの大きさは、|Ａ| のように表現 ※本資料では、上の矢印は省略しています（ＰＣ上だといちいち書くのが面倒なので） 2次元ベクトルの例 ※左上（０，０）を正とするスクリーン座標系（5, 10）（10, 0）（‐10, 10）（‐5, ‐5）ベクトルの大きさ • 三平方の定理を使う。 • 斜辺の長さ＝ベクトルの大きさベクトルＡ＝（４，３）なら、大きさは５５３４単位ベクトル • 大きさが１のベクトルを、単位ベクトルと呼ぶ • ベクトルの各成分（2次元ならX, Y）を、そのベクトルの大きさで割ると単位ベクトルが算出される • 大きさが０のベクトルを、ゼロベクトルと呼ぶ（3，4）のベクトルなら、単位ベクトルは（3÷5，4÷5）＝（0.6，0.8）ベクトル同士の加減算 • ベクトル同士の加減算は、それぞれの成分同士で行われる（1，2）＋（3，5）＝（1＋3, 2＋5）＝（4，7）（5，4）－（5，2）＝（5－5, 4－2）＝（0，2）ベクトルに通常の数を掛ける • ベクトルに通常の数を掛ける場合は、各成分にその値を掛ける（1，2） × （5，2）＝（1＊5, 2＊2）＝（5, 4）内積（ドット積）の公式 • ベクトルＡ（x0, y0）と、ベクトルＢ（x1, y1）の内積（Ａ・Ｂ）は、Ａ・Ｂ＝ x0＊y0 ＋ x1＊y1 ＝ |A||B| Cosθ 外積（クロス積）の公式 • ベクトルＡ（x0, y0）と、ベクトルＢ（x1, y1）の外積（Ａ×Ｂ）は、Ａ×Ｂ＝ x0＊y1 － x1＊y0 ＝ |A||B| Sinθ この図を覚えてください！ |A| |A|Sinθ θ |A|Cosθ ２Dゲームではこれだけ覚えておけば充分です内積・外積の公式を変形させて使います DirectXでは？ • D3DXVECTOR2 という、2次元ベクトルを表す構造体が用意されている // (10, 20) のベクトルインスタンスを生成 D3DXVECTOR2 vec(10, 20); // 大きさを算出 float length = sqrt(vec.x*vec.x + vec.y*vec.y); // ヘルパ関数を使う場合 float length = D3DXVec2Length(&vec); DirectXでは？（内積・外積） D3DXVECTOR2 vec0, vec1; // 内積 float dot = vec0.x*vec1.x + vec0.y * vec1.y; // ヘルパ関数を使う場合 float dot = D3DXVec2Dot (&vec0, &vec1); // 外積 float cross = vec0.x*vec1.y – vec1.x * vec0.y; ここからベクトル利用法開始点と線分の距離レーザーとの衝突判定や地形にめり込んだ際の押し出し距離に使うこの距離だけ左に押し戻す地形にめり込んだ際の押し出し距離押し出す場合は、押し出す距離 × 押し出す方向の単位ベクトルで、X, Y それぞれの方向の押し出し量が算出されるこの距離だけ斜面のベクトルを90度反時計回りさせた方向に押し戻す１．点と直線の距離 • ２点A・Bを通る直線と点Pの距離を出す • 点線の部分が距離 ⇒Ｓｉｎなので外積を使うＰ |AP|Sinθ θ ＡＢベクトルAP とベクトル ABの外積は、 AP×AB = AP_X＊AB_Y – AB_X＊AP_Y = |AP||AB| Sinθ 点線部は、APとABの外積 ÷ ABの大きさ |AP||AB| Sinθ ÷ |AB| Ｐ |AP|Sinθ θ ＡＢプログラムだとこんな感じ // 線分のベクトル D3DXVECTOR2 ap(px – ax, py – ay); D3DXVECTOR2 ab(bx – ax, by – ay); // 外積 float cross = ap.x＊ ab.y – ab.x ＊ ap.y; // A == B だと、0除算になるので注意 float result = fabs(cross) / D3DXVec2Length(ab); ２．点と線分の距離 • このような場合には、前述の方法でいいがＰＡＢ２．点と線分の距離（２） • このような場合、点と線分の距離は点線ではなくAPであるＰＡＢ • PがABの範囲内かどうかで場合分けが必要 • Cosθ > 0 なら、点Ｐは点Ａの右側にある • Cosθ < 0 なら、点Ｐは点Ａの左側にある ※ Ｂについても同様の判定を行うことＰＡ θ |AP|Cosθ ⇒Cosなので内積を使うベクトルAP とベクトル ABの内積は、 AP・AB ＝ AP_X＊AB_X ＋ AP_Y＊AB_Y ＝ |AP||AB| Cosθ |AP|, |AB| は正なので、内積の結果が負なら、点Ｐは点Ａより左側である。（コサイン（Cos）は、90度～270度が負）ＰＡ θ |AP|Cosθ 負Ｂ正レーザーと円の当たり判定 1. レーザーを線分として、円の中点との距離を出す 2. 距離からレーザーの厚みと円の半径を引いて、その値が０以下なら衝突している斜面に立つ斜面に立つ • 外積を使うのが簡単 • 点線部を外積で算出し、キャラクターをその高さに合わせる（ＡＢのＹ座標に加算）Ｐ θ ＡＢ斜面はめんどくさい！ • 低い等身の自機を扱う場合、ギリギリに立てないとプレイヤーが違和感を感じる • しかし斜面では、体の中央に高さを合わせないと違和感がある • 平面から歩行して斜面にさしかかった場合、下が穴か斜面かで判定を分けなければならない ○ × 点がベクトルのどちら側にあるか地形にめり込んでいるかどうか調べる • このようにベクトルで地形を保持している場合、ベクトルの右側ならめり込んでいる地形にめり込んでいるかどうか調べる点が線分のどちら側にあるか AP と ABの外積＝ |AP||AB| Sinθ を利用 • Sinθ > 0 なら、点ＰはABの左側にある • Sinθ < 0 なら、点ＰはABの右側にある（サイン（Sin)は、１８０度～３６０度が負）正Ｐ負 |AP|Sinθ θ ＡＢ線分同士の交差例えば、すり抜け防止などに使える今までの、矩形や円の判定だと、弾が早すぎたり、敵が小さすぎたりしてすり抜けることもある直前のフレーム現在のフレーム直前の位置と現在の位置を結ぶ直前座標から現在座標へのベクトルで交差判定１. 線分が交差しているかどうか • 線分が交差している場合は、互いの線分が、線分の左右に端点を持つ状態である端点が同じ側にあれば交差していない４つの端点に対して、線分のどちら側にあるのかを判定すればいい • 線分ＡＢと線分ＣＤなら、 (AB×AC )＊ (AB × AD) <= 0.0 && (CD ×CA) ＊(CD × CB ) <= 0.0 • 左右にあれば、外積のどちらかは正でどちらかは負なので、積が0以下になる。２. 線分が交差する場合の交差座標 • 線分ＡＢの、①：②の比がわかれば、交点の座標が算出できる。交点＝Ａ＋ベクトルＡＢ＊① / (①＋②) Ａ ① ＣＤ ② Ｂ外積を使って比を算出 ①：② ＝ＣＡとＣＤの外積：ＣＢとＣＤの外積Ａ ① ＣＤ ② Ｂ計算方法については終わり • 楕円や多角形、軸平行でない四角形などもあるが、複雑なのでここでは割愛。 • どうしても必要になったら以下のサイトなどで調べて下さい。 • 使わなくても割となんとかなります。 • ○×（まるぺけ）つくろーどっとコム – http://marupeke296.com/ ケーススタディケーススタディ • 自分がアクションゲームを作った際の一例 • このやり方が正解とは限りませんので、自分なりのやり方があればそれでかまいません • 完全に我流なので、もしかしたらm9(^Д^)ﾌﾟｷﾞｬｰなやり方かも • 参考にする程度でいいです画像に当たり判定をセットすると楽 • キャラクターや弾のクラスではなく、画像クラスが当たり判定を保持している同じキャラでも画像によって異なる判定 • 緑色の判定に当たったら、弾を防ぐ • 赤色の判定に当たったらダメージ • 弾を撃っているときは、弾を防ぐ用の緑色の判定が無いプレイヤーの近接攻撃を画像から取得 • 緑色の部分が攻撃判定 • 赤色の部分が当たり判定開発中の凡ミスとか（１） • 左右反転時に、当たり判定も反転させるのを忘れていた ↓ こんな感じに・・・開発中の凡ミスとか（２） • スライディング時と通常時の当たり判定が違っててすり抜けた立ち状態で壁ギリギリに居て、スライディングしたらすり抜けた開発中の凡ミスとか（３） • ギリギリで垂直ジャンプしたら上の足場に乗ってしまった • 右辺のX座標＝上辺右端のX座標なため、引っかかってしまったのが原因立ち状態で壁ギリギリに居て、ジャンプしたら乗ってしまった開発中の凡ミスとか（４） • 押し出し時の処理を、自機の座標に加算して押し出し続けていたら、float の演算誤差ですり抜けてしまった • 押し出し処理は、加算するのでなく壁の位置に合わせてセットしたほうがいい関連書籍 • ゲーム開発のための数学・物理学入門 • ゲームで使いそうな、高校レベルの数学、物理学の基礎を扱う • リファレンスとして使いやすい構成の本。持っていると便利。 • 各項には公式の簡単な説明＋ソースコード例が書いてある。 • いちいちポンド、ヤードなどから、メートル,グラム法に単位を直しているのが分かりづらくて難ゲームプログラミングのためのリアルタイム衝突判定 • • • • 上級者向け本格的に衝突判定を学びたいならオススメただ・・・高い。 8,400円する学生は学校の図書館にリクエストだ！ DirectX入門書 • マスタリングDirectXプログラミング • DirectX ゲームグラフィックスプログラミング • DirectX の入門書ならこの2冊が分かりやすくてオススメ • シューティングゲームプログラミング • ウインドウの生成、DirectX の初期化、キー入力、サウンド再生、タスク処理など、一通りの処理が実装されている。 • この本のソースコードを読んで理解するだけで、ある程度簡単なゲームなら作れる。 • 初めて作る人は目を通してみては • シューティングゲームアルゴリズムマニアックス • 時期狙い弾、N‐WAY弾、分裂弾・・・と、STG のアルゴリズムを色々扱っている。 • シューティング作ってみたい人は読んでみるといいかも。 • この著者もこの辺まではまともに本を書いていますね・・・ • アクションゲームアルゴリズムマニアックス • アクションゲームの資料は少ないから期待して買ったわけですが・・・ • 正直ひどい。即投げ捨てたくなった。 • 色々な2Dアクションの「○○っぽい動作」を実装しているが、フラグや計算が異なるだけで似たような処理の連続。ソースだらけのページ稼ぎ。 • 汎用的な書き方もできてないので使いづらい • 弾幕最強のシューティングゲームを作る! • 「○○な感じの弾幕」を延々と載せてある構成の本。 • 弾幕ゲーを作ってみたい人は読んでみてもいいかも使用した素材 • 当たり判定の説明時に扱った画像は、サークル様の許可を得た上で使用しております。 • 湍（サークル新雅） • The Idol MegaM@ster（サークルGAPCOM）