レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

中級

今回つくるゲーム

難易度2 out of 5 stars

今回はレゴブースト(LEGO®️BOOST)とスクラッチを連携させて、ドライビングゲームを作っていきます。今回はレゴブーストのムーブハブをハンドルに見立てて、傾きセンサー(チルトセンサー)を活用し、車道を歩くクマを避けていきます。前回の記事で書いた黒ひげ危機一髪ゲーム同様、スクラッチの画面とLEGOの動きが連動するのがよくわかるゲームになっています。

レゴブースト×スクラッチ レーシングゲーム

はじめに

まず、こちらのリンクからリミックスをしてください。バイク・白線・クマ・背景のコスチュームがすでに用意されています。また、ゲームに利用する効果音・BGMも最初からセットされています。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

バイクを動かす(スクラッチ)

バイクのプログラミングから行っていきます。
最終的にはバイクはレゴブロックを使って動かしますが、まずはスクラッチ上で動くようにします。
スクラッチ上で動きをすべて調整してからそれをレゴブロックで代用できるようにするとスムーズにゲームづくりができます。

バイクのコード部分に以下のようにプログラムを書いてください。
緑の旗が押されたときにコスチューム・大きさ・位置・向きを設定します。この4点セットは忘れずに初期設定として書いておく習慣をつけると良いです。

続いて、右向き矢印左向き矢印が押されたときの挙動を書いていきます。
右向き矢印が押されている間、120度(右斜め)にバイクを傾けて10づつ右側に進みます。
左向き矢印に関しては逆のことになります。左右の矢印から指が離れるとまた傾きが90度に戻ります。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

この状態でプレーしてみてください。左右の矢印を押すと、バイクが傾きながら横に進むのがわかります。

白線を動かす

次に白線を動かしていきます。背景は変わりませんが、白線を手前に向けて動かしていくことで、バイクが道路の上を前に進んでいるように見せることができます。

旗が押されたときに、自分自身は隠して、2秒ごとにクローンを作っていきます。
クローンされたときに、道路の上の端からスタートして手前に進んできます。(y座標を-2ずつ変える)
そして端まで来たらクローンを削除します。さらに、白線は遠くにいるときは小さく見えて、近寄ると大きく見えてくるので、大きさが少しずつ大きくなってくるようにします。そのために大きさを0.5ずつ変えるをループの中に入れています。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

実際にプレイしてみると以下の動画のようになります。本当は白線が動く早さも遠くにいるときは遅く近づくと早くなりますが、その部分は後ほど修正していきます。

クマを動かす

上から下に流す

続いてクマを動かしていきます。基本的には白線と同じ考え方になります。
以下のようにクマのクローンをつくり画面の上から下に流していきます。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

位置と大きさをランダムにする

このままだと白線と同じようにクマが一直線になって並んでくるので、クマが現れる位置と大きさをランダムにします。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

歩かせる

さらにクマを歩かせます。
クローンされたときをもう一つ作り、コスチュームを変えながらクマを動かします。
10歩動かすの部分がクマの歩くスピードとなり0.2秒待つの部分がクマの歩幅となります。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

左右にランダムに動かす

一方向だけ向くとゲームとしては面白くないので左右にランダムに歩くようにします。
クマの向きという変数を使って、向きがランダムになるようにプログラムを組み直します。
また左右に向きを変えるときは必ず回転方法を左右のみにするを入れておくようにしましょう。
そうしないと-90度になったときにクマが上下反転してしまいます。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

ここまでできたら、実際に動かしてみましょう。以下の動画のようにクマが次々と現れ左右に歩けば成功です。白線の時にも言いましたが、遠くにいるクマは動きがおそく、近くにいるほど早いはずなので、その辺りの調整は後ほど行います。

バイクがクマにぶつかった時の動き

バイクがクマにぶつかったらゲームオーバーです。
”バイクがクマにぶつかる”というのは普通に考えると、以下のように、バイクのプログラムの中にクマ(bear walking)に触れたらというコードを追加することになります。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)
レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

しかし、これだとヘルメット部分に足が触れてもゲームオーバーになってしまい、それではゲームとしてはよくありません。(絵としては触れていても実際にバイクにぶつかっている距離感ではないので)

そのため、今回は当たり判定としてズボンの赤色部分がクマの茶色部分に触れたというのをぶつかったと判定するようにします。まずは以下のようにコードを書いてください。色を指定する前に「もし」の内側を解説します。クマにぶつかった時にコケたコスチューム(コスチューム2)に変更し、Skidの音を鳴らし、すべてを止めます

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

次に、色を指定していきます。左側のカラーパレットをクリックしてください。
そして、一番下にあるスポイトを選択し、ズボンの色を指定します。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

同様に右側のカラーをクマの色を指定していきます。クマが出現していないと思いますので、クマのスプライトに移動し表示するを選択してください

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

両方の色を指定するとこのようなコードになります。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

ここまでできたら一度プレイしてみましょう。クマがズボンのところまできたらゲームオーバーになります。

遠景と近景でスピードを変える

これまで作ったゲームだと、急にクマが近づいてきて、違和感があるのではないでしょうか。実際は視覚の原理で、遠くのものはゆっくり動き、近くのものは早く動きます。これをゲームでも再現すると、より自然な動きになります。クマのコードを以下のように変更します。
近づき回数_クマという変数を作り、クローンされた時に値は0で、ループが回るたびに1づつ値が増えていきます。変数を作る時に大切なポイントがあります。この変数の数値はクローンごとに独立させたいので「このスプライトのみ」にチェックを入れるようにしてください。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

この近づき回数_クマにスピードと大きさの変化を比例させることで、遠くにいるほどスピードがゆっくりで大きさの変化も少なく、近づくほどスピードが早く、大きさの変化も大きくなります。
ここの、-0.03や0.006のような数字(比例定数)はベストなものにしていますが、実際はいろいろな数字を代入していって最適なものを探さなければなりません。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

同様に白線のコードも変更します。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

ここまでできたら実際にプレイしてみてください。さきほどよりクマの動きが自然になっていると思います。

バイクのハンドルをつくる

ここまでできたら、レゴブーストでハンドルを作っていきます。
ハンドルは、ムーブハブだけでも大丈夫ですが、握りやすさと雰囲気づくりのために作っていきます。ですので適当で大丈夫です。カラーセンサーを装着しますが、こちらは後ほどクラクションに使います。

レゴブースト:バイクハンドルの作り方

レゴブーストとスクラッチを連携させる

バイクハンドルができたらスクラッチにレゴブーストを連携していきます。
連携するには拡張機能を利用します。左下のプラスボタンを押して拡張機能一覧を表示します。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

一覧からLEGO BOOSTを選択します

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

指示に従い、レゴブーストに連携していきます。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)
レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)
レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

接続完了できたら、レゴブーストと連携するブロックができているはずです。

ハンドルと連動するプログラムを作る

ここからハンドルと連動するプログラムを作っていきます。
現状は、バイクを左右に動かすには左右の矢印を使っていますが、その部分をハンドルの傾きで動くように書き換えていきます。下図のように、モーターが付いている方に傾けると”上方向の傾き”、逆側を”下方向の傾き”というように定義されています。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

つまり、左に移動するためには上方向に傾けて、右に移動するためには下方向に傾ける、ということになります。

コードに書いていくと以下のようになります。
左右にハンドルを傾けてある程度もどったら(傾きが10以下になったら)車体もまっすぐにもどす(90度に向ける)という形にしています。     

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

これでも大丈夫ですが、せっかくのハンドルなのでいっぱい傾けたら、バイクもいっぱい傾くようにして横滑りも大きくなるようにしましょう。以下のようにそれぞれ傾きに比例させます。2や5で割っているのは最適なところを探してのことですので、実際はそれを探す作業が必要になります。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

クラクションをならす

最後にクラクションを鳴らせるようにしていきます。カラーセンサーに手をかざすと、クラクションが鳴り、クマが早歩きで逃げていくようにします。
まずはバイクのコードに以下を追加します。手を触れるということはどれかの色を見たときということになります。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

次に、ホーンを受け取った時にクマが早足になるようにします。
下の図のように、まずクマスピードクマの歩幅といいう二つの変数を用意します。
そして、初期値をそれぞれ100.2に設定し、ホーンを受け取った時に、それぞれ300.2になるようにします。ただし2秒後に元の値に戻します。
そしてその二つの値をクローンされたクマの横の動きに代入していきます。

レゴブースト×スクラッチ ドライビングゲームの作り方(傾きセンサーの活用)

これでホーンを鳴らした時の動きも完成です。


完成

これで完成ですので、実際にプレイしてみてください。現状の設定だと少し簡単だと思いますので、クマの大きさやスピード、出てくる頻度などを工夫してオリジナルのゲームを作ってみてください。

レゴブースト×スクラッチ レーシングゲーム

今回作ったコードは以下でも確認できることができます。