【無料公開】スクラッチで迷路ゲームを作ってみよう｜Fincs初級講座①

YouTube「ファイブボックス 1分間スクラッチ講座」でおなじみの、ファイブボックスのスクラッチ講座です。

この記事では、Fincsで配信している
「スクラッチ初級講座①｜迷路ゲームを作ってみよう」
の内容を、文章でも復習できるようにまとめています。

この記事は初回無料版です。
スクラッチを使って、ネコを動かし、迷路を作り、敵やアイテムを追加しながら、1つのゲームを完成させていきます。

動画で操作を見ながら学びたい方は、Fincsの配信講座もあわせてご確認ください。

1,キャラクターの作成

1-1 キャラクターに名前をつける

スクラッチを立ち上げると、『ネコ』のキャラクターがいるよね？今回はこのキャラクターを主人公としてゲームを作っていきます。

まずはキャラクターに名前を付けてあげよう。最初は『スプライト１』という名前がついているよね？番号で呼ばれるのはかわいそうなので、好きな名前をつけてください。
あまり長いと、この後ブロックを重ねるのが大変になるので、5文字以内を目安にしましょう。
お手本では『ネコ』にしています。

スプライト
『スプライト』って初めて聞く言葉かもしれないね。プログラミングの世界で『スプライト』とは 『動く画像』 という意味になります。1つ1つのキャラクターという意味にとらえてもいいね。

1-2 キャラクターを動かしてみる

ではキャラクターを動かすプログラムを作ってみます。その前に、キャラクターがたくさん動くことができるように、キャラクターの大きさを変更します。
一番最初は【 旗が押されたとき 】だよ。
その後に 【 大きさを 40 %にする 】をくっつけて、旗を押してみよう。

ネコの大きさが変わったと思います。

つづいて、右向き矢印キー が押されたときに右に移動するような動きを作ってみます。
プログラミングでは、指定しなければ 1回だけ しか命令を実行してくれません。『繰り返し』同じ命令を実行させるためには、『繰り返し処理』 を実行させる必要があります。

まずは【 ずっと 】ブロックを使って、ゲーム中ずっと命令を聞くようにします。
【 ずっと 】ブロックの内部には、『もし右向き矢印キーが押されたら』という条件分岐ブロックを作ります。
さらにその内部に 3歩ずつ動く 動きを作成します。
先ほど作ったプログラムに次のプログラムを追加します。

【 〇歩動かす 】
キャラクターの向いている方向に指定した歩数だけ動きます。

旗を押して「右向き矢印キー」を押してみましょう。右方向に動き出したと思います。
続いて、左向き矢印キー を押したときに、左側に動くようにプログラムしてみます。
上で作った 【 ずっと 】ブロックの中に、次のブロックを入れて動かしてみよう。

するとやはり、右側に移動してしまうようです。これはキャラクターが右側を向いているためですね？
ということは・・・。

このような命令をしてみよう。
右を向くように命令　⇒　90度に向ける

左を向くように命令　⇒　-90度に向ける

ここまでのブロックは下のようになります。

では早速動かしてみましょう。
あれれ？キャラクターがさかさまになってしましました。-90度に向きを変えた影響のようです。

作成済みの【旗が押されたとき】 のすぐ下に
【 回転方法を 左右のみ にする 】 をいれます。

【 回転方法を 左右のみ にする 】

1-3 アニメーションの追加

これで左右の動きができたけど、なんかスケートをしているみたいだね。ここでは走っている動きを作ってみよう。
『ネコ』のキャラクターを選択して、『コスチューム』というタブをおすと、2パターンの『ネコ』の画像があるよね。

これを交互に表示させることによって、『ネコ』が走っているように見えるよ。

【 次のコスチュームにする 】

このブロックを左右の動きの中に追加してみよう。

いそがしそうに走っている『ネコ』ができたね。

問題1

左右の動きができたので、上下の動きを作ってみよう。
左右と同じ速さで、同じ【 ずっと 】ブロックの中に作ってください。

答え１

2,背景の作成

2-1 障害物ブロックの追加

今度はキャラクターが通る迷路を作っていきます。
下の図の様に『ステージ』から『ペンマーク』（描く）を選んでステージ作成の準備をします。

まず色を選びます。今回は障害物を赤色にします。
四角形を選んで、枠線をなくします。下矢印を押すか、直接入力で 0 に変更、赤い斜め線が出たらOK！

四角形を選択し、障害物を作ります。
作成したブロックは、図形をつかんで移動させたり、下の青色のポイントを選択し拡大、縮小、回転などができます。

障害物をいくつかおいて、キャラクターが通る道を作ります。
例えば下のように、ブロックを4つ作って配置します。

ブロックがない場所が、キャラクターが通る道です。

2-2 背景の確認と修正

ここまで出来たら、キャラクターを操作して、赤のブロックに触れずにすべての道を通ることができるか確認してみよう。もし通れなかったら背景を直しましょう。
下の左上、『選択』 のアイコンを選んだあと、直したいブロックをクリックして、編集モードにします。あとは先ほど行った操作と一緒です。

3,スタートとゴールの作成

3-1 スタートの作成

スタートは『家』の画像にします。画像選択画面で、けんさく窓に( home )と入力して、[Home Button] を選択します。

選択した画像で『コスチューム』を選択

1. 『選択』 アイコンを押します。

2. Home Button 画像の背景、あい色の部分をクリックします。

3. ゴミ箱アイコン、またはパソコンの［Delete］キーを押します。

これで背景が消えるので、この出来上がった『家』の画像を使います。

続いて『家』の色を変えてみましょう。
塗りつぶしたい色を選んで、好きな色に変更してみよう

名前を 「いえ」 に変更しておきます。

最後は、スタートしたい場所に『いえ』を配置します。
家には次のブロックを作っておきます。

旗が押されたとき
　ｘ座標を○に、y座標を▢にする　※自分の指定した座標を入力

3-2 『ネコ』のプログラムの改造1

続いて、『ネコ』が家から出てくるような動きを作ってみます。
事前に、大きさを 10% にする に変更しておきます。

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

旗を押して確認してみよう。

問題2

大きさは最初が 10％に指定しました、その後30回、1ずつ％を変更しています。最後の大きさは何％になるでしょうか？

答え2

10% + （1% × 30回） = 40%
ということで、40％ になります。

3-3 ゴールの作成

スタートと同じように、ゴールも作ってみましょう。
手本では 『ビルディング』 を選択しました。けんさく窓に( buil )と入力して、Building を選択します。
大きさを40％にして名前を『ゴール』に変更しました。

「ビルディング」にはコスチュームがいくつかありますが、サンプルでは building-d を選択しました。

ゴールのスプライトはビルディングでなくても大丈夫。皆さん好きなスプライトを選択してください。
ビルディングをゴールの場所に配置します。

ゲームの初めに、ゴールの配置を確定しておきましょう。

3-4 『ネコ』のプログラムの改造2

『ネコ』がゴールした時の動きを作ってみます。
ゴールした時にネコが『ゴール』としゃべるようにしてみましょう。
このブログラムを実現するには、【 もし～なら 】ブロックを使いそうですね。
調べるグループの中に、【 〇に触れた 】ブロックがありますので、それを選んで『ゴール』を選択、【 もし～なら 】の中に入れましょう。
見た目グループの中に【 〇と言う 】 を選んで、みんなの好きな言葉を入力してね。
手本では 『ゴール』 というようにしています。

4,壁に当たったら

4-1 壁に当たった時の動き

ここではネコが壁に当たった時に、スタートに戻される動きを作ってみます。
『もし 赤色 に触れたら、いえ に戻る』
というプログラムを作ってみます。
【赤色に触れた】のブロックのように色を選択する場合、赤にもいろいろな赤があるのでどの色かわかりにくいですよね。その時に便利なのが スポイト機能 です。
下の赤枠の スポイト機能 を選択して、画像の中のブロックの色を選択します。

選んだ赤色に触れたときに、スタートの 家 に戻る動きを作成します。

もし「赤色」にふれたなら　家に行く

スクリプトを確認キャラクターを動かして、赤色の壁に当たった時に、スタートに戻るか確認してみよう。

　チェックポイント

5 ,敵の追加

ここまでのプログラムで迷路ができました。でも毎回同じルートをたどればOKなんてゲームはつまらないよね。
ここからは敵を作って、ゲームを楽しく仕上げていきます。

5-1 敵の動きの作成

1体目は『カバ』の画像を選んでみました。
画像選択画面で、けんさく窓に( Hippo )と入力して、Hippo を選択します。
各自、好きな画像を選んでください。できれば・・・コスチュームが複数ある画像がいいですね。

キャラクターの名前をわかりやすい名前に変更しましょう。お手本では『カバ』にしておきます。
『カバ』には、左右を行ったり来たりする動きを作ってみます。

『ネコ』の動きで学習したことを思い出して、【 旗が押されたとき 】の動きを作りましょう。

旗が押されたとき

これでずっと羽ばたきながら前進する『カバ』ができました。

それでは動かしてみましょう。
『カバ』が左右に動き回るようになりましたね。

5-2 敵に当たった時の動き

作成した『カバ』に触れたとき、『ネコ』がスタートの位置に戻るように改造します。
これは [ 4.壁に当たったら ] で作成した『もし赤色に触れたら、家 に戻る』を参考に作ればよさそう。
　これを『ネコ』の【 ずっと 】 ブロックの中に入れてしまいます。

さらに今回は、『カバ』に触れたときに、『ニャー』と『ネコ』が鳴くように改造します。
スクラッチでは選択したスプライトによって、そのスプライトにふさわしい 『音』 がつけられています。もちろん最初からついている『音』以外にも選ぶことができます。
　今回は『ネコ』に最初からついている『ニャー』という音を追加してみます。

問題1

次のブロックを使って、『ネコ』が『カバ』に触れたときに、『ニャー』となく音を追加してください。

答え１

下のように、『もし カバ に触れたら』ブロックの中に追加します。

どうでしょうか？
それほど難しくなかったよね？

6 バルーンの追加

6-1 バルーンの動きの作成

2体目のしょうがい物は、バルーン（風船）にしたいと思います。今回はけんさくしなくても、すぐに見つかりました。

バルーンは画面の下から上に昇っていくような動きにします。今回も皆さん好きな画像を選んでもいいですが、そのような（下から上に上る）動きをする画像を選んでください。
名前はわかりやすい名前に変えておきましょう。英語だと読みにくいですからね。

【旗が押されたとき】の後、初期値（しょきち）を作成します。

チェックポイント

続いて、『繰り返し処理』を作成します。
バルーンは次の動きを繰り返します

この動きを作成済みの「旗が押されたとき」につづくスクリプトに追加します。

これでバルーンが下から上に昇り続ける動きが確認できたと思います。

6-2 バルーンの改造

このままだとあまり面白くないので、バルーンの動きを下のように改造してみます。

ゲームには『ぐうぜん性』がとっても大事です。『乱数』という要素を使うと、それが実現できます。

下から昇る前に、x座標 を乱数で変更します。
x座標の左端は -240 右端は 240 だから、乱数の範囲は -200 から 200 ぐらいでいいかな？

続いて、『色の効果』 を 25 ずつ変化させていきます。

そうすると、毎回いろんな場所から、いろんな色のバルーンが上がっていくよね？

チェックポイント

6-3 バルーンに当たった時のネコの動き

続いて、『ネコ』がバルーンに当たった時に、スタートにもどる、という動きを作ってみます。
これは1体目の敵に当たった時の動きで勉強したものと同じですね？

問題
『バルーン』に当たった時にの『ネコ』の動きを作ります。
『ネコ』プログラムを以下のように改造してください。
・『バルーン』に当たった時、スタート に戻る
・『バルーン』に当たった時、音 を鳴らす。音は敵1と当たった時になる『ニャー』ではない音を選んでください。

答え

以下のように『もし< バルーンに触れた > なら』の中に2つのブロックを作成、これを『ずっと』ブロックの中に入れてしまいます。

7 アイテムの追加

7-1 アイテムの動きの作成

　敵はいったん完成して、スタートからゴールまでの流れができました。
　このフェーズでは、アイテムを一つ作成して道にアイテムを配置、そのアイテムを取得しないとゴールができない、という動きを作っていきます。
手本では『ドーナツ』を選択しました。名前を『ドーナツ』に変更、道に配置できる大きさを確認しておきましょう。
　

【 旗が押されたとき 】の下に、初期化で大きさを 30 % にして『ネコ』がドーナツに触れたら、ネコが『ドーナツ』を持って歩くような動きを作ります。

どうですか？『ネコ』がドーナツを持って歩いているように見えますね？

7-2 ドーナツの初期位置

ドーナツが毎回同じ場所に出現するとつまらないので、最初の出現場所が毎回変わるように変更します。
さらに、ドーナツがネコの後ろに行かないように、ずっとの中で最前面に移動させます。

これで毎回違う場所に配置されるようになりましたね。

7-3 『ネコ』の動きの改造

続いてゴールの条件に『ネコ』が『ドーナツを持っている』を追加します。
ゴールの条件 が次の2つになります

それでは『ネコ』の動きを改造していきましょう。

　【 かつ 】を使う　

『かつ』の使い方、わかりますか？

上の図のように、「メガネをしている」かつ「マスクをしている」と指定した場合、両方の条件がそろう人、つまり左上のギガだけがその対象になります。

「メガネをかけている」または「マスクをかけている」と指定した場合、どっちか一つでも条件の合う人、つまりギガとゴボとキャットが対象になります。

これで途中でドーナツをゲットしなければ、ゴールができないようになりましたね。

8 ゴールシーン

8-1 ゴールステージの作成

最後はゴールシーンの作成です。
ステージでゴールのシーンを作ってみてください。サンプルでは下のようなゴールシーンを作ってみました。
※作り方はFincs配信動画で説明しています。

コスチューム名は「クリア」

8-2 プログラムの改造

まずは「ネコ」のプログラムです。

作成済みの「ゴールに触れた」かつ「ドーナツに触れた」ならの中のブロックを、下のように変更します。

ここで隠れてしまったので、スタート時には表示をして背景画像を変える必要がありますね。

旗が押されたときのスクリプトに、背景の指定と、表示するプログラムを追加します。

次は、家とゴールとドーナツ、カバ、バルーンです。
この5つのスプライトにはすべて次の命令を作っておきます。

一つ作成して、他のスプライトにコピーすると効率がいいですね。

はい、これですべて完成です。

この記事では大まかな流れを文章で紹介しましたが、実際のブロックの置き方や、背景・スプライトの編集方法は、動画で見るとより分かりやすくなります。

「自分でも一緒に作ってみたい」
「途中でつまずかずに完成まで進めたい」
という方は、「Unity スクラッチで始めるプログラミングゲーム開発講座」の
「スクラッチ初級講座①｜迷路ゲームを作ってみよう」
をご確認ください。

今後は、敵を増やしたり、ステージを追加したりしながら、さらにゲームらしく改造していきます。