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

2022/07/22

2022/08/02

Scratchから始めるシューティングゲームの作り方②〜弾の連射を自在にカスタマイズする

Scratchプログラミング学習の最初の題材として良く取り上げられる定番はなんといっても、

「シューティングゲーム」

です。

Scratchでプログラミングを勉強する上で、シューティングゲームのプログラミングコードは様々なテクニックをバランス良く含んでいるので、一通り自分の手で簡単なゲームを作れるようになるころには、かなりの実力が付いていることでしょう。

今回から数回に分けて、簡単なシューティングゲームの作り方を解説していきます。

初回となる今回は、以下のようなシンプルなシューティングゲームを、Scratchで作るにはどうするかの手順をじっくり考えてみます。

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

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

ではScratch(ウェブ版)で、シューティングゲームで必須となる、

「プレーヤー・敵・弾」

の３つの要素を配置しましょう。

新規作成するプロジェクトを「シューティングゲーム①」にして、空のScratchプロジェクトを作成します。

プレーヤー(ゲームで操作するスプライト)は元からあるネコ(スプライト１)をそのまま利用するとして、打ち出す弾となるスプライトと、敵として出てくるスプライトの他２つを適当に追加します。

画面右下のスプライトパレットから、スプライトライブラリーを呼び出して、好きなものを２つ選択してScratchプロジェクトに配置してみます。

スプライト画像を呼び出してそのままのサイズだと、ちょっと大きいので、画像の大きさと場所を調整します。

スプライトパレットからネコを選択し、プログラミングブロック画面で、以下のようなブロックコマンドを作成してみます。

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

🚩

のマークの実行開始ボタンをクリックすると、

プレーヤーのゲーム開始の際の、最初の位置と大きさを指定することができます。

同じように、敵と弾の位置と大きさも調整してみましょう。

ボールと敵のスプライトのそれぞれのプログラミングブロックを以下のようにしてみます。

再び

🚩

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

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

このシューティングゲームでは、画面左側にプレーヤーを置き、横スクロール方式で画面右側から敵が出てくるようにするのが狙いです。

このままだと敵はプレーヤーと向き合うような画像になっていないので、左右反転を行う必要があります。

敵のスプライトを選択して、

[コスチューム]

タブに切り替え、左右反転させたい画像の編集ツールから

左右反転

のボタンをクリックします。

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

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

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

次にプレーヤーをキーボードから上下左右に動かすことを考えていきましょう。

このブログでは、最終的に作り上げたシューティングゲームを

自作コントローラーから操作する

ことも目標に掲げていますが、ともかく今はシューティングゲームとして動くプログラムを書き上げることを優先に進めていきます。

ネコのスプライトを選択して、プログラミングブロックを追加します。

キーボードの方向キーである４つの

↑

、

↓

、

←

、

→

、の各キーを押したときに、スプライトがどのように動かすかを決めるときには、

[イベント]

のブロックにある、

●●キーが押されたとき

を使います。

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

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

プレーヤーが動かせるようになったので、今度はプレーヤーから弾が発射できるようにしてみましょう。

キーボードから弾を発射するときのキーは基本的にどれでも選ぶことができますが、他のシューティングゲームを見ても、細長くて大きい

スペースキー

を使うことが多いように思います。

ここでもスペースキーを押すと弾が発射されるようにしてみましょう。

まずば弾のスプライトを選択して、弾のコードブロックを追加していきます。

基本的に、弾は撃たなければ消えているのが通常ですので、ゲームスタート時は

非表示

の状態から始めます。

弾はゲーム中に基本的に何度も同じスプライトを生じさせる必要があります。

なので、スペースキーが押される度にクローンがコピーされるように使うのがポイントです。

また非表示になっている弾のスプライトがクローンされるので、クローンされたときのコードは

表示する

に切り替える必要もあります。

クローンされたとき、

スプライト１へ行く

ブロックで、ネコのスプライトの位置を自動で割り出し、そこにクローン弾を移動することが出来ます。

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

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

敵に動きをつける

シューティングゲームですので、敵が動かないとゲームとしてつまらないので、敵にも動きをつけてみます。

敵も先程説明したクローン弾のテクニックと一緒で、クローンすることで複数の敵をゲーム画面に出すことができます。

敵は画面の右端から現れて、プレーヤーにまっすぐ迫ってくるような動きにしてみます。

またここでは、敵の出現頻度は、三秒間隔で１体で出てくるようにします。

敵のスプライトのブロックコードを以下のように変更しましょう。

変更・追加のブロックは赤枠で囲った箇所です。

まず①は敵のスプライトのオリジナルは画面に表示せず、クローンだけを使うための処置です。

②のブロックでは、プログラムが実行されたらずっと三秒待ってから、クローンを生成するようなループになります。

③のブロックが、クローンで生成された敵の動きを決めている箇所です。

最初に敵クローンが出現する位置を右端のランダムなところからポッと出すようにしたいので、y座標を

-130から130までの乱数

にします。

乱数で与えるy座標はおおよそ画面の上下を決める、

-160 〜 +160

枠内の値で設定します。

y座標を+160以上(または-160以下)の範囲にしてしまうと、クローンしていきなり端(上下)に当たってしまって、表示されない敵クローンもあります。スプライトの画像の大きさも考えて、+130(-130)程度にするのが妥当です。

他は弾のスプライトで行ったように、x座標をマイナス方向に変えるループを使って、敵をプレーヤー側へ迫るようにしています。

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

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

シューティングゲームですので、打った弾が敵にヒットすると、敵と弾は同時に消える必要があります。

まずは弾のスプライトのほうに、

「敵との当たり判定」

のブロックを追加してみます。

上の図で、赤枠で囲った部分が、新しく追加したブロック部分になります。

弾のクローンと敵のクローンがお互いに衝突すると、両方が消える必要あります。

そのため、敵のスプライトの方にも、

「弾との当たり判定」

のブロックを追加しておかないといけません。

この処理の中で、もっとも重要なことが、お互いのクローンを削除する前に

「0.1秒待つ」

という処理です。

これがないと、衝突してもどちらか一方が消えないということが起こります。

これは、Scratchの衝突判定の事情で、お互いに当たったときに、最初に当たったと判断された方のクローンが消されてしまうと、数ミリ〜数十ミリ秒遅れて、次にクローンの当たり判定を行っても、既に前のクローンが消去されてしまうので、何事もなかったかのように生き残ってしまうためです。

このようなどちらか一方が生き残ってしまうことを避けるために、当たったと判断された時から、お互い0.1秒ほど待てば、確実に両方が当たった、という処理にすることが可能です。

これを実行してみると、弾を受けた敵は、当たった弾と相打ちになってどちらも消滅させることができます。

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

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

シューティングゲームで、敵が敵と呼ばれるのは、プレーヤーにダメージを与えるキャラクターだからです。

定番のシューティングゲームの場合、プレーヤーがダメージを受ける回数の上限が決まっていて、いわゆる

「残機数」

とか、

「残りライフ」

とか、一定数を下回るとゲームオーバーとなる数値(グローバル変数)が存在しています。

とりあえずここでのゲーム開始時の残機数を３にして、プレーヤーが敵に当たるたびに、１づつ減っていくような仕組みを追加します。

プレーヤー(ネコ)のスプライトを選択して、

[変数] > [変数を作る] > [残り]

という名前で新しい変数を用意しておきます。

この

残り

という変数を利用して、敵と３回当たったらその時点でプログラムを停止させてみます。

プレーヤーのブロックコードを以下のように修正します。

まずは①の箇所によって、ゲーム開始時点で変数・

残り

を3にしています。

②はプレーヤーのスプライトに処理させたい動きをブロックとして追加したものです。

このブロックでは、ゲーム中にずっと処理されるプレーヤーの処理ループの中で、敵と衝突するまで待ってから、衝突したら

残り

を1つ減らします。

そして、

残り

がゼロになった時点で、ゲームを終了させるようにしています。

一方で、プレーヤーと敵が衝突したときの処理として、敵のクローンのブロックコードに以下を追加します。

ここでは、

敵にヒット

という

「ユーザー定義イベント」

を使って、イベントメッセージを他のスプライトにイベントの発生タイミングを送る、という動きもさせています。

ユーザー定義イベントは、ブロックパレットから

[イベント] > イベント定義ブロックのどれか > [新しいメッセージ]

から新しいユーザー定義イベントが追加できます。

これで、敵が消滅する間際に、

敵をヒット

イベントを他のスプライトへ送信し、その消滅を知らせることができます。

この

敵をヒット

のイベントは、次の項目の、ハートのスプライトの処理の時に利用しています。

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

ここまでの内容で、もっとも簡単なシューティングゲームが完成しているだろうと思います。

Scratchの変数表示は割とダサく感じるので、ハートのスプライトを残りの数だけ並べて分かりやすく画面に表示させてみます。

新たにハートのスプライトをサンプルから読み込んみます。

Scratchの変数表示はチェックを外して非表示にします。

プレーヤーのスプライト側には、もう

残り

の変数表示の処理が要らないので、先程追加したブロックの一部を削除します。

さて、数字の分だけ画像を繰り返す処理は、

スタンプ

を使うのが一番簡単です。

余談ですが、スタンプ以外で同じようなことをするためには、

「ローカル変数によるクローンへの識別番号の割り振り」

という中級テクニックを理解する必要があります。

【Scratch入門〜中級編】少しだけ難しいスプライトのクローンの高度な利用法

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

「スタンプ」は、

背景の画像を上書きするだけ

の機能しかないので、スタンプした画像を他のスプライトより手前に表示させることはできません。

またスタンプとして書き込んだスプライトはそれ以降動かすこともできませんので、描いた後は消すことしかできないことに注意が必要になります。

スタンプは後付けで利用できる

拡張機能

ですので、画面一番左下の拡張機能ボタンから呼び出して利用します。

ハートのスプライトのブロックコードを以下のように組みます。

ここでは

〇〇回繰り返す

ブロックで、ハートの画像を横方向ずらしながらスタンプ表示して、残りライフゲージを表現しています。

また、

敵がヒット

イベントが呼び出されるタイミングで、ハートを再描画するようにすることで、プレーヤーが敵に当たってしまうと直ぐにダメージが反映されるようにすることができます。

このブロックコードを見ると、同じ作用をするブロックパートが存在するので、より効果的にプログラミングをするために、

「ブロック定義」

を使ってまとめることも可能です。

ブロックパレットの

[ブロック定義]

から

ハートを描く

という名前で新しいブロック定義を作成します。

この

ハートを描く

ブロックに、繰り返し再利用する処理ブロックを入れることで、よりスッキリとしたコードにすることができます。

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

まとめ

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

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

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選