[ゲーム制作]足場が動くアクションゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)
- 定番のステージギミック
今回作るのは、アクションゲームに使えるギミック、上下に動く足場です。
配列などは使わず、繰り返し処理と三角関数でのみ実現しています。
アクションゲームの定番ステージギミックです。
デモアプリはこちらから。https://openprocessing.org/sketch/1483538
UnityRoom版はこちらから。https://unityroom.com/games/stepman
- クミタテ式プログラミングドリルとは？
クミタテ式は英語のコードを、日本語で書かれた図解を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習する、プログラミング教材です。
プログラミング的思考を学ぶよりも、コードの書き方を優先的に学習することを目的としています。
- 動画を見ながら学習する
動画と並行しながら学習するとより効率的に学習できるようになっています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。
■[ここからスタート！]画面のサイズを決める
画面サイズを600x400の固定サイズにしましょう。
■背景を黄色で塗りつぶし続ける
drawの中で背景を塗りつぶし続けることでアニメーションの基礎が出来上がります。
■オレンジの足場を、とりあえず1つだけ表示する
足場は4つ作りますが、まずは1つだけ足場を表示してみましょう。
■足場を4つ、とりあえず同じ場所に重ねて表示する
繰り返し処理を使って足場を4つ作ります。
繰り返し処理は難しいので、まずは同じ場所に重ねて表示します。
■4つの足場を横にずらして表示する
繰り返し処理の枠組みの中では、変数「i」が使えます。
変数「i」は0〜3の間で、繰り返すたびに1つずつ増えていきます。
その性質を使って足場の位置を150ずつ横にずらしていきます。
■4つの足場を縦にずらして表示する
続いて、足場を縦にもずらしていきましょう。
ここで登場するのが三角関数sinです。sinは0からはじまり、-1から1の範囲で値を作ってくれる便利な関数です。
この性質を使って縦に少しずつずらしていきます。
■[今回のポイント]4つの足場が縦に移動するようにする
時間を管理する変数「t」を用意し、sin波を発生させます。
■プレイヤーとなる四角形を表示する
いよいよプレイヤーを表示します。
プレイヤーの座標を管理する変数「myX」と「myY」を用意し、青色の四角形をプレイヤーとして表示します。
■プレイヤーを落下させる
プレイヤーの移動量を管理する変数「myDx」と「myDy」を用意します。
myDyについては自動的に1ずつ加算して重力を与えます。
■当たり判定アルゴリズムを用意する
足場の上にプレイヤーが立てるように当たり判定を作ります。
ここでは「isHit」というオリジナルの命令にしてアルゴリズムを組み立てます。
isHitにはプレイヤーの情報4つ、足場の情報4つの、計8つの情報を引数パラメーターとして渡せるようにし、当たっていれば1を返す（return）ようにプログラムします。
- 四角形同士の当たり判定のアルゴリズム -
1. プレイヤーの左側が、足場の右側より、左にある。
2. プレイヤーの右側が、足場の左側より、右にある。
3. プレイヤーの上側が、足場の下側より、上にある。
4. プレイヤーの下側が、足場の上側より、下にある。
上記4つの条件が全て揃ったとき、当たっているとみなせます。
ちなみに僕は、「左が左にある、右が右にある、上が上にある、下が下にある」と覚えています。
■当たり判定を使って、動く足場に着地する
プレイヤーが足場に当たった時、プレイヤーのY座標を自然な位置に調整します。
足場の上に着地しているように見せるため、足場のY座標からプレイヤーの高さ分の30を差し引いて調整しています。
クミタテ式の設計図はここまでです。以下の応用課題は自分で考えてプログラミングしてみましょう。
課題1. 上キーでジャンプできるようにしよう
上キーでジャンプできるようにしたいのですが、このままではジャンプがうまく動作しない場合があります。足場の上では当たり判定が常に働いてしまい、ジャンプ移動量が0にリセットされてしまうからです。
落下中での当たり判定を有効にすることで、ジャンプができるようになる他、プレイヤーの頭が足場に当たっただけで着地になってしまうバグも防げます。
課題2. 左右キーで横に移動できるようにしよう
同時にキーが離されたら横の移動量もリセットして横移動が止まるようにしてあげましょう。
課題3. オリジナルゲームに仕上げよう
この動く足場を利用してオリジナルゲームにカスタマイズしてください。以下は参考です。
今回のデモゲームでは、セーフな床と危ない床とが交互に入れ替わることでゲーム性を持たせました。また、それだけでは避けるだけのゲームになってしまい、プレイヤーにとっては目的がわかりづらいゲームになってしまうので、コインを登場させてポジティブな目的を作りました。
- オリジナルゲームへのヒント -
この動く足場のギミックのゲーム性のポイントは「次の足場へのジャンプタイミングを見計る」「タイミングを見計ろうにも同じ足場に長く居座ると危険」ということでしょう。この抽象概念を、うまく具体的なゲームデザインに落とし込めば良さそうです。
・一定の高さを上回る or 下回ると危険な床になる
・画面の上部、下部に触れるとゲームオーバーになる
・足場が攻撃してきて、どんどん先に進んだほうが良いようにする
・プレイヤーを動かすのではなく、足場を動かす逆転
（有料）本日のコード
課題2までのコードを掲載しておきます。
この教材が役立ったら寄付感覚でご購入をお願いします。
ここから先は
¥ 100
この記事が気に入ったらチップで応援してみませんか？