キャリまが

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

Scratch Jr.作例「めいろゲーム」を作ろう後編(2/2):ユーザビリティを意識した「方向キー」を作る

この記事は「Scratch Jr.でめいろゲームを作ろう前編:背景を自作しよう 」の続きです!

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

最近は子どものプログラミング教育のために、小学生から使えるプログラミングソフト「Scratch Jr.」でゲームを作っています。

Scratch Jr.についての簡単な説明は↓の記事を御覧ください。

関連記事:5歳からできる?!Scratch Jr.で初めて触れる「プログラミング的思考」

これまで作ったゲームは「Scratchで作ったゲームまとめ」にまとめていますので、是非ご覧ください。

さて、今回は少しだけ発展系の「めいろゲーム」後編です。
完成系はこちら↓



後編のポイントは「ユーザビリティを意識した方向キーをつくる」です。

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

Scratch Jr.での「方向キー」の作り方!

前編では背景と迷路の壁、それからへびとりんごのキャラクターをプログラムしました。


さて、ここからは今回のゲームのポイントである「方向キー」を作っていきます。
方向キーとはつまり、矢印のような形のボタンをタップすると、キャラクター(今回はにわとり)がその方向に動く、というものですね。

ボタンを作る 

まず最初に、ボタンを作ります。
新規キャラクターで、三角形を重ねて作りました。
まず三角形ツールで三角形を作り、複製ツールで複製します。
それを重ねて、上側を赤、下側をグレーに塗りつぶして完成です。


あとは、これを回転ツールで回転させ、上、下、左、右の4つを作ります。

方向キー側のプログラム

さてつづいて方向キーにプログラムしていきます。
最初に、下向きのキーに「タップしてスタート」ブロックと、「オレンジ色のメッセージをおくる」ブロックを繋げました。


にわとり側のプログラム

次ににわとり側に、「オレンジ色のメッセージでスタート」と「下に動く」ブロックを繋げます。
スピードは一番早くします。


これで、下向きのボタンをタップすると、にわとりが下に動くようになりました。

さてここでひと工夫なのですが、にわとりの動く距離は「3」に設定します。
なぜ「3」なのか?

前編で背景を自作した時のことを思い出してみてください。
背景を自作する際に格子状の模様を描きましたが、その格子の一辺が3マスでした。


そして、にわとりは、方向キータップ1回につき、格子を1マスずつ進むようにしたいのでした。
つまり「背景の格子1マス=Scratch Jr.のグリッドで3マス」なので、にわとりの進む距離は「3」なのです。

方向キーのボタン操作性のための工夫

さて、今度は方向キー側にもボタン操作性のための工夫をいれたいと思います。
先ほど作った方向キー側のプログラムはこちら。


実はこれだけだとある問題があるのです。
それは「ボタンが連打できてしまう」ということです。

プレーヤーは早くにわとりを動かそうとして方向キーを連打することが容易に想定できます。
しかし、ボタンを続けて連打してしまうと、にわとりがグリッド3マスを進む前に、さらに次の命令が飛んでしまうため、「動く距離がグリッド3マス単位にならない」=「動く距離が背景の格子1マス単位にならない」のです。

と、書いてもわかりづらいので、動画を撮ってみました↓



と、こんな感じに動く距離がバラついてしまい、背景の格子どおりに進みません。
すると何が起こるかというと、上手いこと迷路を抜けられません!
これではクソゲーになってしまいます・・・。

方向キーを連打できないようにプログラムする

と、いうわけで方向キーを連打できないようにプログラムします。

と言ってもめっちゃ簡単なんですけどね。
このように、メッセージを飛ばす前後に「けす」と「みせる」で挟み込むだけです。


これで、ボタンをタップすると一度ボタンが消えるので、連打できないようになりました↓



なお、ボタンが消えてまた現れるのが遅いとイライラするので、速さを一番早くします。


あとは上、左、右の操作についても、色違いのメッセージを使って同様にプログラムし、完成です!



まとめ:ユーザーの操作を想定する

ついに完成しました!
今回は、ユーザーがボタンを連打することを想定して、操作性(ユーザビリティ)を上げるプログラムを行いました。
このようにユーザビリティを考えることもプログラミングにおいて非常に重要なことですね。

ただ、完成したはいいんですけど、なんか動きが重いんですよねぇ・・・。
Scratch Jr.はちょっとプログラムの量が多くなるといきなり動きが重くなるようです。
やはり、子ども向けなので作れるゲームには限界があるようですね。

まぁでも、今回のようなユーザビリティを意識した工夫までできれば、万々歳ですね。
Scratch Jr.ならタブレットで直感的に操作できるので、小学生でもハマれば結構複雑なプログラムが組めそうですね!

うちの息子にもどんどん体験させていこうと思います。

それでは〜。


スポンサーリンク