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

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

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

Small Basic 入門

29.ふらふらUFOを作ろう その3

 

ふらふらUFOを作ろう その2 ] の続きです。

 

谷と自機の当たり判定

自機が谷の壁に当たったかを判定します。
正確には、自機と重なる四角からはみ出たかを調べます。

 

自機と重なる四角からはみ出したかを調べる

 

プログラムを次のように変更します。

 

谷と自機の当たり判定

 

59-65行目、自機と重なる四角を選び出しています。
重なっていたとき、当たり判定をするサブルーチン hitcheck を呼び出します。
なお、60 行と 62 行は Or を使って1行にできますが
画像におさめるため2行に分けました。

74行目、当たり判定をしています。
正確には、四角からはみ出している場合、当たっていると判断しています。
75-78行目のピンクの部分は、テスト用に追加したものです。
このあと制作を進めていく途中で削除することになります。

 

実行してみてください。
自機が壁に当たると動きが止まります。
ここでスペースキーを押すと、自機が谷の中央に移動してまた動き出します。
そしてこのあと、壁に当たっても止まらなくなります。
(壁に当たる→中央に戻る→壁に当たる→中央に戻る、をくり返します)
これは LastKey が最後に押されたキーをずっと持っているためです
スペースキー以外のキーを押すことで、壁に当たったとき止まるようになります。

 

アクションゲームなど動きが早いときには、プログラムが正しく動いているか
確認するのが困難です。
ピンクの部分のように、確認するための処理も作って、しっかりと動作を確認する
習慣をつけましょう。

 

 

当たり判定のしくみ

当たり判定の If 文をみると、なにを比較しているのか分かりにくいですね。
少しだけ解説します。

今回は2つの比較で当たり判定しています。
1つ目は、自機と重なっている四角を選び出す処理です。
60 行目と 62 行目のことです。

 

次の画像をみてください。
説明のため、自機と四角の大きさは変えてあります。
この場合のポイントは、自機の座標 py と高さを足した座標 py+ph の間に
四角の座標があるのか判断している所です。

 

当たり判定の仕組み

 

四角の座標 vy[i] が間にあるか判断しているのが 60 行目です。
高さを足した座標 vy[i]+20 が間にあるか判断しているのが 62 行目になります。

どちらかの判断文に引っ掛かれば、自機と四角は重なっていることになります。

 

 

2つ目の判定、74 行目を見てみましょう。
自機が四角からはみ出しているか判断する処理です。

こちらはとてもシンプルです。
四角の左端 vx[i] より自機の左端 px左にあればはみ出している
四角の右端 vx[i]+vw より自機の右端 px+pw右にあればはみ出している
と判断します。
どちらかの条件に当てはまればいいので Or を使っている点に注目しましょう。

 

当たり判定のしくみ

 

 

やられ演出を入れよう

自機が壁に当たってやられた演出を入れます。
とりあえず、壁に当たったら画面外へ出て行くという簡単なものを作ります。

 

自機のやられ演出を入れる

 

サブルーチン gameover を作りました。プログラムの一番下に追加しましょう。

76 行目、ここにはスペースバーを押して自機の位置を戻す処理がありました。
それを削除してゲームオーバー処理へ行くようにセットします。

114-116行目、やられ演出として自機を画面外へ移動させています。
114 行目で変数 mcnt を 720 以下としているのは、画面サイズが 640 なので
720 あれば確実に画面外へ出るからです。
制限している理由は、コンピュータに無駄な処理をさせないためです。
無駄な処理をさせると、時として予想もしないバグ(不具合)が出てしまうからです

 

実行してみましょう。
壁に当たると右へ飛んでいきます。

 

壁に当たると画面外へ移動する

 

 

やられ演出をもっと良くしよう

やられ演出が画面外へ移動するだけでは、つまらないですね。
もっとかっこ良くします。
その前に、自機が壁に当たったら右へ移動する仕様ですが、少しまずいです。
もし、画面の右端の近くで接触したら、自機がすぐに見えなくなります。
ここを修正します。
画面の右側で接触したときは左へ、左側のときは右へ飛んでいくようにします。

 

接触した場所により飛んでいく方向を変更する

 

物を動かすとき、右へ移動させるなら座標はプラス方向へ
左へ移動させるなら座標はマイナス方向へ動きます。

変数 vec を作り、1 と -1 に切り替えることで進む向きを変えます。
つまり進む量 mcnt に vec を掛ける訳です。(121行目)

 

実行して、画面の両端で接触テストしてみて下さい。
それぞれ接触位置とは逆の方へ移動すれば成功です。

 

画面端で接触したときの動き

 

 

やられ演出を良くするパート2

次にただ移動するだけでなく、動きに変化を付けます。
割と簡単なのが、三角関数の sin を使った方法です。
三角関数を知らない場合はネットで調べてみましょう。

 

三角関数を使ったやられ演出

 

121行目、Math.Sin を使って sin 波形を取得しています。
パラメータの単位がラジアンなので、円周率 Math.Pi × mcnt / 180 という式になります。
ラジアンを知らない人はネットで調べてみましょう。
122行目、変数 psin をy座標にプラスかマイナスすることで、sin 波形があらわれます。
今回マイナスにしたのは見栄えで選びました。
試しに py+psin に変更して見比べてみてください。

123行目、自機の絵を回転させています。
これをコメントにして実行してみてください。回転していたときとの印象の違いを
見比べてみましょう。

 

sin 波形を付けた動き

 

これでやられた感が出てきました。