初心者のためのゲームプログラミング入門

プログラミングとゲームの杜

初心者のためのプログラミング入門 & ゲームプログラムの作り方入門

Small Basic 入門

16.すべて拾い集めようゲームを作ろう その3

 

すべて拾い集めようゲームを作ろう その2 ] の続きです。

 

当たり判定のしくみ

四角とマウスカーソルの当たり判定を作る前に、しくみについて説明します。
昔からよく使われる方法です。
まず、次のサンプルを実行してマウスを動かしてみましょう。

 

ポピュラーな当たり判定のしくみ

 

サンプルを作成中のゲームに似せて作りました。
理解できない所があったなら、前のページを読み返してください。

当たり判定を行っている所は、10行目と13行目です。
10行目でx軸の当たりを、13行目でy軸の当たりを見ています。

 

 

x軸の場合を見てみましょう。
変数 px にはマウスカーソルのx座標が入ってます。
四角はx座標 100 の位置に表示しているので、
カーソル座標がが 100 より大きく、100+50 より小さければx範囲内となります。
なお +50 は四角の幅です。

 

当たり判定の仕組みとは

And を使って (100 < px) と (100+50 > px) の両方が成立しているときのみ
Then のあとの処理が行われるようにしています。
両方が成立している、つまり、赤いエリアの中にカーソルがあると判断できるのです。

 

実際にはx軸の判定とy軸の判定の両方が成立したときのみ、
「四角に当たっている」と判断します。

 

 

当たり判定を組み込もう

それでは当たり判定をゲームプログラムに組み込んでみましょう。
プログラムが長くなったので、OnMouseMove サブルーチンのみ表示しています。

 

四角を見る当たり判定の作り方

 

30行目、For 文を15回まわして、すべての四角をチェックします。
31行目、x軸の当たり判定。+20は四角の横幅です。
32行目、y軸の当たり判定。+20は四角の高さです。
33行目、2つの条件に当てはまったとき、タイトルに「当たり」を表示します。

実行したら四角にマウスカーソルを重ねて、当たり判定が正しく動いているか
チェックしましょう。

 

 

四角を消そう

当たり判定の中で、四角を消します。

 

当たった四角を消す

 

34行目、Shapes.Remove で四角を消します。
35行目、x軸の情報を書き換えています。大きな数を入れることで
次回のチェック時に判定から外します
試しに35行目をコメントにして実行してみて下さい。
四角が消えているのに当たり条件のみ残った状態になり、四角のあった場所に
カーソルを重ねると「当たり」が表示されます。

 

 

すべて拾ったあと

すべての四角を拾ったらゲーム終了としたいので、その処理を作ります。
拾った個数をカウントして、表示した数と同じになれば「すべて拾った」と判断します。

 

すべての四角を拾ったか調べる

 

38行目、四角を消すタイミングで拾った個数をカウントします。
43行目以降、表示した数 15 と同じのとき「すべて拾った」と表示します。

 

 

無駄な処理はしないように

すべての四角を拾ったあと、マウスカーソルを動かしてみて下さい。
タイトル表示がちらちらしているのが分かりますか?
これは 29 行目の px,py 座標表示と 44 行目の「すべて拾った」表示が交互に
行われているからです。

サブルーチン OnMouseMove 内の処理は、ゲーム中のときだけ必要で
始める前や終了後は必要ありません。
これをゲーム中のときだけ処理されるように変更します。

 

無駄な処理はしないで切り替える

 

変数 state を使って、wait(準備中)と play(プレイ中)を切り替えています。
四角を表示して準備がおわったあと、25 行目でプレイ中にしています。
準備中のときは 29 行目の判断文に引っかかり、30 行から 54 行へジャンプします。
54行目はラベルです。
すべて拾ったあとは 52 行目で準備中に戻しています。

 

今回の変更は無意味のように思えるかもしれません。
ですが、使わない処理はできるだけ動かさないようにプログラミングすることは
重要です。
プログラムが大きくなってくると、バグ(不具合)が発生し易くなります。
そのリスクを減らす意味もあるのです。