キャリまが

30代で未経験からグローバル企業に転職した筆者が、英語、お金、子育てなどについて語るブログ

Scratch Jr.作例「めいろゲーム」を作ろう前編(1/2):背景を自作しよう

こんにちは。
キャリまが管理人のヘルペスもちです。

最近わが家の「プログラミング教育担当大臣」として小学生からできるプログラミングソフトScratch Jr.でゲームを作っています。
今回で3作目となります。
これまで作ったゲームは「Scratchで作ったゲームまとめ」にまとめていますので、是非ご覧ください。

さて今回は「めいろゲーム」を作ります。
完成形はこちら↓



今回のポイントは

  • 背景を自作する
  • 方向キーを作る

の2つです。
「方向キー」とはゲームでよくある「十字キー」みたいなのモノですね。
あれを画面上に表示して、タップしたらキャラクターがその方向に動く、というプログラムをやってみたいと思います。

それではいってみましょう!


まず最初に画面をつくる

毎回恒例となりつつありますが、最初にゲームで使う画面を全部作っちゃいましょう。
今回必要なのは

  1. スタート画面
  2. ゲーム画面
  3. ざんねん!画面
  4. クリア!画面

の4つですね。
右側の「+」ボタンから画面を追加し、「スタート」ボタンと「もどる」ボタンに、それぞれ画面遷移もプログラムしました。
背景はすべて「のうじょう」にしています。


ここまで読んでみて操作がわからない場合は「キノコ採りゲーム」から読んでみてください。

ちなみに、Scratch Jr.って画面は4つまでしか作れないんですね。
なのでゲームと言ってもあんまり複雑なのは作れないですね。
ま、子ども向けなので仕方ないですね。

なお今回使う4つの画面のうち2つ目の「ゲーム画面」だけは自作しますので、次の項で解説します。


操作性における工夫:ゲーム画面の背景を格子状にする

さて、これまで作ってきたゲームでは、予め用意された背景をそのまま使っていましたが、今回はそこにひと手間加えてゲーム画面を自作します!

YouTubeなんかでも迷路のゲームを作っている人は多いですが、僕はちょっと自分なりの工夫を入れています。

それがこのように、背景を格子状にすることです。

今回作るゲームではキャラクターは、ボタンタップ1回につき、一定の距離しか動きませんが、その制限をプレーヤーが一目で理解できるようにしたつもりです。

格子が表示されていることで、プレーヤーは直感的に「ボタンタップ1回につき、格子1マス分しか進まないのだな」とすぐに理解できます。
もし格子がないと、1回のタップでどのくらい進むのかが分からないため、またボタンを押し続けたら進み続けるのか?等と誤解してしまうため、操作感にストレスを覚えてしまうだろうと考えました。
このように、どういうインターフェースがユーザーにとって親切か、を考えるのもプログラミングを学ぶうえにおいては非常に重要なことだと思います。


背景を自作する

さて背景の自作については描画ツールを使って描いていきます。
まず背景選択画面で、「のうじょう」を選択し、編集ボタンをタップします。

長方形ツールで、一辺が3マスの正方形を描きます。厳密に正方形じゃなくても全然OKです。
塗りつぶしツールで中を塗りつぶしましょう。


あとは、複製ツールでこれを複製していきます。
そして、色ちがいで横が6マス、縦が4マスになるように配置します。


背景が完成しました。



迷路の壁を作る

背景ができたので、つづいて迷路の壁を作っていきます。
迷路の壁は、背景ではなく「キャラクター」で作ります。

なぜなら、にわとりがぶつかったら「ざんねん!」画面に遷移するようプログラムする必要があるからですね。
Scratch Jr.ではプログラムできるのはキャラクターだけで、背景にはプログラムすることはできません。

今回作る迷路の壁のような直線は、描画ツールの「長方形ツール」を使います。


直線ツールがあればよいのですが・・・、無いので仕方ないですね。

壁は、縦:横の比率が2:3になるように作りましょう。
僕は一回方眼紙にスケッチしました。


こんな感じで描けました。


作ったキャラクターをゲーム画面上にそのまま配置しただけでは背景のマス目と大きさが合わないので、「おおきさをかえる」ブロックを使って、先ほど描いた背景のマス目のに合うように、大きさを変えましょう。
縦横比が2:3になっているので、大きさを調節すればピッタリ合うはずです。


Scratch Jr.ではキャラクターの大きさは「おおきさをかえる」ブロックを配置して直接タップすることで変えられます。

関連記事:Scratch Jr.で困った時のTipsまとめ

さて、これで迷路の壁が配置できました。
つづいて、迷路の壁にプログラムします。

にわとりが壁にぶつかったら「ざんねん!画面」に遷移するようにしますので、このようにプログラムしました。


これで迷路の壁は完成です!

キャラクターを配置する

続いてキャラクターを配置していきます。

ちなみに、キャラクターを配置していく作業中に、さきほど作った迷路の壁にキャラクターが接触するといちいち「ざんねん!」画面に遷移してしまうので、このように、一旦プログラムを解除しておくと便利です↓

さて今回はへび、りんご、にわとりを使います。

へびのプログラム

まずへびですが、へびは迷路のある場所を行ったり来たりするようにプログラムします。

配置して大きさを変更したら、このようにプログラムします。
スピードは一番遅くしてあります。


動く距離は左右それぞれ「11」です。
ちなみに、キャラクターの動く距離を決めるときには、画面上にマス目を表示させるとわかりやすいです。


これでへびが完成しました。

りんごのプログラム

つづいてりんごですが、にわとりがぶつかったら「クリア!画面」に遷移するようプログラムします。


りんごはこれだけですね。

にわとりには、このゲームのもう一つのポイントである「方向キー」をプログラムします。

というわけでちょっと長くなってきたので後編に続きます!
後半ではいよいよ方向キーをプログラムしていきます。

それでは〜。




スポンサーリンク