テク先生!
あいたろう君、どうしたんだい?
Scratchでブロック崩しを作ってみたいのですが、作り方が分かりません!
Scratchでブロック崩しを作るためにはスプライトの移動に加えて、変数やクローン、角度について使い方を知っておく必要があるんだ!
なるほど~
変数とかクローンとかって難しいイメージがあるんですけど僕でもブロック崩しは作れますか?
たしかに難しいところもあるけど、今回は簡単に作れるように工夫をしてみたから大丈夫だよ!
それに私が作る過程を丁寧に説明していくから、頑張ってゲームを完成させよう!
先生、ありがとうございます!
それでは説明よろしくお願いします!
まずは完成したゲームをプレイしてみよう!
まず、今から作成するブロック崩しのイメージをつかんでもらうために完成後のゲームを実際にプレイしてみよう!
操作方法は
左右の矢印キー(←→)で移動
だけだから簡単にプレイすることができるよ!
では実際にプレイしてみよう!
僕が思っていたとおりのゲームで面白かったです!
それは良かった!
ではイメージも掴めたところで、今からこのブロック崩しの作り方について説明していくよ!
Scratchで新しいプロジェクトを作成した後から解説していくから、新しいプロジェクトは準備しておいてね!
バーが移動できるようにしよう!
まずは「バー」が移動できるようにプログラムを書いていこう!
「バー」っていうのはあの左右に移動する棒のことですか?
そうだよ!!
左右に移動させるだけなら簡単だから、まずはそれについて説明していくよ!
よろしくお願いします!
1. 猫のスプライトを削除します。
下の画像を参考に「削除ボタン」をクリックして猫のスプライトを削除しましょう。
2. 「スプライト追加ボタン」をクリックします。
「Paddle」のスプライトを追加するために下の画像が示す「スプライト追加ボタン」をクリックします。
3. 「Paddle」を選択します。
この「Paddle」が左右に移動するバーになります。
4. 「Paddle」のパラメータを変更します。
追加したスプライトのx座標を「0」に、y座標を「-140」に、大きさを「70」に変更します。
最終的に、下の画像と同じ値になっていれば大丈夫です。
5. 「Paddle」に下の画像のようなスクリプトを追加します。
これは初期設定として必要なスクリプトになります。
6. 「右矢印キー」がクリックされたときのスクリプトを追加します。
下の画像のように、右矢印キーが押されたときのスクリプトを作成し、それを先ほど追加した「ずっと」の中に移動させます。
7. 「左矢印キー」がクリックされたときのスクリプトを追加します。
下の画像のように、左矢印キーが押されたときのスクリプトを作成し、それを「ずっと」の中に移動させます。
先生!
「x座標を10ずつ変える」っていうプログラムってどういう意味があるんですか?
「x座標」とは横方向の位置を表す数字なんだ!
この「x座標」は右に行くほど数字が大きく、左に行くほど数字が小さくなるんだよ。
だから、「x座標を10ずつ変える」によって「x座標」が大きくなるから、バーが右に移動するんだ!
なるほど~!
「x座標を-10ずつ変える」は「x座標」が小さくなるからバーが左に移動するようになるんですね!
そのとおり!
座標の意味が分かったみたいで良かった!
8. 下画像のようになっていることを確認します。
下の画像と異なっていれば、画像のようになるよう変更しましょう。
9. 「Ball」のスプライトを追加します。
ボールが動くようにしよう!
次は「Ball」のスプライトを追加して、それが動くようにスクリプトを書いていくよ!
1. 「Ball」のパラメータを変更します。
追加したスプライトのx座標を「0」に、y座標を「-100」に、大きさを「35」に変更します。
最終的に、下の画像と同じ値になっていれば大丈夫です。
2. 「Ball」に下の画像のようなスクリプトを追加します。
これはボールの初期設定に必要なスクリプトになります。
3. 「~度に向ける」の部分に「30から60までの乱数」のスクリプトを追加する。
下の画像のようにスクリプトを作成して、それを矢印の先に移動させます。
先生!
「30から60までの乱数」って何ですか?
「乱数」とはプログラムが実行される度に変わる数字のことだよ!
例えば、今回のように「30から60までの乱数」とすると、時間によって「34」になったり、「51」になったりと30~60の整数のどれかになるんだ!
これを「~度に向ける」の「~」の部分に入れることでゲームをするたびに、色んな方向で「Ball」が移動するからよりゲームが面白くなるんだ!
なるほど~!
分かりやすい説明ありがとうございました!
4. 下の画像のようにずっとの中にスクリプトを追加します。
この追加したスクリプトによって「Ball」が移動、壁で反射するようになります。
5. 「新しいメッセージ」をクリックします。
「メッセージ1を送る」の「メッセージ1」の部分をクリックすると、「新しいメッセージ」がでてくるのでそれをクリックします。
6. 「跳ね返り上下」という名前で新しいメッセージを作成します。
下の画像のように名前入力欄に「跳ね返り上下」と入力し、その後に「OK」ボタンをクリックしましょう。
7. 下の画像の位置に「跳ね返り上下を送る」スクリプトを追加します。
8. 「跳ね返り上下」のメッセージを受け取った時のスクリプトを追加します。
下の画像のように「跳ね返り上下を受け取ったとき」の下に、「『180-向き』度に向ける」のスクリプトを配置します。
これにより「Ball」が「Paddle」に当たると跳ね返るようになります。
壊れるブロックを作成しよう!
「Ball」ができたから今度は「Block」のスプライトを作成していこう!
1. 自作のスプライトを作成するために筆のアイコンをクリックします。
右下にあるスプライト追加のアイコンにカーソルを合わせると、その上に4つアイコンが出てくるので、その中の「筆のアイコン」をクリックします。
2. 下の画像のように塗りつぶしと枠線の色を変更し、四角のアイコンをクリックします。
3. 下の画像のようにコスチュームを作成します。
これが「ブロック」のコスチュームになります。
長方形の中心がスプライトの中心に合うように、長方形を移動させましょう。
4. スプライト名と大きさを変更します。
スプライト名を「Block」に、大きさを「50」に変更します。
5. 「Block」に下の画像のようなスクリプトを追加します。
これは20個のブロックのクローンを生成するスクリプトになります。
先生!
「クローン」って何ですか?
「クローン」はスプライトのコピーのことだよ!
ブロック崩しのブロックのように同じものを複数個作るときにとても便利なんだ!
クローンは仕組みを理解するのが難しいけど、とても便利だから使い方を勉強してどんどん利用していこう!
6. ブロックがクローンされた後の処理を追加します。
下の画像のようにスクリプトを追加します。
このスクリプトによって、クローンされたブロックが「Ball」に当たると消えるようになります。
7. 「Ball」のスクリプトエリアにブロックに触れたときの処理を追加します。
下の画像のようにスクリプトを追加します。
このスクリプトによって、「Ball」がブロックに触れたときに跳ね返るようになります。
効果音を鳴らそう!
「Ball」が跳ね返ったときに効果音が鳴るようにスクリプトを追加していくよ!
1. 左上にある項目から「音」をクリックします。
2. 音源追加ボタンをクリックします。
下の画像を参考に音源追加ボタンをクリックします。
3. 「Wood Tap」を選択します。
4. 音を鳴らすスクリプトを追加します。
下の画像を参考に「Popの音を鳴らす」と、「Wood Tapの音を鳴らす」を追加します。
ゲームオーバー・ゲームクリアを判定しよう!
「ボールが下端についたらゲームオーバー」、
「全てのブロックを壊したらゲームクリア」
となるようにスクリプトを書いていくよ!
1. 「Ball」のスプライトにゲームオーバー処理のスクリプトを追加します。
下の画像のように「Ball」にゲームオーバー処理のスクリプトを追加します。
このスクリプトによってボールが画面の下にいくとゲームが止まるようになります。
2. 「変数を作る」をクリックします。
先生!
「変数」って何ですか?
「変数」は数字や文字のデータを保持することができる機能なんだ!
なるほど~!
今回は変数にどんなデータを保存するんですか?
今回は残りのブロックの個数のデータを保持するために利用するよ!
残りのブロックの個数を数えておけばゲームクリアの判定を簡単にできるから変数は本当に便利なんだ!
3. 「残りのブロック」という名前の変数を作成します。
変数名の入力欄に「残りのブロック」と入力し、その後右下にある「OK」をクリックします。
この変数は残りのブロック数を表し、この変数の値が0になるとゲームクリアになります。
4. 「残りのブロック」の初期値を設定するスクリプトを追加します。
下の画像のように「Block」のスクリプトエリアに「残りのブロック数を20にする」を追加します。
5. ゲームクリア判定のスクリプトを追加します。
下の画像のように「Block」のクローンが削除される前に「残りのブロックを-1ずつ」するスクリプトを追加し、「残りのブロック」が「0」になったら「ゲームクリア」のメッセージを送るようにします。
「ゲームクリア」のメッセージは自分で追加する必要があります。
メッセージの追加方法を忘れてしまった人は「ボールが動くようにしよう!」の手順5,6を再度確認してみましょう。
6. 「背景」追加ボタンをクリックします。
下の画像のように画面右下にあるボタンをクリックします。
7. 「Party」を選択します。
8. 下の画像を参考に「T」のアイコンをクリックします。
「T」のアイコンをクリックすると背景に文字を入れることができます。
9. 背景の中央に「GAME CLEAR!!」という文字を追加します。
下の画像を参考に「GAME CLEAR!!」と入力します。
背景画像をクリックすると文字を入力することができます。
10. 「GAME CLEAR!!」の文字の色を変更します。
下の画像を参考に「GAME CLEAR!!」を選択して、塗りつぶし・枠線それぞれの色を変更します。
11. ゲームクリア時に背景を切り替えるスクリプトを追加します。
背景のスクリプトエリアに下の画像のようなコードを追加します。
12. ゲームクリアすると「Ball」と「Paddle」が消えるようにスクリプトを追加します。
下の2つの画像を参考に「Ball」と「Paddle」のスクリプトエリアに「ゲームクリアを受け取ったとき」にスプライトを「隠す」プログラムを追加します。
最後にスクリプトを確認!
最終的にそれぞれのスクリプトが下の画像のようになっているか確認しよう!
【Paddle(バー)】
【Ball(ボール)】
【Block(ブロック)】
最後に
先生のおかげでブロック崩しが完成しました!
それはよかった!
他に作りたいゲームがあればどんどん聞いてくれ!
はい!
丁寧な説明ありがとうございました!
お疲れ様でした!
これでブロック崩しは完成です!
よければ他のゲーム作成の記事も読んでみてね!