ボタンに強弱をつける、ジャンプ力をコントロールできるアクションゲームを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)
- ボタンを押す強さでジャンプ力を変える
今回作るのは、ジャンプ力をコントロールできるアクションゲームです。
ジャンプボタンを押す強さでジャンプ力をコントロールします。
実際には押す強さではなく、押している長さでコントロールしますが、プレイヤー目線では強弱で感じやすく、ゲームへの没入感を増幅させる効果があります。
また、1ボタンで小〜大ジャンプにコントロールできるため、ボタンを増やさずにテクニックの幅を広げられる利点もあります。
デモアプリはこちらから。https://openprocessing.org/sketch/1464740
Unity版もあります。https://unityroom.com/games/tower_man
今回はジャンプの強弱にポイントを絞って解説していきます。
- クミタテ式プログラミングドリルとは？
クミタテ式は英語のコードを、日本語で書かれた図解を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、プログラミング教材です。
プログラミング的思考を学ぶよりも、コードの書き方を優先的に学習することを目的としています。
- 動画を見ながら学習する
動画と並行しながら学習するとより効率的に学習できるようになっています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。
■[ここからスタート！]画面を表示する
ゲーム画面のベースを作っていきましょう。
■プレイヤーとなる四角形を1つ表示する
(300, 200)の固定の位置に四角形を表示します。
■変数を使ってプレイヤーを表示する
(300, 200)の位置情報を、変数xとyを使って管理します。
■プレイヤーが落下するようにする
変数を用意したことにより、プレイヤーを動かせるようになりました。
プレイヤーを自動的に下方向に落下させましょう。
■プレイヤーを着地させる
プレイヤーがどこまでも落下してしまうのを防ぐために、画面の下部で着地させます。
■加速度を使って自然な落下にする
プレイヤーの落下を作りましたがなんだか不自然ですね。不自然なのは加速度がないためです。
落下スピードが徐々に加速するようにするため、加速度を管理する変数dxを用意しましょう。
■マウスクリックでジャンプさせる
マウスがクリックされた瞬間を受け取って、加速度をマイナスの数値にすることでジャンプが実現できます。
■（今回のポイント！）マウスが離されたら加速度を減らす
マウスが離された瞬間に、加速度を半分にします。
これによって、マウスを素早く離したときにジャンプ力を制限することができるようになります。
今回は、ジャンプ後にジャンプ力を調整するというアルゴリズムにしました。簡易的ではありますが、シンプルで違和感のないアルゴリズムです。
なお、スマブラなどでは、ジャンプボタンを押している時間を3フレームほどカウントしてジャンプ力の強弱をつけているようにしているようです。
■ジャンプ中のときだけ、加速度を減らす
加速度を半分にしましたがこれではバグがあります。
ジャンプが頂点に達して、落下中にマウスを離すと落下の加速度も半分になってしまいます。
落下中は半分にせず、上昇しているジャンプ中のときだけ加速度を半分にします。
クミタテ式の設計図はここまでです。以下の応用課題は自分で考えてプログラミングしてみましょう。
■課題1. プレイヤーが自動的に横に往復移動するようにしよう
縦の移動だけでなく、横にも移動するようにします。
「自動的に横に移動し、画面の端で逆側に向かって移動する」をプログラムしましょう。
画面からはみ出さないようにするには、constrainという命令を使うと制御が簡単になります。チャレンジしてみましょう。
参考：https://p5js.org/reference/#/p5/constrain
■課題2.二段ジャンプを防ごう
今のままでは二段ジャンプが使えてしまいます。せっかく、ジャンプに強弱がつけられるようになったのに二段ジャンプができてしまってはジャンプの強弱が活かしづらくなります。
■課題3.オリジナルのゲームに仕上げよう
強弱のつけられるジャンプを活用できるオリジナルゲームに仕上げましょう。
今回のこの仕組みのポイントは、低く飛べるし高くも飛べる、です。
低く飛ばないといけないシチュエーション、高く飛ばないといけないシチュエーションを混合させたゲームシステム、
あるいは、高くジャンプをするとポイントが高いがリスクが伴う、というリスク&リターンのゲームシステムに仕上げると良いでしょう。
（有料エリア）本日の教材の最終プログラムコード
課題2までの2段ジャンプを防ぐ方法までのコードを掲載しています。
ここから先は
¥ 100
この記事が気に入ったらチップで応援してみませんか？