Scratchから始めるシューティングゲームの作り方①〜最初のプロジェクトを作成


※ 当ページには【広告/PR】を含む場合があります。
2022/07/22
2022/08/02
Scratchから始めるシューティングゲームの作り方②〜弾の連射を自在にカスタマイズする
タコキンのPスクール|Scratchから始めるシューティングゲームの作り方①〜最初のプロジェクトを作成



Scratchプログラミング学習の最初の題材として良く取り上げられる定番はなんといっても、
「シューティングゲーム」 です。
Scratchでプログラミングを勉強する上で、シューティングゲームのプログラミングコードは様々なテクニックをバランス良く含んでいるので、一通り自分の手で簡単なゲームを作れるようになるころには、かなりの実力が付いていることでしょう。
今回から数回に分けて、簡単なシューティングゲームの作り方を解説していきます。
初回となる今回は、以下のようなシンプルなシューティングゲームを、Scratchで作るにはどうするかの手順をじっくり考えてみます。





この記事にて、シューティングゲームの土台となるプロジェクトの作成手順を自分の手で作り上げていきましょう。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

新規プロジェクトの作成〜プレーヤーと敵と弾を配置する



ではScratch(ウェブ版)で、シューティングゲームで必須となる、
「プレーヤー・敵・弾」 の3つの要素を配置しましょう。
新規作成するプロジェクトを「シューティングゲーム①」にして、空のScratchプロジェクトを作成します。
1278x663
合同会社タコスキングダム|蛸壺の技術ブログ


プレーヤー(ゲームで操作するスプライト)は元からあるネコ(スプライト1)をそのまま利用するとして、打ち出す弾となるスプライトと、敵として出てくるスプライトの他2つを適当に追加します。
画面右下のスプライトパレットから、スプライトライブラリーを呼び出して、好きなものを2つ選択してScratchプロジェクトに配置してみます。

981x747
合同会社タコスキングダム|蛸壺の技術ブログ



スプライト画像を呼び出してそのままのサイズだと、ちょっと大きいので、画像の大きさと場所を調整します。
スプライトパレットからネコを選択し、プログラミングブロック画面で、以下のようなブロックコマンドを作成してみます。

410x502
合同会社タコスキングダム|蛸壺の技術ブログ



これで一旦プログラムを実行してみます。

🚩 のマークの実行開始ボタンをクリックすると、
492x414
合同会社タコスキングダム|蛸壺の技術ブログ


プレーヤーのゲーム開始の際の、最初の位置と大きさを指定することができます。
同じように、敵と弾の位置と大きさも調整してみましょう。
ボールと敵のスプライトのそれぞれのプログラミングブロックを以下のようにしてみます。

666x341
合同会社タコスキングダム|蛸壺の技術ブログ



再び
🚩 のマークの実行開始ボタンをクリックすると、弾と敵の位置も調整することが出来ました。

493x412
合同会社タコスキングダム|蛸壺の技術ブログ

スプライトの画面を左右反転させる



このシューティングゲームでは、画面左側にプレーヤーを置き、横スクロール方式で画面右側から敵が出てくるようにするのが狙いです。
このままだと敵はプレーヤーと向き合うような画像になっていないので、左右反転を行う必要があります。
敵のスプライトを選択して、
[コスチューム] タブに切り替え、左右反転させたい画像の編集ツールから 左右反転 のボタンをクリックします。
1054x724
合同会社タコスキングダム|蛸壺の技術ブログ


すると、敵の画像がプレーヤーに向かう方向へ切り替わったことが分かります。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

キーボードからプレーヤーを動かす



次にプレーヤーをキーボードから上下左右に動かすことを考えていきましょう。
このブログでは、最終的に作り上げたシューティングゲームを
自作コントローラーから操作する ことも目標に掲げていますが、ともかく今はシューティングゲームとして動くプログラムを書き上げることを優先に進めていきます。
ネコのスプライトを選択して、プログラミングブロックを追加します。
キーボードの方向キーである4つの
、の各キーを押したときに、スプライトがどのように動かすかを決めるときには、 [イベント] のブロックにある、 ●●キーが押されたとき を使います。
1025x488
合同会社タコスキングダム|蛸壺の技術ブログ


これでプレーヤーがキーボードから動かせるようになります。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

プレーヤーから弾を発射させる



プレーヤーが動かせるようになったので、今度はプレーヤーから弾が発射できるようにしてみましょう。
キーボードから弾を発射するときのキーは基本的にどれでも選ぶことができますが、他のシューティングゲームを見ても、細長くて大きい
スペースキー を使うことが多いように思います。
ここでもスペースキーを押すと弾が発射されるようにしてみましょう。
まずば弾のスプライトを選択して、弾のコードブロックを追加していきます。
基本的に、弾は撃たなければ消えているのが通常ですので、ゲームスタート時は
非表示 の状態から始めます。
275x272
合同会社タコスキングダム|蛸壺の技術ブログ


弾はゲーム中に基本的に何度も同じスプライトを生じさせる必要があります。
なので、スペースキーが押される度にクローンがコピーされるように使うのがポイントです。
また非表示になっている弾のスプライトがクローンされるので、クローンされたときのコードは
表示する に切り替える必要もあります。
533x321
合同会社タコスキングダム|蛸壺の技術ブログ


クローンされたとき、
スプライト1へ行く ブロックで、ネコのスプライトの位置を自動で割り出し、そこにクローン弾を移動することが出来ます。
435x354
合同会社タコスキングダム|蛸壺の技術ブログ



クリックを押すたびに弾は端に当たるまで消滅することなく画面右側へ飛び続けます。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

敵に動きをつける



シューティングゲームですので、敵が動かないとゲームとしてつまらないので、敵にも動きをつけてみます。
敵も先程説明したクローン弾のテクニックと一緒で、クローンすることで複数の敵をゲーム画面に出すことができます。
敵は画面の右端から現れて、プレーヤーにまっすぐ迫ってくるような動きにしてみます。
またここでは、敵の出現頻度は、三秒間隔で1体で出てくるようにします。
敵のスプライトのブロックコードを以下のように変更しましょう。
947x608
合同会社タコスキングダム|蛸壺の技術ブログ


変更・追加のブロックは赤枠で囲った箇所です。
まず①は敵のスプライトのオリジナルは画面に表示せず、クローンだけを使うための処置です。
②のブロックでは、プログラムが実行されたらずっと三秒待ってから、クローンを生成するようなループになります。
③のブロックが、クローンで生成された敵の動きを決めている箇所です。
最初に敵クローンが出現する位置を右端のランダムなところからポッと出すようにしたいので、y座標を
-130から130までの乱数 にします。
乱数で与えるy座標はおおよそ画面の上下を決める、
-160 〜 +160 枠内の値で設定します。
y座標を+160以上(または-160以下)の範囲にしてしまうと、クローンしていきなり端(上下)に当たってしまって、表示されない敵クローンもあります。 スプライトの画像の大きさも考えて、+130(-130)程度にするのが妥当です。
他は弾のスプライトで行ったように、x座標をマイナス方向に変えるループを使って、敵をプレーヤー側へ迫るようにしています。
480x365
合同会社タコスキングダム|蛸壺の技術ブログ



これで三秒に1体の割合で、敵がプレーヤーに攻めてくるようなエフェクトをつけることが出来ました。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

当たり判定①〜敵が弾をあたると消える



シューティングゲームですので、打った弾が敵にヒットすると、敵と弾は同時に消える必要があります。
まずは弾のスプライトのほうに、
「敵との当たり判定」 のブロックを追加してみます。
335x474
合同会社タコスキングダム|蛸壺の技術ブログ


上の図で、赤枠で囲った部分が、新しく追加したブロック部分になります。
弾のクローンと敵のクローンがお互いに衝突すると、両方が消える必要あります。
そのため、敵のスプライトの方にも、
「弾との当たり判定」 のブロックを追加しておかないといけません。
452x495
合同会社タコスキングダム|蛸壺の技術ブログ


この処理の中で、もっとも重要なことが、お互いのクローンを削除する前に
「0.1秒待つ」 という処理です。
これがないと、衝突してもどちらか一方が消えないということが起こります。
これは、Scratchの衝突判定の事情で、お互いに当たったときに、最初に当たったと判断された方のクローンが消されてしまうと、数ミリ〜数十ミリ秒遅れて、次にクローンの当たり判定を行っても、既に前のクローンが消去されてしまうので、何事もなかったかのように生き残ってしまうためです。
このようなどちらか一方が生き残ってしまうことを避けるために、当たったと判断された時から、お互い0.1秒ほど待てば、確実に両方が当たった、という処理にすることが可能です。
これを実行してみると、弾を受けた敵は、当たった弾と相打ちになってどちらも消滅させることができます。
608x226
合同会社タコスキングダム|蛸壺の技術ブログ

合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

当たり判定②〜プレーヤーが敵にあたるとダメージを受ける



シューティングゲームで、敵が敵と呼ばれるのは、プレーヤーにダメージを与えるキャラクターだからです。
定番のシューティングゲームの場合、プレーヤーがダメージを受ける回数の上限が決まっていて、いわゆる
「残機数」 とか、 「残りライフ」 とか、一定数を下回るとゲームオーバーとなる数値(グローバル変数)が存在しています。
とりあえずここでのゲーム開始時の残機数を3にして、プレーヤーが敵に当たるたびに、1づつ減っていくような仕組みを追加します。
プレーヤー(ネコ)のスプライトを選択して、
[変数] > [変数を作る] > [残り] という名前で新しい変数を用意しておきます。
731x576
合同会社タコスキングダム|蛸壺の技術ブログ


この
残り という変数を利用して、敵と3回当たったらその時点でプログラムを停止させてみます。
プレーヤーのブロックコードを以下のように修正します。
527x790
合同会社タコスキングダム|蛸壺の技術ブログ


まずは①の箇所によって、ゲーム開始時点で変数・
残り を3にしています。
②はプレーヤーのスプライトに処理させたい動きをブロックとして追加したものです。
このブロックでは、ゲーム中にずっと処理されるプレーヤーの処理ループの中で、敵と衝突するまで待ってから、衝突したら
残り を1つ減らします。
そして、
残り がゼロになった時点で、ゲームを終了させるようにしています。
一方で、プレーヤーと敵が衝突したときの処理として、敵のクローンのブロックコードに以下を追加します。
504x704
合同会社タコスキングダム|蛸壺の技術ブログ


ここでは、
敵にヒット という 「ユーザー定義イベント」 を使って、イベントメッセージを他のスプライトにイベントの発生タイミングを送る、という動きもさせています。
ユーザー定義イベントは、ブロックパレットから
[イベント] > イベント定義ブロックのどれか > [新しいメッセージ] から新しいユーザー定義イベントが追加できます。
594x518
合同会社タコスキングダム|蛸壺の技術ブログ


これで、敵が消滅する間際に、
敵をヒット イベントを他のスプライトへ送信し、その消滅を知らせることができます。
この
敵をヒット のイベントは、次の項目の、ハートのスプライトの処理の時に利用しています。

残機数を数値でなくてハートのライフで置き換える



ここまでの内容で、もっとも簡単なシューティングゲームが完成しているだろうと思います。
Scratchの変数表示は割とダサく感じるので、ハートのスプライトを残りの数だけ並べて分かりやすく画面に表示させてみます。
新たにハートのスプライトをサンプルから読み込んみます。
498x475
合同会社タコスキングダム|蛸壺の技術ブログ


Scratchの変数表示はチェックを外して非表示にします。
395x393
合同会社タコスキングダム|蛸壺の技術ブログ


プレーヤーのスプライト側には、もう
残り の変数表示の処理が要らないので、先程追加したブロックの一部を削除します。
602x434
合同会社タコスキングダム|蛸壺の技術ブログ


さて、数字の分だけ画像を繰り返す処理は、
スタンプ を使うのが一番簡単です。
余談ですが、スタンプ以外で同じようなことをするためには、
「ローカル変数によるクローンへの識別番号の割り振り」 という中級テクニックを理解する必要があります。

合同会社タコスキングダム|蛸壺の技術ブログ
【Scratch入門〜中級編】少しだけ難しいスプライトのクローンの高度な利用法

Scratchの中級者向けのテクニックとして、クローンの特殊な使い方を解説します。



「スタンプ」は、
背景の画像を上書きするだけ の機能しかないので、スタンプした画像を他のスプライトより手前に表示させることはできません。
またスタンプとして書き込んだスプライトはそれ以降動かすこともできませんので、描いた後は消すことしかできないことに注意が必要になります。

スタンプは後付けで利用できる
拡張機能 ですので、画面一番左下の拡張機能ボタンから呼び出して利用します。

1416x640
合同会社タコスキングダム|蛸壺の技術ブログ


ハートのスプライトのブロックコードを以下のように組みます。
557x546
合同会社タコスキングダム|蛸壺の技術ブログ


ここでは
〇〇回繰り返す ブロックで、ハートの画像を横方向ずらしながらスタンプ表示して、残りライフゲージを表現しています。
また、
敵がヒット イベントが呼び出されるタイミングで、ハートを再描画するようにすることで、プレーヤーが敵に当たってしまうと直ぐにダメージが反映されるようにすることができます。
このブロックコードを見ると、同じ作用をするブロックパートが存在するので、より効果的にプログラミングをするために、
「ブロック定義」 を使ってまとめることも可能です。
1000x513
合同会社タコスキングダム|蛸壺の技術ブログ


ブロックパレットの
[ブロック定義] から ハートを描く という名前で新しいブロック定義を作成します。
この
ハートを描く ブロックに、繰り返し再利用する処理ブロックを入れることで、よりスッキリとしたコードにすることができます。
568x513
合同会社タコスキングダム|蛸壺の技術ブログ

合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

まとめ



ということで以上、今回までの手順で作成したシューティングゲームのプログラミングでは、Scratchゲームとして以下のようなものになるでしょう。





もっと楽しくプレーできるゲームするためには、これからいろんな機能を継ぎ足していかないといけませんが、最も簡単なシューティングゲームの作り方としては、大体この記事で説明したテクニックで作成できるということを理解してもらうと良いと思います。