スクラッチでゲームを作るとなれば、迷路のようなゲームを作りたいと思ったことがありますよね？
しかし、一から自分で作るというのは、初心者になかなかハードルが高いものです。
そこで、今回は、脱出系の迷路ゲームの作り方を完全解説していきます。
以下が、この記事で完成を目標とするゲームとなります。
素材は、全てスクラッチに元からあるものを活用しています。
普通の迷路と違って、アイテムを取る脱出系の迷路ゲームとなっています。
そして、今回のゲーム制作では、以下のことが学べます。
- キャラクター（スプライト）の反転方法が学べる
- コスチュームを微調整して、アニメーションを作れる
- 「〇〇または〇〇」とちょっと複雑な条件を設定できる
- 他のキャラクターに信号を送って、プログラムを発動させる
「面白そう！作ってみたい！」とお子さんの反応が良ければ、ぜひ本記事でゲーム制作に挑戦してみてください。
ゲームを完成する所要時間は、1時間ほどを目安にしてください。
「前編」「後編」「発展編」の3つに分けているので、3回に分けて無理なく取り組んでみましょう。
ブックマーク登録お願いします！
目次
【準備】スクラッチを本当に初めてやる人は、使い方を覚えましょう！
本当にスクラッチを使ったことがなくて、プログラミングの画面を開けていない状態の方は、その編集画面を開く必要があります。
なお、本記事では、スクラッチの画面の開き方、保存の仕方、一回保存してまた途中から作り始める方法には触れていません。
そのため、スクラッチの使い方で困ったら、こちらの記事を参考にしてみてください。
保存の仕方やファイルの読み込みとか、だいたい大丈夫な方はさっそくゲームを作っていきましょう！
スクラッチの迷路ゲームの作り方①魚を上下左右に動かしてみよう
まずは、魚の画像を探して、スクラッチの画面上に出しましょう。
魚の画像を出す
最初に設定されている猫のキャラクターは必要ないので、消します。
次に、画像を探します。
「動物」と選択すると、オレンジ色の魚があるので、クリックしましょう。
魚を左右に動かす
では、上画像のように早速ブロックを組み合わせていきましょう。
「イベント→旗」、「制御→ずっと」、「制御→もし」とブロックをくっつけていきます。
「もし〜なら」の中身は、最初「スペース」になっているので、「右向き矢印」に変更してください。
そして、右向き矢印を押されたら、右方向に動かしたいので、「x座標を10ずつ動かす」というブロックを「動き」から持ってきて、入れ込みましょう。
これで、右方向への移動が完成しました。
今度は、左方向ですが、「もし〜なら」のブロックを「右クリック→複製」して複製します。
すると、全く同じものができるので、「右向き矢印→左向き矢印」に変更します。
そして、x座標の数字を-10にキーボードで、 直接打ち込んでください。
端まで行ったら、魚の向きを変える
「動き」の「もし端に着いたら、跳ね返る」を「もし〜なら」のブロックの中に入れます。
すると、魚を動かすと、確かに向きは変わりまずが、逆さまになってしまいますよね。
その時は、「動き」の「回転方向を左右のみにする」を旗マークの直下に置きます。
すると、向きも変わって、魚の逆さまが直りましたね。
これで、反転するときは、「右左だけにする」と制限をかけられるのです。
方向キーに応じて、魚の向きを変える
先ほど魚が端に着いたら、ひっくり返りましたが、左方向キーを押すとバックしてしまいます。
そこで、方向キーを押したら、その方向に魚を向ける必要があります。
まずは、「もし〜なら」を引っ張ってきましょう。
次に、「演算」の「＜50」と書かれたブロックを「もし〜なら」の中に入れ込みます。
次に、「動き」の「向き」を演算のブロックに入れます。
そして、「90度に向ける」も入れ込みましょう。
これは、右方向キーを押したときに、魚が左を向いていたら、90度（右方向）に向けるプログラムになります。
次に、左方向キーを押したら、魚を左に向かせるプログラムを組みます。
まず、先ほど作ったブロックを複製しましょう。
「演算」の不等号を「＜」→「＞」に変更します。
そして、「動き」の「向き」を入れ込みましょう。
さらに、90度ではなく、-90度にします。
これは、左方向キーを押したときに、魚が右を向いていたら、-90度（左方向）に向けるプログラムになります。
最後は、右方向キーに関するブロックを「右向き矢印キーが押されたなら」の直下に入れます。
左方向キーに関するブロックも同じく、「左向き矢印キーが押されたなら」の直下に入れてください。
これで、いつ左右の方向キーを押しても、自由に反転できるようになったはずです。
魚の上下の動きをつける
魚の動きの仕上げは、上下の動きをつけることです。
上画像のように、各種ブロックを用意して、上向き矢印、下向き矢印を設定しましょう。
なお、上下の移動なので、x座標ではなくy座標に関するブロックを使用してください。
魚のアニメーションを作ろう
現状だと、魚が固まったまま移動しているので、アニメーションを作成して泳いでいるようにしましょう。
アニメーションを作るときは、左上にある「コスチューム」を選択しましょう。
このままだと、4種類の魚で切り替えてしまい、よくわからないアニメーションになるので、いらない魚を削除します。
オレンジ色の魚一匹だけになったら、この魚をコピーしてしっぽとひれの長さを変えます。
しっぽとひれを部分的に選択できるので、長くしておきましょう。
一方で、短いしっぽも作る必要があるので、上画像のように調整しておきましょう。
同じく、コピーして調整します。
このように、4つの画像を用意することで、「デフォルトの魚→しっぽの長い魚→デフォルトの魚→しっぽの短い魚」の順番で画像が切り替わります。
画像を作ったら、コードを組んで自動で切り替わるようにしましょう。
上画像を真似して、プログラムを作ってください。
ちなみに、「次のコスチューム」というのは、2番目以降に作った画像のことを指します。
ブロックの「次のコスチューム」というのは、具体的には上画像のことを指すので、魚のアニメーションがぎこちない場合は、コスチュームの順番をよくチェックしておきましょう。
スクラッチの迷路ゲームの作り方②敵サメの動きを作ろう！
今度は、敵のサメを作っていきます。
まず、スクラッチに元からある素材を探すと、サメが出てくるのでクリックします。
オレンジの魚のコードと似ていますが、上画像を真似してブロックを組んでみましょう。
ただ、10歩だと短いので4歩にして、動きをゆっくりにしてください。
今度は、アニメーションを作るために、サメの画像を作ります。
先ほどのオレンジの魚と同じように、しっぽとひれの長さを調整してください。
ちなみに、上画像のように、マウスで自由に複製した画像、作った画像を入れ替えられますよ。
画像を作ったら、上画像と同じようにブロックを組んでください。
なお、オレンジ色の魚のコスチュームの入れ方プログラムと全く同じなので、コピペしても良いですよ。
最後に、背景を海底の絵にします。
検索ボックスに、「underwater」と打つと、海底の絵が出てくるので、クリックしましょう。
そして、以下のように海の底で泳ぐ魚とサメになりました。一気にゲームっぽくなりましたね。
左上の旗ボタンを押すと、サメは左右に動きます。
そして、十字キーで魚を自由に動かすことができると、本記事におけるゲーム作りは成功です！
まとめ：アニメーションの作り方は意外と簡単
今回の記事では、キャラクターの反転とアニメーション制作を学ぶことができました。
キャラクターの反転は、不等式（＜、＞）の理解が必要なので、よくわからなかったお子さんは、身の回りの大人に意味を聞いてみたり、算数の教科書を見てみると良いでしょう。
なお、アニメーションは、マウス操作一つで、手作りできるのが簡単です。
わからない方は、ぜひ本記事をよく読んで、理解を深めてみてください。
おつると申します。２児の息子の専業主婦です。長男は、ややADHD気質がありますが、毎日子育て奮闘中。夫が、発達支援の仕事をしていたこともあり、いつも勉強になります。日々感じたことを子育てで役に立つノウハウとして記事でアウトプットしています。デザインが得意！ブログのサムネイル、アイコンなど、すべて手作りです！よろしくお願いします！
参考にします！
頑張ってください！
わからないことがあれば、投稿してくださいね。
おつる