Scratchでカジュアルゲーム (1) 風船ゲーム

はじめに

CoderDojoというボランティア団体で、子供達のプログラミングスキル習得の支援をしております。プログラミングの開発環境は、主にScratchを使っていますが、いちからScratchでプログラミングするハードルも結構高いので、気軽にリミックスできる教材を作ってみました。

風船ゲーム

作った教材はこちら。

風船をウチワであおいで器に入れるステージクリア型のゲームです。障害物に当たると風船が割れてゲームオーバーとなります。極力シンプルな作りにしましが、風船の浮遊感を出すために物理挙動のコードがやや複雑です。子供達がScratchに慣れてきたら、コードを読み解く練習にもなるかなと思います。

この教材ではScratchの以下の機能を活用しています；

1. クローン: ウチワであおいだ時に発生する風を生成します。
2. ブロック定義: 風船の物理挙動や、ゲームオーバー時の再挑戦処理をまとめて定義します。
3. メッセージを送る: ゲームオーバーや再挑戦、次のステージへの移行など、スプライト間の連携に使用します。
4. 幽霊の効果を変える: 風船が割れた時のアニメーションに使用します。

リミックスのアイディア

初期設定では6ステージ用意しています。特に第4ステージを難易度高く設定しています。一通り遊んだ後で、

アイディア	説明
独自のステージを追加する	「ステージ」スプライトにコスチュームを追加することで、新しいステージを簡単に追加できます。
ステージすべてクリアしたらゲームコンプリートのメッセージを表示する	初期設定ではステージ６までクリアすると最初のステージに戻ってしまいますが、すべてのステージをクリアしたらコンプリートのメッセージを表示するようにしてみましょう。
BGMや効果音を追加する	風船が割れた時の効果音やBGMを追加することでより臨場感あふれるゲームになります。
風船のスプライトを変更する	風船を動物やキャラクターの風船に変更することで、ゲームの雰囲気を変えてみましょう。
風船に物理挙動を追加する	風が当たった時に風船が回転するなど、風船に物理挙動を追加する。

など、色々リミックスして楽しんでみましょう。

リミックスする際は、より面白いゲームにするために、ユニティ・テクノロジーズ・ジャパン安原広和さんのラーニンング・マテリアルズのたのしさの作り方を参考にしてみると良いかもしれません。私もゲームを作る際は、いつも参考にさせていただいています。

プログラムの概要説明

主要なコードは「風船」スプライトで実装しています。ここでは全体の構成を説明しますが、特に風船の物理挙動のコードは複雑なため、詳細は次の章で説明します。

スプライト	コード概要
風船	風船の上下移動、風が当たった時の処理等の物理挙動、メッセージの送信（次のステージ、ゲームオーバー表示完了）、メッセージ処理（風にあたった、次のステージ、再挑戦、ゴール、ゲームオーバー）、等、風船ゲームの主要な処理を行います。
うちわ	ウチワの移動処理と風の生成を行います。
風	風の移動と風船に触れた際の風にあたったメッセージ送信、端に触れた際の削除処理を行います。
器、器の前面	再挑戦、次のステージを受け取った時の復帰処理、風船が器に入った時のゴールメッセージ送信を行います。
ステージ	風船と障害物との当たり判定とゲームオーバーメッセージ送信、再挑戦を受け取った時の復帰処理、次のステージを受け取った時のステージ移行の処理を行います。
ゲームオーバー	ゲームオーバーを受け取った時の表示とそゲームオーバー表示完了の非表示処理、再挑戦メッセージ送信を行います。
ゲームクリア	ゴールを受信した時にゲームクリアを表示、次のステージを受け取った時にゲームクリアを隠す処理を行います。
地面、左壁、右壁、天井	旗が押された時にドラッグができないようにしています。

スプライト間のメッセージのやりとりを図示すると以下のようになります。Scratchはイベントドリブンの言語で、メッセージのやりとりを理解することで、プログラムの流れが理解しやすくなります。

風船の物理挙動の実装

風船の物理挙動は、上下の移動ブロック定義、左右の移動ブロック定義、「風にあたった」を受け取った時のイベント処理、の３つで構成されています。これらの処理の中で使われているスプライトと変数は上図の通りです。処理はすべて風船スプライトに実装されています。

壁や天井に触れているときに変数を使ってフラグを立てている処理が分かりにくいと思いますが、これは、壁や床、天井に風船がめり込んで振動してしまうのを避けるための処理となります。

それぞれの詳細は以下の通りです。Scratchのコードを見ながら読むと理解しやすいかと思います。

上下の移動

風の影響と重力の計算

1. 風船は、上下の移動ブロック定義のループの中で落下速度分毎回上下に移動します。
2. 落下速度は風に当たると3もしくは2になり、上に毎回3もしくは2ずつ移動します。
3. ただし、重力があるので毎回0.05ずつ落下速度は減少させ、マイナスになると今度は下向きに移動するようになります。

天井に触れた時の処理

1. 天井に触れた場合は、跳ね返る処理として、落下速度を半分にしてマイナスにして下に移動するようにします。
2. この際、落下速度の関係で、天井に風船がめり込んでいる場合があるため、一度天井に触れたら、天井に触れているかのフラグを立てて、フラグが立っている間は落下速度の再計算をしないようにしています。

床に触れた時の処理

1. 床に触れた場合は、跳ね返る処理として、落下速度を半分にしてマイナスにして下に移動するようにします。
2. 但し、落下速度の絶対値が0.5より小さい場合は、落下速度を0にして上下に動かないようにしています。
3. また、落下速度の関係で、床に風船がめり込んでいる場合があるため、一度床に触れたら、床に触れているかのフラグを立てて、フラグが立っている間は落下速度の再計算をしないようにしています。

左右の移動

風の影響と空気摩擦の計算

1. 風船は、左右の移動ブロック定義のループの中で移動速度分毎回左右に移動します。
2. 移動速度は風に当たると2もしくは-2になり、左右に毎回2もしくは-2ずつ移動します。
3. 但し、空気摩擦があるので毎回0.01ずつ移動速度は減少させ、移動速度の絶対値が0.2より小さい場合は、移動速度を0にして左右に動かないようにしています。

左右の壁に触れた時の処理

1. 左右の壁に触れた場合は、跳ね返る処理として、移動速度を半分にして反転させます。
2. この際、移動速度の関係で、壁に風船がめり込んでいる場合があるため、一度壁に触れたら、左壁/右壁に触れているかのフラグを立てて、フラグが立っている間は移動速度の再計算をしないようにしています。

「風にあたった」を受け取った時

風船と風があたった時、

1. 風がほぼ風船の真下にあたった場合（風と風船のx座標の差の絶対値が10より小さい場合）は、落下速度を3にします。移動速度は変更しません。
2. 風が風船の左側にあたった場合（「風のx座標」-「風船のx座標」が-10以下の場合）、移動速度を2（右に移動）します。
3. 風が風船の右側にあたった場合（「風のx座標」-「風船のx座標」が10以上の場合）、移動速度を-2（左に移動）します。
4. 2,3の場合で、天井に触れていない場合に落下速度を2（上に移動）にします。

おわりに

お疲れ様でした。ちょっと風船の物理挙動のコードが複雑ですが、壁や床、天井との跳ね返りのフラグ処理がわかりにくいだけで、それを除くと、基本的な物理挙動のコードはシンプルです。

是非、りミックスに挑戦して、より楽しいゲームにしてみてください！