【スクラッチ】脱出系・迷路ゲームの作り方<前編>

スクラッチでゲームを作るとなれば、迷路のようなゲームを作りたいと思ったことがありますよね?

しかし、一から自分で作るというのは、初心者になかなかハードルが高いものです。

そこで、今回は、脱出系の迷路ゲームの作り方を完全解説していきます。

以下が、この記事で完成を目標とするゲームとなります。

素材は、全てスクラッチに元からあるものを活用しています。

普通の迷路と違って、アイテムを取る脱出系の迷路ゲームとなっています。

そして、今回のゲーム制作では、以下のことが学べます。

  • キャラクター(スプライト)の反転方法が学べる
  • コスチュームを微調整して、アニメーションを作れる
  • 「〇〇または〇〇」とちょっと複雑な条件を設定できる
  • 他のキャラクターに信号を送って、プログラムを発動させる
まえぴー

「面白そう!作ってみたい!」とお子さんの反応が良ければ、ぜひ本記事でゲーム制作に挑戦してみてください。

ゲームを完成する所要時間は、1時間ほどを目安にしてください。
「前編」「後編」「発展編」の3つに分けているので、3回に分けて無理なく取り組んでみましょう。
ブックマーク登録お願いします!

【準備】スクラッチを本当に初めてやる人は、使い方を覚えましょう!

本当にスクラッチを使ったことがなくて、プログラミングの画面を開けていない状態の方は、その編集画面を開く必要があります。

なお、本記事では、スクラッチの画面の開き方、保存の仕方、一回保存してまた途中から作り始める方法には触れていません。

そのため、スクラッチの使い方で困ったら、こちらの記事を参考にしてみてください。

まえぴー

保存の仕方やファイルの読み込みとか、だいたい大丈夫な方はさっそくゲームを作っていきましょう!

スクラッチの迷路ゲームの作り方①魚を上下左右に動かしてみよう

まずは、魚の画像を探して、スクラッチの画面上に出しましょう。

魚の画像を出す

最初に設定されている猫のキャラクターは必要ないので、消します。

次に、画像を探します。

「動物」と選択すると、オレンジ色の魚があるので、クリックしましょう。

魚を左右に動かす

では、上画像のように早速ブロックを組み合わせていきましょう。

「イベント→旗」、「制御→ずっと」、「制御→もし」とブロックをくっつけていきます。

「もし〜なら」の中身は、最初「スペース」になっているので、「右向き矢印」に変更してください。

そして、右向き矢印を押されたら、右方向に動かしたいので、「x座標を10ずつ動かす」というブロックを「動き」から持ってきて、入れ込みましょう。

これで、右方向への移動が完成しました。

今度は、左方向ですが、「もし〜なら」のブロックを「右クリック→複製」して複製します。

すると、全く同じものができるので、「右向き矢印→左向き矢印」に変更します。

そして、x座標の数字を-10にキーボードで、 直接打ち込んでください。

端まで行ったら、魚の向きを変える

「動き」の「もし端に着いたら、跳ね返る」を「もし〜なら」のブロックの中に入れます。

すると、魚を動かすと、確かに向きは変わりまずが、逆さまになってしまいますよね。

その時は、「動き」の「回転方向を左右のみにする」を旗マークの直下に置きます。

すると、向きも変わって、魚の逆さまが直りましたね。

これで、反転するときは、「右左だけにする」と制限をかけられるのです。

方向キーに応じて、魚の向きを変える

先ほど魚が端に着いたら、ひっくり返りましたが、左方向キーを押すとバックしてしまいます。

そこで、方向キーを押したら、その方向に魚を向ける必要があります。

まずは、「もし〜なら」を引っ張ってきましょう。

次に、「演算」の「<50」と書かれたブロックを「もし〜なら」の中に入れ込みます。

次に、「動き」の「向き」を演算のブロックに入れます。

そして、「90度に向ける」も入れ込みましょう。

これは、右方向キーを押したときに、魚が左を向いていたら、90度(右方向)に向けるプログラムになります。

次に、左方向キーを押したら、魚を左に向かせるプログラムを組みます。

まず、先ほど作ったブロックを複製しましょう。

「演算」の不等号を「<」→「>」に変更します。

そして、「動き」の「向き」を入れ込みましょう。

さらに、90度ではなく、-90度にします。

これは、左方向キーを押したときに、魚が右を向いていたら、-90度(左方向)に向けるプログラムになります。

最後は、右方向キーに関するブロックを「右向き矢印キーが押されたなら」の直下に入れます。

左方向キーに関するブロックも同じく、「左向き矢印キーが押されたなら」の直下に入れてください。

これで、いつ左右の方向キーを押しても、自由に反転できるようになったはずです。

魚の上下の動きをつける

魚の動きの仕上げは、上下の動きをつけることです。

上画像のように、各種ブロックを用意して、上向き矢印、下向き矢印を設定しましょう。

なお、上下の移動なので、x座標ではなくy座標に関するブロックを使用してください。

魚のアニメーションを作ろう

現状だと、魚が固まったまま移動しているので、アニメーションを作成して泳いでいるようにしましょう。

アニメーションを作るときは、左上にある「コスチューム」を選択しましょう。

このままだと、4種類の魚で切り替えてしまい、よくわからないアニメーションになるので、いらない魚を削除します。

オレンジ色の魚一匹だけになったら、この魚をコピーしてしっぽとひれの長さを変えます。

しっぽとひれを部分的に選択できるので、長くしておきましょう。

一方で、短いしっぽも作る必要があるので、上画像のように調整しておきましょう。

同じく、コピーして調整します。

このように、4つの画像を用意することで、「デフォルトの魚→しっぽの長い魚→デフォルトの魚→しっぽの短い魚」の順番で画像が切り替わります。

画像を作ったら、コードを組んで自動で切り替わるようにしましょう。

上画像を真似して、プログラムを作ってください。

ちなみに、「次のコスチューム」というのは、2番目以降に作った画像のことを指します。

ブロックの「次のコスチューム」というのは、具体的には上画像のことを指すので、魚のアニメーションがぎこちない場合は、コスチュームの順番をよくチェックしておきましょう。

スクラッチの迷路ゲームの作り方②敵サメの動きを作ろう!

今度は、敵のサメを作っていきます。

まず、スクラッチに元からある素材を探すと、サメが出てくるのでクリックします。

オレンジの魚のコードと似ていますが、上画像を真似してブロックを組んでみましょう。

ただ、10歩だと短いので4歩にして、動きをゆっくりにしてください。

今度は、アニメーションを作るために、サメの画像を作ります。

先ほどのオレンジの魚と同じように、しっぽとひれの長さを調整してください。

ちなみに、上画像のように、マウスで自由に複製した画像、作った画像を入れ替えられますよ。

画像を作ったら、上画像と同じようにブロックを組んでください。

なお、オレンジ色の魚のコスチュームの入れ方プログラムと全く同じなので、コピペしても良いですよ。

最後に、背景を海底の絵にします。

検索ボックスに、「underwater」と打つと、海底の絵が出てくるので、クリックしましょう。

そして、以下のように海の底で泳ぐ魚とサメになりました。一気にゲームっぽくなりましたね。

左上の旗ボタンを押すと、サメは左右に動きます。

そして、十字キーで魚を自由に動かすことができると、本記事におけるゲーム作りは成功です!

まとめ:アニメーションの作り方は意外と簡単

今回の記事では、キャラクターの反転とアニメーション制作を学ぶことができました。

キャラクターの反転は、不等式(<、>)の理解が必要なので、よくわからなかったお子さんは、身の回りの大人に意味を聞いてみたり、算数の教科書を見てみると良いでしょう。

なお、アニメーションは、マウス操作一つで、手作りできるのが簡単です。

わからない方は、ぜひ本記事をよく読んで、理解を深めてみてください。

コメントを残す

メールアドレスが公開されることはありません。