これが慣性ドリフトだ！ドリフトアクションゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
この教材は期間限定で無料公開している教材です。
ドラテクを見せつけろ！
今回作るのは、カーゲームです。爽快感のあるドリフトをテーマにしてみました。
回転が関わってくるため、sinやcosといった三角関数が出てきます。数学が苦手な人でも、なんとなく使いこなせるようになりましょう。
サンプルプログラムはこちら。
クミタテ式プログラミングドリルとは？
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。
■[ここからスタート！]setupで画面を表示する
起動時に最初の1回だけ実行するには、setupの枠組みを使いましょう。
■drawで背景の色を変える
drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。
■プレイヤーとなる四角形を表示する
背景の色は変更できましたか？
続けて四角形を1つ表示してみましょう。
■変数を使ってプレイヤーを表示する
四角形を表示できましたか？
変数xとyを作りましょう。xは横の位置のこと、yは縦の位置のことです。
■向きがわかりやすいように、プレイヤーに顔をつける
回転させた時にただの四角形だと前後がわかりづらいので、右向きに顔をつけてみます。
rectModeを使って、四角形の表示位置を調整している点に注意してください。通常は左上から描画しますが、rectMode(CENTER)を使うことで、中心から四角形を描画するようになります。これは回転させた時にうまく動作するようにした配慮です。
■プレイヤーをその場で回転させる（！！！！！ただしうまく動作しない！！！！！）
右向きの顔は描けましたか？
自動的に回転させてみましょう。変数angleを1ずつ加算していき、度数をラジアン値に変換してから回転させます。回転させるにはrotate命令を使いましょう。
ただし、この例ではうまく動作しません。その場で回転させたい場合、ひと工夫が必要です。次の項で解決します。
■回転軸を、プレイヤー中央にする
前項ではその場で回転させようとしてもうまく動作しませんでした。理由は、回転軸にあります。
回転軸はデフォルトで画面左上に設定されているので、translateを使って回転軸をプレイヤーの位置に設定します。
また、これがまたやっかいなのですが、translateを使った場合、プレイヤーの位置などは0に設定してあげる必要があります。回転軸を変えた影響で、プレイヤーの表示軸も変わったことが原因です。
■左右キーで回転させ、キーが離されたら回転を止める
プレイヤーがその場で回転するようになりましたか？
次は、左右キーを使って回転させましょう。キーが離されたときは回転をとめるようにします。
■プレイヤーが向いている方向に進むようにする
左右キーで回転するようになりましたか？
次はプレイヤーの向いている方向に進むようにします。ここで三角関数sin、cosが登場します。sin、cosは、要は、回転度合いによって-1〜1の範囲で変動してくれるものと思っておけば良いでしょう。
■慣性の法則をつけてドリフトさせる
向いている方向に進むようになりましたか？
次はいよいよドリフトです。方向転換した際に、すぐに方向転換するのではなく、慣性の法則をつけてドリフトさせます。そのため、進む力を加算させていく変数dxとdyを設けて、三角関数と絡めます。
加速がつきすぎてしまうので0.1をかけて調整しています。
■オリジナル命令getClampでスピードが出過ぎてしまうのを防ぐ
ドリフトはできましたか？
ただ、スピードが出過ぎてしまって操作感に難がありますね。
次はスピードに上限を設けてあげましょう。getClampというオリジナルの命令を作って、スピード上限をしてあげます。
スピードは-3から3の間で収まるようにしてあげます。
ここから先は応用課題として、クミタテ式の設計図はありません。自分でアルゴリズムを考えて、プログラムコードにしてみましょう。
応用課題1. 回転速度を調整しよう
回転が遅すぎるとドリフトが間に合いません。回転速度をアップしましょう。
応用課題2. コインを取るようにしよう
ドリフトの操作感を使って具体的にゲームにしてあげます。
ここではコインを出現させてコインを取るゲームにしてみましょう。
ただ、プレイヤーは回転しているため通常の当たり判定は使えません。当たり判定をする際は、プレイヤーも円として認識さえて、円と円の当たり判定で簡略化しましょう。
- 円と円の当たり判定 -
プレイヤーの中心とコインの中心との距離が、
プレイヤーの円の半径とコインの円の半径を足した数より低ければ当たっているとみなせます。
動画で復習する
YouTubeチャンネルで詳細丁寧に解説しています！
この記事が気に入ったらサポートをしてみませんか？