【これができたら初心者卒業！】スクラッチゲームの作り方

スクラッチで作品を作るときに、これさえおぼえてしまえば、基本的なものは作ることができるようになるという基本があります。

この記事では、実際にゲームを作りながら、基本となる以下の５項目を解説していきます。

1. キャラクターをキーボード操作で動かす
2. ゲーム中とゲームオーバーの背景を作り、プログラムで切り替える
3. キャラクターのコスチュームを変更してアニメーションの効果をつける
4. 変数でタイマーを作り、時間になったらゲームオーバーにする
5. 当たり判定と変数を使ってキャラクター同士が触れたらスコアを増やす

実際に作るゲームは以下のものになります。

スクラッチの基礎を学ぶボールゲットゲーム

それでは、さっそくはじめていきます。

キャラクターをキーボード操作で動かす

「向き」と「◯歩動かす」を使ってキャラクターを動かす

Scratchを起動したら、画面左上の「作る」をクリックして、まずは新しいプロジェクトを作りましょう。

すると、下の画像のように、ネコだけがいる画面が表示されます。まず、このネコを動かしてみましょう。

「コード」タブの「動き」カテゴリの中にある、「10歩動かす」というブロックを出して、何度かクリックしてみましょう。すると、右上の画面のネコが、右方向に動いたと思います。

この「10歩動かす」というブロックは、キャラクターの向きの方向に、10座標ずつ動くというプログラムです。

「コスチューム」タブを見てみましょう。画面に表示されているネコのキャラクターが描かれています。画面の右下に「向き」という項目があり、「90」という数字が入っています。

これは、90度に向いているという意味です。

スクラッチでは、この画面に描いた状態が90度になっていて、10歩動かすと右方向に動く仕組みになっています。

次に、ネコを左方向に動かしてみましょう。左方向は-90度です。

動きカテゴリから「90度に向ける」というブロックを出して、「10歩動かす」のブロックの上につなげましょう。

90の数字をクリックすると時計のようなものが出てくるので、矢印をもって向きの数字が「-90」になるように変えてください。

ネコが逆さまになっていますが、気にせずこのまま「10歩動かす」のブロックをクリックしてみてください。-90度（左方向）に向いているので、左方向に動くはずです。

ネコが逆さまになっているのはおかしいので、ネコが上を向いた状態で左方向に動くようにしましょう。

動きカテゴリの中にある「回転方法を左右のみにする」というブロックをつけて、ブロックをクリックしてください。すると、ネコが上を向いた状態で左方向に動いたと思います。

ここまでできたら、向きの数字と動く歩数の数字をいろいろな数字に変えて、どうなるか実験してみてください。

座標を使ってキャラクターを動かす

次に、別な方法を使ってネコを動かしてみます。

先ほどつかったブロックは一度すてて、下の画像の５つのブロックを出してください。

赤丸でかこんだところの数字を変えたら、それぞれクリックしてみてください。赤丸でかこっている数字には「-（マイナス）」がついているので注意してください。

ブロックをクリックすると、赤色の文字で書いてある動きをするはずです。

「このx座標を◯ずつ変える」や「y座標を◯ずつ変える」というプログラムを使うと、キャラクターの向きに関係なく、いつでも決まった方向に動かすことができます。

スクラッチでは、画面の右方向がxがプラス（右端が240）、左方向はxがマイナス（左端が-240）、上方向はyがプラス（上端が180）、下方向はyがマイナス（下端が-180）になっています。

キーボードのキーを押したときに動くようにする

ここまでは、プログラムのブロックを直接クリックしてキャラクターを動かしていましたが、ここままだと不便です。

そこで、キーボーをのキーを押したときに、キャラクターが動くようにします。

コードタブの「イベント」カテゴリから、「緑の旗が押されたとき」と「スペーウキーが押されたとき」というブロックをだして、下の画像のように合体させてください。

「スペースキーが押されたとき」のブロックは、それぞれ下の画像のように修正します。

ここまでできたら、キーボードの矢印キーを押して、自分の思ったとおりにネコが動くか確認してみてください。

また、このやり方だと、ネコが少しカクカクと動くのが気になった方もいたかもしれません。

その場合、下の画像のようにすると、スムーズにネコが動くようになります。

ゲーム中とゲームオーバーの背景を作り、プログラムで切り替える

背景をプログラムで変える方法

つぎに、背景を変える方法を見ていきましょう。

まず、一つ背景を設定します。

画面右下の「背景（ステージ）」　→　「背景タブ」　→　「背景を選ぶ」の順にクリックします。

すると、背景を選択する画面になるので、好きな背景を一つ選びます。

画面左に、もともとあった真っ白な背景と、いま選んだもう一つの背景の２つ表示されていると思います。

次に、プログラムでこの背景を切り替える方法をみていきます。

まず、背景には、番号と名前がついています。

背景の番号は、背景の左上についている番号です。

一方、背景の名前は、背景を選んだときに、コスチュームに表示される名前です。

次に、プログラムで背景を変えてみます。

コードタブの「見た目」カテゴリから、「次の背景にする」というブロックを出して、クリックしてみましょう。

すると、ブロックをクリックするたびに、「真っ白の背景」と「自分で選んだ背景」が、順番に表示されると思います。これが、プログラムで背景を変える１つ目の方法です。

もう一つは、背景の名前を選んで背景を変えることができます。

コードタブの見た目カテゴリから、「背景を◯◯にする」というブロックを出し、「◯◯」のところを、自分が選んだ背景の名前に変更してクリックします。

すると、右上の画面の背景が自分が選んだものに変更されます。

同じように、真っ白い背景の名前「背景1」に変えてクリックすると、右上の画面の背景が白くなります。

プレイ中とゲームオーバーになったあとで背景を変える

次に、白い背景を、「Game Over」という文字が表示される背景に変更してみます。

背景（ステージ）　→　「背景タブ」　→　「T」のアイコンの順にクリックしたら、背景を描くキャンバスをクリックします。

すると文字が入力できるようになるので、「Game Over」の文字を入力します。

矢印のアイコンをクリックした後、文字が入っている箱をクリックすると、箱の角にある点を動かすことができるようになります。この角の点をもって動かすと、箱の大きさとともに文字の大きさが変わります。また、箱自体を持って、画面の中で表示される場所を動かすことができます。

ここまでできたら、ゲームのプレイ中とゲームオーバーになったときで、背景を変える事ができるようになります。

下の画像のように、ゲームがはじまる「緑の旗が押されたとき」に背景を「Blue Sky」を選び、ゲームオーバーというメッセージが送られてきたら「背景を背景1」にするといったプログラムで実現することができます。

キャラクターのコスチュームを変更してアニメーションの効果をつける

続いて、キャラクターの見た目（コスチューム）の変更の仕方を見ていきます。

コスチュームの変え方は、上で見た背景の変え方と似ています。

ネコのコスチュームを選択した後、「コスチューム」タブを見てみます。すると、最初から２つのコスチュームが入っています。

次に、コードタブを開いて、見た目かてごりから、「次のコスチュームにする」というコードを出して、何度かクリックしてみてください。すると、ネコが歩いているようなアニメーションになったと思います。

自動で歩いているようなアニメーションにしてみます。「イベント」カテゴリから「緑の旗が押されたとき」のブロックを、「制御」カテゴリから「ずっと」のブロックをだして、下のようにつなげて、緑の旗を押してみてください。ネコがすごいスピードで走っているようになったと思います。

このままだと、あまりにもネコの動きがはやいので、少しスピードを遅くしましょう。

「制御」カテゴリから、「１秒待つ」のブロックを取り出してつなげて、「0.2秒待つ」に変更した後、緑の旗を押してください。すると、ネコがてくてくと歩いているようなアニメーションになると思います。

これを応用すると、いろいろな動きやアニメーションを作ることができるようになります。

変数でタイマーを作り、時間になったらゲームオーバーにする

１秒ごとにうごくタイマー機能を作る

続いて、タイマーの作り方を見てみます。

スクラッチには、最初から用意されたタイマー機能がありますが、ここでは自分でタイマーを作ってみます。

まず「タイマー」という変数を作ります。

コードタブの変数カテゴリをひらき、「変数を作る」をクリックします。

変数名に「タイマー」と入力し、OKをクリックします。

タイマーという変数を作ることができたら、コードタブの「変数」カテゴリから「タイマーを１ずつ変える」というブロックを出して、何度かクリックしてみましょう。

右の画面に表示されたタイマーが、クリックするたびに１ずつ増えていくことがわかります。

この仕組をつかってタイマーを作っていきます。

タイマーは、ゲームがはじまったときに０からスタートして、１秒たつごとに数字が１ずつ増える仕組みで作ります。

下の図のように、イベントカテゴリから「緑の旗が押されたとき」のブロックを、制御カテゴリから「１秒待つ」と「ずっと」のブロックを、変数カテゴリから「タイマーを０にする」と「タイマーを１ずつ変える」のブロックをそれぞれ取り出して、下の画像のようにつなげます。

この状態で緑の旗を押すと、右の画面のタイマーのところの数字が、１秒ごとに１ずつ増えていきます。

30秒たったら背景がゲームオーバーになる仕組みを作る

次に、30秒たったら背景がゲームオーバーになる仕組みを作ってみます。

そのためには、まずタイマーが30秒立っているかどうかを調べるプログラムが必要です。

そこで、演算カテゴリにある「◯ ＞ 」というブロックを使います。このブロックは、「左の◯」が「右の◯」よりも大きいかどうかを調べるためのブロックです。

この仕組を使って、30秒たったかどうかを調べるプログラムを作ります。

左の◯に変数カテゴリーからもってきた「タイマー」を入れ、右の◯に「30」を入力します。

すると、タイマーの数字が30よりも大きいときにこのブロックをクリックすると「true（＝「あってるよ」「30より大きいよ）の意味」の文字が表示され、タイマーの数字が30よりも小さいときにこのブロックをクリックすると「false（＝「ちがってるよ」「30より小さいよ）の意味」の文字が表示されます。

この仕組を使って、背景を変更するプログラムを作ります。

下の画像のように、緑の旗を押したときに背景を「Blue Sky」にして、タイマーが30秒よりも大きくなったら「背景1（Game Over）」に変わるようにします。

最後に、ゲームが終了するときの処理を追加します。

赤色でかこったプログラムは、まずスコアが何点だったかネコが表示し、１秒まってゲームを止める仕組みになっています。

当たり判定と変数を使ってキャラクター同士が触れたらスコアを増やす

ネコがさわったらスコアが増える的を作る

まず、ネコがさわったらスコアが増える的を作るために、画面右下のネコのボタンにマウスのカーソルをのせ、「スプライトを選ぶ」をクリックします。

Ballのスプライトを選びます。

Ballスプライトのコードタブの動きカテゴリから、「どこかの場所へ行く」ブロックを取り出して、何度かクリックしてください。

すると、クリックするたびにボールがいろいろな場所に移動していきます。

この仕組を使って、ネコがボールにさわったら、ボールがどこかの場所へ行くという仕組みを作ってみます。

ネコとボールがさわっているかどうかは、調べるカテゴリの「◯◯にふれたとき」というブロックを使うと、調べることができます。

Ballスプライトのコードタブで、「調べる」カテゴリから「◯◯に触れた」というブロックを取り出して、「◯◯」のところを「スプライト1」に変更します。

「スプライト1」は、ネコのスプライトのことなので、このプログラムは「Ballのスプライトがネコのスプライトに触れた」という意味になります。

Ballスプライトとネコのスプライトが触れているときにこのブロックをクリックすると「true（＝「本当だよ」「触れているよ」の意味）」、ふれていないときにクリックすると「false（＝「違っているよ」「触れてないよ」の意味）」という文字が表示されます。

このように、キャラクターとキャラクターが触れたことをとらえて、次におきることをコントロールすることを当たり判定といいます。

この当たり判定を使って、ネコとボールが触れたら、ボールがどこか違う場所へ行くというプログラムを作ってみます。

Ballのスプライトのコードタブに、下の画像のプログラムを作ったら、緑の旗を押してプログラムをスタートさせ、ネコを動かして、ボールにさわってみてください。さわった瞬間に、ボールがどこかの場所へ移動します。

スコアを増やす

最後に、ネコが的に触れたときに増えるスコアをつくります。

タイマーを作ったときと同じように、変数カテゴリーから「変数を作る」をクリックし、「スコア」という変数を作ります。

「スコア」変数ができたら、先ほどつくったBallがネコと触れたことを調べるプログラムの中に、ゲームがはじまったときにスコアを０にもどすプログラム「スコアを０にする」と、ネコがBallにふれたときにスコアをふやす「スコアを１ずつ変える」のブロックを追加します。

ここまでできたら、ネコを実際に動かして、スコアが増えるかどうか確認してください。

以上で、このゲームは完成です。

このゲームで扱った内容は、以下の５つです。

1. キャラクターをキーボード操作で動かす
2. ゲーム中とゲームオーバーの背景を作り、プログラムで切り替える
3. キャラクターのコスチュームを変更してアニメーションの効果をつける
4. 変数でタイマーを作り、時間になったらゲームオーバーにする
5. 当たり判定と変数を使ってキャラクター同士が触れたらスコアを増やす

ここまでできたら、みなさんはもうスクラッチ初心者は卒業です。

より高度なゲームを作り基礎はみについたと思いますので、いろいろな作品の中を見て参考にしながら、面白いゲームを作ってみてください！

スクラッチで作る作品のお題や面白いゲームのリンクが届くメルマガ登録

ゲーム制作やプログラミングをさらに学びたい方へ！

本ブログでは、Scratchを使ったゲーム制作の基本について解説していますので、ぜひご覧ください！

「お家でやったけれども、うまくいかなかった」「さらに高度なことをやってみたい！」という方へ

最近は、プログラミングを学習するためのアプリや本、無料のプラットフォームも増えてきて、子どもがプログラミングを学習する機会や環境も整ってきました。

しかし、保護者の方とお話ししていると

• あきてしまって、長続きしなかった
• 本やアプリで自習してみたけど、うまくいかなかった
• 保護者の方がプログラミングの経験がなく、子どもに教えるのが難しい

といったお話をよくうかがうことも多いです。

そんな方は、一度当ブログを運営するプログラミング教室MYLABのレッスンを体験してみませんか？

MYLABのレッスンの特徴は以下のような特徴があります。

• お子さまが楽しくプログラミングを続けることができるカリキュラム
• 一人ひとりの「創りたい！」にこたえられる知識を持ち、成長をサポートできるメンター陣
• 初学者だけでなく、ロボコンにチャレンジしたり、本格的な3Dゲームをつくったりする上級コースまで継続できる

「本当に楽しめるのかな？」「うちの子に合うかしら？」「飽きっぽいうちの子が続けられるかしら？」と思う方もいるかもしれません。

そんな方は、ぜひ一度無料で開催している体験レッスンに来て、実際に体験してみてください！

体験会では、お子さまが集中してプログラミングしたり、作品を作ったりしている普段とは違う姿をみられるはずです！

ご興味をもっていただいた方は、ぜひ下のボタンからお申し込みください！

オンラインまたはMYLAB中目黒校での
体験授業お申込みはこちら