scratch

Scratchでシューティングゲームを作ってみよう!(初級編)

あいたろうくん

先生!
Scratchでシューティングゲームを作ってみたいのですが、作り方が分かりません!

デク先生

Scratchでシューティングゲームを作るには、クローンや角度の知識が必要なんだ

しかも、弾の動きを複雑にしようとすると難しい数学の知識なども必要となるから、
そういう意味でシューティングゲームを作るのは結構大変なんだ

だから、今回は弾の軌道や敵の動きをできるだけ簡単にしたシューティングゲーム
作り方について教えていこうと

あいたろうくん

そうだったんですか!

僕が作るのは難しいそうですか?

デク先生

いや、全然そんなことないよ! 私と一緒に作っていけば大丈夫!

ただ、いきなり複雑なものを作るのは大変だから、今回は弾の軌道や敵の動きをできるだけ簡単にしたシューティングゲームの作り方を解説していくよ。

あいたろうくん

はい! よろしくお願いします!

子供向けオンラインプログラミング教室おすすめ
子供向けオンラインプログラミングスクールお勧め3選! ソニーのオンライン学習サービス 「CREATE by KOOV」 脳がKOOVに出会うと潜在能力が開花する! https...

まずは完成したゲームをプレイ!!

デク先生

まず、今から作成するシューティングゲームのイメージをつかんでもらうために完成後のゲームを実際にプレイしてみよう

操作方法は

矢印キー(←→↑↓)で移動
Zキーで弾を発射

だけだから簡単にプレイすることができるよ!
では実際にプレイしてみよう!

あいたろうくん

プレイしてみたら、シンプルで面白かったです!
イメージもなんとなく分かりました!

デク先生

よし!
ではイメージも掴めたところで、今からこのシューティングゲームの作り方について説明していくよ!

Scratchで新しいプロジェクトを作成した後から解説していくから、新しいプロジェクトは準備しておいてね!

自宅でできるプログラミング子供向け教材
自宅でできる!プログラミング子供向け教材 プログラミングおもちゃ【embot】 こどものロジカル思考を育てるダンボール教材 https://www.youtube...

自機が移動できるようにしよう!

デク先生

まずは自機が移動できるようにプログラムを書いていこう!

あいたろうくん

自機って何ですか?

デク先生

自機とは自分が動かすキャラクターのことだから、今回作るシューティングゲームでは蝶のことを指すことになるね!

あいたろうくん

なるほど!
じゃあ、今から十字キーで蝶を動かすプログラムを作成していくということですね!?

デク先生

うん、そうだね!

Scratchのページにアクセスはできたかな?

では、初めから丁寧に解説していくよ!

1. デフォルトで追加されているネコのスプライトを削除しよう

プロジェクト作成時にネコのスプライトがゲームに追加されています。今回のゲームではネコは出てこないので削除しましょう。


スプライトの削除はスプライト選択中に右上に出てくる「ゴミ箱」のアイコンをクリックすることで削除することができます。

Scratchでのシューティングゲーム作成方法_解説画像1
「スプライトを選ぶ」アイコンをクリックしましょう

右下に表示されている動物アイコンか、その上に出てくる虫眼鏡アイコンをクリックして、スプライト一覧画面に移動しましょう。

Scratchでのシューティングゲーム作成方法_解説画像2
3. スプライト一覧から「Butterfly1」をクリックしましょう

「Butterfly1」をクリックして、蝶のスプライトを追加しましょう。

Scratchでのシューティングゲーム作成方法_解説画像3
4. 追加したスプライトの大きさや初期位置を設定しよう

ゲーム画面下にある数値を変更することで、スプライトの座標や大きさを変更することができます。

今回はxを「0」に、yを「-120」に、大きさを「40」にそれぞれ変更していきましょう。

Scratchでのシューティングゲーム作成方法_解説画像4
デク先生

ここれで蝶のスプライト設定は完了だよ!

今からは、いよいよ移動のプログラムを作成していくよ!

5. 「旗が押されたとき」に開始されるブロックを配置しよう

旗を押したときにゲームを開始したいので、「旗が押されたとき」ブロックを持ってきましょう。

このブロックはゲーム画面左上にある、旗のアイコンを押すと実行されるブロックです。
旗のアイコンが押されるとこのアイコンを開始地点として、上から下にプログラムが実行されるようになります。

よく分からない人はこのブロックの下にコードを書いていけば良いとだけ覚えておきましょう。

Scratchでのシューティングゲーム作成方法_解説画像5
6. 蝶の初期位置を設定しよう

動きブロックの1つに「x座標を~に、y座標を~にする」というブロックがあります。

x座標、y座標はそれぞれスプライトの位置を表しており、x座標は小さければ左に、大きければ右に移動します。これに対し、y座標は小さければ下に、大きければ上に移動します。

ですので、「x座標を~に、y座標を~にする」ブロックでx座標、y座標の値をはじめに決めてあげることで、スプライトの初期位置を固定することができます。

今回は「x座標を0に、y座標を120にする」となっているはずなので、そのままそのブロックを先ほど配置した「旗が押されたとき」のブロックに下に配置しましょう。

もし、「x座標を0に、y座標を120にする」になっていない場合はこうなるように値を変更しましょう。

Scratchでのシューティングゲーム作成方法_解説画像6
7. 「ずっと~」ブロックを配置しよう

「ずっと」ブロックを先ほど置いたブロックの下に配置しましょう。

Scratchでのシューティングゲーム作成方法_解説画像7

プログラムは基本的に上から下に処理が1回読み込まれると終了します。
しかし、「右ボタンを押している間はずっと右に動かす」といったように、ゲームでは同じ処理を繰り返し実行してもらう必要があります。

そこで、「ずっと」を利用します。「ずっと」の中にあるプログラムは止める処理を行わない限り永遠に同じ処理を繰り返してくれるのでゲームを作ることが可能になります。

よく分からないという人はとりあえず、キャラクターの移動など「ゲーム中ずっと実行していて欲しい処理」は「ずっと~」ブロックの中に書く、ということを覚えておきましょう。

デク先生

今から書く、「もし左向き矢印キーを押していたなら、蝶を左に動かす」というプログラムは1回だけでなく、ゲーム中ずっと実行していて欲しい処理だから「ずっと~」ブロックの中にコードを書かなければならないということだね!

8. 「もし~なら」ブロックをスクリプトエリア内に持ってこよう

今から「もし左向き矢印キーを押していたなら、蝶を左に動かす」という処理を書きたいので、まずは「もし~なら」ブロックを持ってきましょう。

Scratchでのシューティングゲーム作成方法_解説画像8
あいたろうくん

先生~!!
さっき「蝶を左に動かす処理は『ずっと~』ブロックの中に書かなければならない」とおっしゃっていたと思うのですが、ずっとブロックの中に書かなくて大丈夫なんですか?

デク先生

お、私の話をよく聞いてくれているようだね!


たしかに、さっき言ったように、最終的には「ずっと~」ブロックの中にプログラムを入れておく必要があるんだ。

ただ、分かりやすさのために、とりあえず「ずっと~」ブロックの外に書いて、最後に「ずっと~」の中に入れるつもりだから、今はこのままで大丈夫だよ!

あいたろうくん

なるほど!

「左向き矢印キーを押したなら、蝶を少し左に動かす」という処理のプログラムをいったん「ずっと~」の外に書いて、最後に作成したそのプログラムを「ずっと~」の中に入れれば良いということですね!

デク先生

うん!
そういうことだね!

9. 「~キーが押された」と書かれてあるブロックを先ほどおいた「もし~なら」ブロックの「~」の部分に配置します。

デフォルでは「スペースキーが押された」となっているブロックがあるはずなので、それを下の画像を参考に配置しましょう。

Scratchでのシューティングゲーム作成方法_解説画像9
10. 「~キーが押された」の「~キー」の部分を「左向き矢印キー」に変更しましょう。

「左向き矢印キー」を押したときのプログラムを作成したいので、画像のようにキーの種類を「左向き矢印キー」に変更しましょう。

Scratchでのシューティングゲーム作成方法_解説画像10
11. 「x座標を~ずつ変える」ブロックを「もし左向き矢印キーが押されたなら~」ブロックの中に配置しましょう。

デフォルでは「x座標を10ずつ変える」になっていると思うので、そのブロックを先ほどから作成している条件ブロックの中に配置しましょう。

12. 先ほど配置したブロックを「x座標を『-10』ずつ変える」に変更し、その後この条件ブロック全体を「ずっと~」ブロックの中に配置しましょう。

下の画像を参考に、値を変更して、ブロックを移動して下さい。

Scratchでのシューティングゲーム作成方法_解説画像12

ここで、「x座標を『10』ずつ変える」から「x座標を『-10』ずつ変える」に変更した理由は左に動くようにしたいからです。

スプライトはx座標が小さくなると左に、大きくなると右に移動します。今は左向き矢印キーを押したときのプログラムを書いているので、左に動くようx座標を小さくする必要があり、これは「x座標を『マイナスの値』ずつ変える」というプログラムで実現することができるのです。

さらにいうと、絶対値が大きくなればなるほど移動する速さは速くなり、例えば「x座標を『-10』ずつ変える」を「x座標を『-20』ずつ変える」にすることで移動する速さは2倍になります。

逆に、絶対値が小さくなればなるほど移動する速さは遅くなり、例えば「x座標を『-10』ずつ変える」を「x座標を『-5』ずつ変える」にすることで移動する速さは半分になります。

今話したx座標についてのことがよく分からないという人は、左に動かしたい場合は「x座標を『-10』ずつ変える」ブロックを、右に動かしたい場合は「x座標を『10』ずつ変える」ブロックを使えば良いと覚えておきましょう。

13. 先ほど作成したブロックと同じような方法で、右矢印キーが押されたときのプログラムを作成し、「ずっと~」ブロックの中に配置しましょう。

下の画像を参考にして、右矢印キーが押されたときのプログラムを作成し、作成できたら「ずっと~」の中に移動しましょう。

Scratchでのシューティングゲーム作成方法_解説画像13
14. 同様に下向き矢印キー、上向き矢印キーが押されたときのプログラムを作成し、「ずっと~」ブロックの中に配置しましょう。

下の画像を参考にして、下向き矢印キー、上向き矢印キーが押されたときのプログラムを作成し、作成できたら「ずっと~」の中に移動しましょう。

ただし、スプライトを上下方向に移動させたいので、「x座標を~ずつ変える」のブロックが「y座標を~ずつ変える」のブロックに変わっていることには注意して下さい。

Scratchでのシューティングゲーム作成方法_解説画像14

これで「旗アイコン」を押してプログラムを実行すると、蝶が押した矢印キーの方向に動くようになっていると思います。

押している矢印キーの方向に蝶が動かないという場合は画像を見て間違いがないか確認するようにしましょう。

デク先生

蝶を移動させるプログラムは、ちゃんと作成できたかな?

次は自機(蝶)から弾を出す方法について解説していくよ!

自機が弾を撃てるようにしよう!

デク先生

まずは自機が発射する弾のスプライトを準備しよう!

1. 画面右下にある、スプライト追加ボタンをクリックします。
Scratchでのシューティングゲーム作成方法_解説画像15
2. 「Ball」スプライトをクリックしてゲームに追加しましょう。
Scratchでのシューティングゲーム作成方法_解説画像16
3. 「Ball」スプライトの大きさを「30」に変更しましょう。
Scratchでのシューティングゲーム作成方法_解説画像17
デク先生

スプライトの準備はできたかな?

今からは、「クローン」という機能を使って弾が撃てるようにプログラムを書いていくよ!

あいたろうくん

「クローン」ってなんですか?

デク先生

「クローン」はスプライトを複製する機能で、同じような動きをするスプライトをたくさん使いたいときによく活用するんだ!

あいたろうくん

なるほど!

弾はゲーム中に1つじゃなくて、たくさん出てくるからクローンする必要があるということですね!

4. スクリプトエリア内に開始ブロックを配置し、その下に「隠す」ブロックを持ってきましょう。

クローンしたスプライトだけを画面に表示したいので、旗が押されたときにスプライトを「隠す」ようにしましょう。

Scratchでのシューティングゲーム作成方法_解説画像18
5. 「ずっと~」ブロックを「隠す」ブロックの下に配置します。配置できたら、画像を参考にZキーを押している場合のプログラムを作成し、それを「ずっと~」ブロックに配置します。
Scratchでのシューティングゲーム作成方法_解説画像19
6. 「クローンされたとき」のブロックをスクリプトエリア内に配置しよう

「旗が押されたとき」ブロックは旗が押されたときにそこを開始地点として、上から下へとプログラムが実行されたように、「クローンされたとき」ブロックはクローンされたときにそこを開始地点として、上から下へとプログラムが実行されます。

Scratchでのシューティングゲーム作成方法_解説画像20
7. 先ほど配置した「クローンされたとき」ブロックの下に、「表示する」ブロックを持ってきましょう

「クローンされたとき」ブロックの下にあるプログラムが実行されるのは、そのときクローンされた物体だけなので、このように「表示する」ブロックを配置することで本体を隠したまま、クローンだけを見えるようにすることができるようになります。

Scratchでのシューティングゲーム作成方法_解説画像21
8.  先ほど配置した「表示する」ブロックの下に、「どこかの場所へ行く」ブロックを持ってきましょう
Scratchでのシューティングゲーム作成方法_解説画像22
9. 先ほどを配置した「どこかの場所へ行く」ブロックの、「どこかの場所」を「Butterfly 1」に変更しましょう。

クローンされた物体の初期位置は、クローン元の本体と同じ位置に設定されます。

今回クローンされた弾は蝶から出てるように見せたいので、初期位置を蝶がいる位置と同じになるように設定するために、「Butterfly 1へ行く」というプログラムが必要になります。

Scratchでのシューティングゲーム作成方法_解説画像23
10. 下の画像のように弾が移動するプログラムを作成し、「Butterfly 1へ行く」ブロックの下に配置しましょう。
Scratchでのシューティングゲーム作成方法_解説画像24
デク先生

処理を軽くするために、使わなくなったクローンは削除してあげる必要があるんだ。

今からはその処理のプログラムを作成していくよ!

11. スクリプトエリア内に「もし~なら」ブロックを持ってきましょう
Scratchでのシューティングゲーム作成方法_解説画像25
12. 「もし~なら」の条件部分(~の部分)に大小関係を比較するブロックを配置しましょう

ボールのクローンがある一定のラインより上にいったときに、すなわちそのクローンのy座標がある一定値より大きくなったときに削除を実行したいです。

そのために数字の大きさを比較する必要があるので、下の画像を参考に大小を比較するためのブロックを配置しましょう。

Scratchでのシューティングゲーム作成方法_解説画像26
13-1. 大小比較ブロックの左側に「y座標」ブロックを配置し、右側に「170」と入力しましょう。それができたら、その条件分の中に「このクローンを削除する」ブロックを配置しましょう。
Scratchでのシューティングゲーム作成方法_解説画像27-1
13-2. 先ほど作成した、クローン削除のプログラムを図のように、「y座標を10ずつ変える」の下に移動させましょう

これでクローンされた弾のy座標が170より大きくなった、すなわち弾が上の方に行ったときにその弾を削除されるようなりました。

Scratchでのシューティングゲーム作成方法_解説画像27-2
デク先生

これで蝶から弾を出せるようになったよ!

次は敵を作っていこう!

敵にアニメーションがつくようプログラムを作成しよう!

1. スプライト一覧から「Dove」を選択し、ゲームに追加しましょう。
Scratchでのシューティングゲーム作成方法_解説画像28
2. 「Dove」の大きさを「70」に変更しましょう。
Scratchでのシューティングゲーム作成方法_解説画像29
3. 下の画像のようなプログラムを作成して、鳥が飛んでいるかのようなアニメーションを付け加えましょう

Scratchのコスチュームはアニメーションになるように、1つのスプライトに対してイラストが複数枚用意されている場合があります。

「Dove」もそのように用意されているので、「0.15秒ごとにスプライトを切り替える」というコードで飛んでいるようなアニメーションを設定しましょう。

Scratchでのシューティングゲーム作成方法_解説画像30
デク先生

次は敵のHPを設定していくよ!

HPなどゲーム中に変化する数字は変数を使って管理するからぜひ使い方を覚えていこう!

敵のHPを設定してみよう!

1. ブロックエリア内にある、「変数を作る」ボタンをクリックします
Scratchでのシューティングゲーム作成方法_解説画像31
2. 変数名を「ボスのHP」に設定して「OK」ボタンをクリックしましょう
Scratchでのシューティングゲーム作成方法_解説画像32
3. 「ボスのHPを0にする」ブロックを「ずっと~」ブロックの上に持ってきましょう

ボスのHPの初期化を行いたいので、「ボスのHPを0にする」ブロックを下の画像の場所に配置しましょう。

Scratchでのシューティングゲーム作成方法_解説画像33
4. 「ボスのHPを0にする」を「ボスのHPを2000にする」に変更しましょう。

ボスのHPが高すぎると思ったら、「ボスのHPを1000にする」などに変更して、HPを調整しても大丈夫です。

Scratchでのシューティングゲーム作成方法_解説画像34
デク先生

敵のHPを表す変数が作れたら、次は弾が敵に当たったときのプログラムを作成していくぞ!

弾が敵に当たったときの処理を実装していこう!

1. 「Ball」スプライトを選択し、そのスクリプトエリア内で、下の画像のようなブロックを作成しましょう。

ここで配置した「ボスのHPを-5ずつ変える」ブロックによって、敵のHPを減らすことが可能になります。

「ボスのHPを-5ずつ変える」の「5」は一つの弾が敵に与えるダメージ量です。ですので、「ボスのHPを-〇ずつ変える」の「〇」の部分を大きくすると敵に与えるダメージ量を大きくすることが可能になります。

Scratchでのシューティングゲーム作成方法_解説画像35
2. 下の画像を参考にして、先ほど作成したブロックの中に新たなプログラムを作成しましょう

ここで作成したプログラムは「敵のHPが0以下になったらゲームを終了させる」処理と、「弾が敵に当たったら弾を消す」という処理です。

「もし~なら」ブロックの条件部分にあたる「ボスのHP < 1」を「ボスのHP < 0」にするとHPが0の場合ではゲームが終了しないことに注意しましょう。

Scratchでのシューティングゲーム作成方法_解説画像36
3. 「もし マウスポインタに触れた なら」の「マウスポインタ」の部分を「Dove」に変更しましょう。
Scratchでのシューティングゲーム作成方法_解説画像37
4. 下の画像のように、作成したプログラムを「クローンされたとき」ブロックの中に配置しましょう。
Scratchでのシューティングゲーム作成方法_解説画像38
デク先生

敵のHPはちゃんと減るようになったかな?

できたら、次は敵の動きを設定していこう!

敵が動くようにプログラムを作成しよう!

1. 「Dove」スプライトを選択し、そのスクリプトエリア内で下の画像のように初期位置を設定するプログラムを作成しましょう。
Scratchでのシューティングゲーム作成方法_解説画像39
2. 先ほど作成したブロックの下に「ずっと」ブロックを配置しましょう。配置したら、下の画像のように移動プログラムの一部を作成してください。
Scratchでのシューティングゲーム作成方法_解説画像40
3. 先ほど作成した移動プログラムを複製・編集して、下の画像にある3つの移動ブロックも作成しましょう。作成できたら、4つすべてを画像に示してある順番で移動させましょう。
Scratchでのシューティングゲーム作成方法_解説画像41
4. 作成したプログラムに間違いがないかを下の画像で確認しましょう。
Scratchでのシューティングゲーム作成方法_解説画像42
デク先生

次は敵が攻撃してくるようにプログラムを作成していくよ!

敵の攻撃を実装しよう!

1. スプライト一覧から「Paddle」をクリックしてゲームに追加しましょう
Scratchでのシューティングゲーム作成方法_解説画像43
デク先生

このスプライトが敵が撃つ弾になるよ!

2. 「Paddle」スプライトの大きさを「50」に変更しましょう。
Scratchでのシューティングゲーム作成方法_解説画像44
3. 「Paddle」のスクリプトエリア内で下の画像のようなプログラムを作成しましょう。
Scratchでのシューティングゲーム作成方法_解説画像45
4. 「90度に向ける」の「90」の部分に「1から10までの乱数」ブロックを配置しましょう。配置できたら、「1から10までの乱数」を「0から359までの乱数」に変更しましょう。

こうすると「ずっと、0から359までの乱数度に向ける」というプログラムができあがり、これによって「Paddle」スプライトの本体はランダムな方向に向くようになります。

Scratchでのシューティングゲーム作成方法_解説画像46
5. 下の画像のように45度回転させた後、自分自身のクローンを作成するプログラムを作成しましょう。
Scratchでのシューティングゲーム作成方法_解説画像47
6. 「5.」で作ったブロックを7回複製し、下の画像のようなブロックを作成します。作成できたら、このブロックをずっとの中に移動させましょう。
Scratchでのシューティングゲーム作成方法_解説画像48
7. 「1秒待つ」ブロックを先ほど配置したクローンブロックの下に配置しましょう。

これで毎秒8方向に、Paddleクローンが作成されるようになりました。

Scratchでのシューティングゲーム作成方法_解説画像49
8.下の画像のようにブロックを作成しましょう。

これはクローンされた後のプログラムです。クローン削除の条件について詳しく知りたい人は二次元座標について調べてみましょう。

Scratchでのシューティングゲーム作成方法_解説画像50
デク先生

これで敵が弾を撃ってくるようになったから、最後にプレイヤーのHPを設定していこう!

プレイヤーのHPを設定しよう!

1. 「変数を作る」から「自分のHP」という名前の変数を作成します。作成できたら、蝶のスクリプトエリア内で「ボスのHPを0にする」ブロックを下の画像のように「ずっと」ブロックの上に配置しましょう。
Scratchでのシューティングゲーム作成方法_解説画像51
2. 「ボスのHPを0にする」の「ボスのHP」を「自分のHP」に、「0」を「5」に変更しましょう。

これでゲーム開始時プレイヤーのHPは5で初期化されるようになります。

Scratchでのシューティングゲーム作成方法_解説画像52
3. Paddleのスクリプトエリア内で、下の画像のようなブロックを作成します。作成できたら、下の画像の矢印が指す場所に移動させます。

これは敵の弾が自機(蝶)に当たった時の処理のプログラムです。
これによって敵の弾が自機に5回当たるとゲームが終了するようになりました。

Scratchでのシューティングゲーム作成方法_解説画像53

スプライトとコード一覧(確認用)

デク先生

これでプログラムは完成だよ!
下にそれぞれのスプライトのプログラムを載せておいたから、最後に間違いがないか確認しよう!

1. Butterflyのスクリプト
Scratchでのシューティングゲーム作成方法_解説画像54
2. Ballのスクリプト
Scratchでのシューティングゲーム作成方法_解説画像55
3. Doveのスクリプト
Scratchでのシューティングゲーム作成方法_解説画像56
4. Paddleのスクリプト
Scratchでのシューティングゲーム作成方法_解説画像57

最後に

デク先生

Scratchでのシューティングゲーム作成お疲れ様!

背景などは自分で好きに設定してみよう!

弾の速度や敵のHPなどを変更してみて遊ぶのも楽しいと思うから、どこを変更したら良いか分かる人は是非やってみよう!

あいたろうくん

僕はScratchで用意されている「Galaxy」という背景にして遊んでみようと思います!

今日はありがとうございました!

Scratchでのシューティングゲームはうまく作成できたでしょうか?

思ったように動かない場合はプログラム確認用の画像で、自分が作成したプログラムに間違いがないかをもう一度確認してみて下さい。

今回は敵の動きや弾の起動を簡単にしたので、余裕がある人はいろいろなプログラムを組んでみて難しいシューティングゲームを作成してみるのもおすすめです。

その他の『Scratchの教材』はこちら!!