アクションゲームでは当然ながらキャラクターを操作することができなければいけません。左右の移動やジャンプ、敵への攻撃などの動きが必要になってきます。
そこで今回からScratchで作るアクションゲームに必要なテクニックを複数の記事で紹介していきます。
まずは、キャラクターのジャンプと地面に着地する部分のプログラミングについて紹介します。
特に地面に着地する部分は、地面にめり込むのをどうにかしたいと悩んでしまうことが多いのではないかと思います。
地面にめり込ませないようにピタッと着地させる方法についても分かります。
この記事を読んでいただくと、アクションゲームでキャラクターをジャンプさせる方法と地面にめり込まないように着地させるプログラミングの方法が分かります。
なお、この記事で使用しているスプライト（キャラクター・背景・オブジェクト・音声など）はすべてパブリックドメインの無料の素材をダウンロードして使用しています。
アクションゲームとは、コンピューターゲームのジャンルの1つで、キャラクターをボタンやレバーなどで操作してステージを次々にクリアしたり、勝敗や得点を競うタイプのゲームのこと。反射神経と瞬間的な判断力を競うゲーム。
完成品
この章の内容をご自身のScratch環境に反映すれば、同じ動きを再現することができます。
完成した動き
上矢印キーを押すと、キャラクターがジャンプします。上矢印キーを押し続けると「着地したらすぐにジャンプする」を続ける仕様になっています。
着地は地面でピタッと止めています。
使用したスプライト
スプライトは「キャラ１」「地面１」「背景１」「天気１」の4つです。
アクションゲーム用の背景・キャラクター・アイテム等の画像や音声は、パブリックドメインである「スーパーパワーアセットパック（CC0）のprehistoric-platformer」を使っています。
【キャラ１のスプライト】
「キャラ１」スプライトは、「egg-shell.png」ファイルを使用しています。
元々の画像ファイル「egg-shell.png」は、下の図のように縦7行×横6列のキャラクター画像の集まりになっているので等間隔で分割してからコスチュームにアップロードする必要があります。
分割するためには、Windowsであれば「PL_ImageConstructor」などのフリーソフトで可能です。
分割した画像を下の図のようにそれぞれの動作パターンごとにグルーピングして、別々の定義ブロックにまとめます（「歩く」定義ブロックなど）。
【地面１のスプライト】
「地面１」スプライトは、 「prehistoric-platformer\background-elements」フォルダに入っている「tileset-1.png」ファイルを使用しています。
元々の画像ファイル「tileset-1.png」は、下の図のように16×16ピクセルのマップチップ（タイル画像）の集まりになっているので、分割して再構成してサイズを480×360ピクセルに調整してからコスチュームにアップロードする必要があります。
マップチップの編集には、「Tiled」というフリーソフトを使用して16×16pxのタイル画像を自分の好きなように配置して画像を作りました（下図参照）。
そして、作った画像をPNG形式でエクスポートして「PL_ImageConstructor.exe」などの透過画像を扱える別の画像編集ソフトで480×360pxになるようにサイズ調整しました。
「Tiled」の使い方については下記のサイトに詳しい説明があります。
http://blog.pipoya.net/blog-entry-589.html
【背景１のスプライト】
「背景１」スプライトは、「forest-1.png」ファイルを使用しています。
【天気１のスプライト】
「天気１」スプライトは、「sky-1.png」ファイルを使用しています。
完成したスクリプト
完成したスクリプトの全体です。
【キャラ１のスクリプト】
上矢印キーを押すとジャンプする仕様です。ジャンプの方法は厳密な重力ジャンプではなく、簡易的な重力ジャンプにしています。
「待つ」定義ブロックは、キャラクターが止まっている間のアニメーションです。
「当たり判定」定義ブロックは、キャラクターが地面に触れたかどうかの当たり判定を行っています。
- ジャンプ力：このスプライトのみ
- 地面に触れた：このスプライトのみ
- コスチューム保存用：このスプライトのみ
【地面１のスクリプト】
「地面１」スプライトに読み込んだ画像ファイルは、大きさを480×360pxになるように作ったので大きさは100％（デフォルト）でぴったりです。高さ（Y座標）は好み次第ですが、今回は-30にしています。
【背景１のスクリプト】
「背景１」スプライトに読み込んだ画像ファイルは、大きさを120％にするとステージにぴったり収まる大きさになります。高さ（Y座標）は好み次第ですが、今回は-50にしています。
【天気１のスクリプト】
「天気１」スプライトに読み込んだ画像ファイルは、大きさを120％にするとステージにぴったり収まる大きさになります。座標は真ん中（0, 0）の位置に設定します。
スクリプトの作り方
ここからはプログラムを作っていく中でポイントとなる部分を説明します。
ポイント①：当たり判定用のコスチュームをつくる
地面に着地したときの当たり判定は「～色に触れたら」を使うのがもっとも簡単ですが、今回のキャラクターは足の部分の色が単色ではなくグラデーションがかかっているので色での当たり判定が上手くいかない可能性があります。
そこで下の図のように当たり判定用のコスチュームをつくって、それを当たり判定につかうことにします。
青色の部分を地面との当たり判定に使います。同様に赤色を頭との当たり判定に、黄色を右側面との当たり判定に、緑色を左側面との当たり判定に使うためにつくっておきます。
もちろん「地面１」スプライトがそのままの色では当たり判定に使うのがむずかしければ、同じように当たり判定用のコスチュームをつくれば対応できますが、今回はそこまで必要ないので「地面１」スプライトの一部の色をそのまま当たり判定に使います。
ポイント②：当たり判定（着地しているかどうか）をフラグ（0か1）で判定する
当たり判定部分のプログラムを丸ごと定義ブロックにしてしまいます。
実際の当たり判定は、「（青色が茶色に触れた）なら」の部分です。青色はキャラ１の当たり判定用コスチュームの下半身の部分の色で、茶色は地面１の一部の色を指定しています。
条件が成立したら「地面に触れた」変数の値を1にして、条件が成立しなかったら変数の値を0にします。
このように0か1のようにスイッチのように値を切り替える変数の役割をフラグ、またはフラグ変数などと言います。
地面１スプライトの茶色は下の図の拡大した部分。
この「当たり判定」定義ブロックを「ずっと」ブロックの中に入れて、ゲーム中は常に地面に触れているかどうかをチェックし続けます。
ポイント③：フラグ変数をつかってジャンプと着地をする
上矢印キーを押した時にジャンプをさせますが、このときにフラグ変数の値をつかってコントロールします。
「地面に触れた」変数の値が1のとき、つまり地面に触れているとき、ジャンプを可能とします。
つぎに「ジャンプ力」変数の値を15に、「地面に触れた」変数を0にしています。（本当であれば「当たり判定」定義ブロックの中で自動判定してほしいのですが、タイムラグの関係か上手く反応しないのでここで強制的に０にしています）
「（地面に触れた＝1）まで繰り返す」ブロックの部分は、地面に触れるまでY座標を「ジャンプ力－1」ずつ変えています。
結果として「ジャンプ力－1」がプラスの値の間は上昇し、マイナスの値の間は下降するという意味になります。
そして地面に触れた瞬間に加工することをやめるので、つまり着地したということになります。
ここまでのポイントを押さえれば、アクションゲームでキャラクターをジャンプさせる方法と地面にめり込まないように着地させるスクリプトを完成させることができると思います。
失敗しやすいポイント
気を付けた方がよいポイントについて説明します。
当たり判定用コスチュームが機能していない場合
プログラムを開始して上矢印キーを押しているのにジャンプしない場合は、「地面に触れた」変数の値が1になっているかどうかを確認してください。
もし下の図のように値が0の場合はジャンプしません。
原因はコスチュームの青い四角形と地面の茶色が触れていないことにあると思われますので、緑の旗でスタートを押した状態のまま、青い四角形を少しずつ下に動かしてみてください。
すると「地面に触れた」変数の値が1に変わる瞬間があるのでそこでコスチュームを確定させます。
当たり判定を「地面１に触れたら」に変更した場合
当たり判定を色による判定からオブジェクトによる判定（今回で言えば地面１）に変えたらどうなるでしょうか？
結論としては正常に動作しました。
ただし、オブジェクトによる当たり判定の場合、頭が当たったときや足が当たったときなどの違いを分けて処理することが出来ません。
つまり、頭と地面が当たったときも「地面に触れた」変数の値が変わってしまいます。
そのため、今後ゲームを発展させていくときの妨げになる可能性が高いのでオブジェクトによる当たり判定は避けた方が良いと思います。
応用編
キャラ１にはコスチュームがたくさんあるので、ジャンプのアニメーションと下降中のアニメーションを追加してみました。
プログラムは、「ジャンプ力」変数の値がプラスの間はジャンプアニメーション、マイナスの間は「下降」のアニメーションとしています。
まとめ
さいごに、今回の記事で説明した『アクションゲームでキャラクターをジャンプさせる方法と地面にめり込まないように着地させるプログラミング』のポイントをまとめます。
- ポイント①：当たり判定用のコスチュームをつくる
- ポイント②：当たり判定（着地しているかどうか）をフラグ（0か1）で判定する
- ポイント③：フラグ変数をつかってジャンプと着地をする
キャラクターのジャンプや着地は基本中の基本ですね。この手のプログラムでよくあるのは、Y座標の位置で着地を判定する方法です。
この方法だと、同じ高さの地面にしか対応できないということと、そもそも着地をスマートに行う方法が思いつきません（あるのかもしれませんが）。
ぜひ今回紹介したようなフラグ変数で着地と着地以外を判別する方法を試してみてください。
どうでしたか？上手く再現できたでしょうか？
他にも役に立つTips（ティップス）記事をたくさん書いてますので、ぜひ見てみてください。（記事のタイトルに「Tips」と書いていたり「Tips」タグを貼ってあります）
