傾き迷路ゲーム ― 光と音とジャイロで作ろう

Inquiry-Based Study

本体を傾けて遊ぶ「16×16迷路ゲーム」が今日のゴール。ゲームの部品になる光(LEDパネル)・音(圧電スピーカー)・傾き(ジャイロセンサー)を一つずつマスターして、最後は迷路も音楽も自分だけの作品に改造しよう。

Middle School ~ Intermed. 150

今日のゴール

今日のゴールは、本体を傾けて遊ぶ「16×16迷路ゲーム」。赤いプレイヤーを傾きで操作して、青い壁にぶつからないように黄色いゴールを目指すゲームです。

実はこのゲーム、たった3つの部品でできています。
  • 光る —— 16×16 LEDパネル(迷路の絵を映す画面)
  • 鳴る —— 圧電スピーカー(移動音や音楽)
  • 傾きが分かる —— ジャイロセンサー(コントローラーの代わり)
だから、この3つを順番にマスターすれば、迷路ゲームは自分で動かせるし、自分だけのゲームに改造できます。一つずつ攻略していこう。
全体の流れ(約150分)
ステップ内容目安
準備プロジェクトを作って、SPACEBLOCKをつなぐ10分
ステップ1光 —— LEDパネルで絵を描く10分
ステップ2音 —— 圧電スピーカーでメロディを作る10分
ステップ3傾き —— ジャイロセンサーを知る10分
ステップ43つを合体 —— 迷路ゲームを動かす20分
ステップ5改造 —— 自分だけの迷路ゲームにする60分
発表作った迷路をみんなで遊ぶ20分
まとめ学んだことについて10分

準備しよう

まずは道具とプログラミング画面の準備から。ここは毎回同じ手順なので、覚えてしまおう。
プログラミング画面を開こう。
「新しいプロジェクトを追加する」をクリックすると、プロジェクト作成ウインドウが出るので、「作成」をクリックしてプログラミング画面を開きます。
SPACEBLOCKをパソコンにつなげよう。
プログラミング画面を開くとデバイス接続ウインドウが表示されるので、SPACEBLOCKとパソコンをUSBケーブルでつなげます。つなげたら「USBで接続する」をクリック。新しくウインドウが表示されるので「SPACEBLOCK」をクリックしてから「接続」を押します。
※2回目からは自動でSPACEBLOCKがパソコンとつながります。

ステップ1 光 —— LEDパネルで絵を描こう

最初の部品は「光」。迷路ゲームの画面はこの16×16 LEDパネルで、迷路の壁もゴールもプレイヤーも、すべてLEDの色でできています。つまり「色で絵を描く」ことがそのまま迷路作りになる。まずはパネルに自由に絵を描いて、感覚をつかもう。
8×8 LEDパネルをつなげよう。
USBケーブルの隣にある横向きピンソケットに、LEDパネルが立つように写真のようにつなげます。
※LEDパネルをつなげた後に本体を持つときは、パネルではなく本体を持ちましょう。
絵を描いて光らせよう。
「LED」カテゴリの「RGB LED [A10] を点灯」ブロックを「プログラム開始」ブロックにつなげて、色を選んで光らせたい場所をクリック。絵ができたら「実行」!
アニメーションを作ってみよう。
2枚目の絵を追加して、絵と絵の間に「基本」カテゴリの「一時停止(1000)ミリ秒」ブロックを入れると、パラパラ漫画のようなアニメーションになります。※1000ミリ秒=1秒。

ここで描いた「色の絵」が、後でそのまま迷路のマップになります(迷路ゲームでは、もっと大きい16×16パネルにパワーアップします)。壁=青、ゴール=黄色。迷路作りの正体は「絵を描くこと」です。

ステップ2 音 —— スピーカーでメロディを作ろう

次の部品は「音」。ゲームの気持ちよさは音で決まります。移動の「ピコッ」、クリアのファンファーレ、失敗の「ブブー」——全部このスピーカーの仕事。後で迷路ゲームの音楽を自分で作り替えるために、鳴らし方を覚えておこう。
圧電スピーカーをつなげよう。
圧電スピーカーの赤と黒のワイヤ線の色を確認して、青色ピンソケットの図と同じ場所につなぎます。
音を鳴らしてみよう。
「出力」カテゴリの「[A0(T2)]から[中のド]を(1000)(ミリ秒)鳴らす」ブロックを「プログラム開始」につなげます。
  • 音の高さ(ドレミ)は「中のド」をクリックすると出てくる鍵盤から選ぶ
  • 音の長さ(リズム)は「(1000)」の数字を変える
高さと長さを組み合わせると、メロディが作れます。
光と音を合わせよう。
LEDブロックの後に音ブロックを並べると、絵に合わせて音が鳴ります。繰り返したいときは「繰り返し」カテゴリの「繰り返す」ブロックで囲みます。

ここで作ったメロディは、後で「クリアの音楽」や「失敗の音」に使えます。お気に入りのフレーズを見つけておこう。

ステップ3 傾き —— ジャイロセンサーを知ろう

最後の部品は「傾き」。この迷路ゲームに、ボタンやコントローラーはありません。本体の傾きそのものがコントローラーです。SPACEBLOCKに入っているジャイロセンサーは、本体が地面に対してどれくらい傾いているかを、X軸・Y軸・Z軸の3方向の角度で測れます。
傾けると数字が変わる。
X角度・Y角度は、水平のとき0。傾けるほど −90〜90 の数字に変わります。本体をいろいろな向きに傾けて、角度がどう変わるか確かめてみよう。
「傾いたら○○する」を作れる。
「入力」カテゴリの「ジャイロの角度を読取」ブロックと、「論理」カテゴリの「もし〜なら」ブロックを組み合わせると、傾きをスイッチにするプログラムが作れます。下の参考プロジェクトをコピーして試してみよう。

この「角度を読んで、もし〜ならで判定する」が、そのまま迷路ゲームの操作の正体です。
参考プログラム:動きで光らせよう
まずは「傾きをスイッチにする」いちばんシンプルな形を見てみよう。LEDパネルを上に向けると光り、もどすと消える、それだけのプログラムです。
プログラムの読み方
  • ジャイロ の 加速度 X を読取:本体がどちらを向いているかが「数字」になって出てきます(迷路ゲームで使う「角度」も、考え方はまったく同じです)
  • もし 10 < その数字 なら:LEDパネルが上を向いたとき、という意味。まるい絵を表示します
  • でなければ:それ以外のときは全部消灯。だから、かたむけると光って、もどすと消えます
  • 10 を大きくすると、もっと大きくかたむけないと光らなくなります。数字を変えて、反応するかたむき具合を調整してみよう
この「センサーの数字を読む → もし〜ならで判定する → LEDに出す」という3ステップが、そのまま迷路ゲームの操作の正体です。
⚠ 持ち方に注意
ジャイロはSPACEBLOCK本体の中に入っています。かたむけて試すときは、LEDパネルやセンサーなどのパーツを持たず、本体を持って動かそう。パーツを持つと、線がぬけたり、こわれたりすることがあります。
QR code for project

ステップ4 3つを合体 —— 迷路ゲームを動かそう

まずはLEDパネルを16×16にパワーアップ。
迷路ゲームの画面には、これまでの8×8より大きい16×16 RGB LEDパネルを使います。配線もプログラムも基本は8×8と同じ。線が白・赤・緑の3本になっている点だけが違います。
つなぎ方(横向き黒ピンソケット)
本体の横向きの黒ピンソケットを自分の方に向けて、左から次の順に差し込みます。
16×16 LEDパネルの配線(左から順に)
線の色役割差す場所
白(GND)電気の帰り道
赤(5V)電源真ん中
緑(DIN)データ(絵の信号)
電池ボックスは、LEDをたくさん光らせるためのパワーアップ用。使うときだけつなげましょう。
注意:「DOUT」と書かれた側の線や、パネル真ん中から出ている5V・GNDの線は、外部電源やパネルを連結するときに使う配線です。必ず「DIN」と書かれた線を使いましょう。
プログラムはブロックのサイズを変えるだけ。
8×8で使ったのと同じ「RGB LED」ブロックがそのまま使えます。ブロック左上の歯車マークをクリックして、サイズを「16x16」に切り替えれば準備完了です。
パネルの準備ができたら、いよいよ迷路ゲームです。
迷路ゲームを自分のものにしよう。
下の参考プロジェクト「16x16迷路ゲーム」を開いてコピーすると、自分のプロジェクトになります。ジャイロセンサーと16×16 LEDパネルをつなげて「実行」してみよう。
※LEDパネルがなくても、シミュレータ画面で遊べます。
QR code for project
ゲームのルール
  • 赤いドット=自分(プレイヤー)。本体を傾けた方向に進む
  • 青いドット=壁。ぶつかるとゲームオーバー
  • 黄色いドット=ゴール。たどり着けたらクリア!
  • 迷路は3種類の中からランダムで選ばれる
どうやって動いている?
プログラムの中身を覗くと、ここまでに学んだ「光」「音」「傾き」の3つが全部使われています。ポイントは、プレイヤーが進む前に「移動先の色」をチェックしていること。
  • 移動先が「青」(壁の色)だったら → ループから抜けてゲームオーバー
  • 移動先が「黄色」(ゴールの色)だったら → 「クリアしたか」をtrueにしてクリア
  • それ以外なら → 1マス進んで、移動の音を鳴らす
色で壁やゴールを判定するのが、このゲーム最大の秘密です。

ステップ5 改造 —— 自分だけの迷路ゲームにしよう

ここからが本番。プログラムの「どこを変えると、何が変わるか」が分かれば、このゲームは君の作品になります。一つずつ試していこう。
①迷路の形を変える → 関数「迷路決め」
関数「迷路決め」の中に、迷路の絵が3枚入っています。RGB LEDブロックの絵を描き替えれば、迷路が変わります。
  • 壁は青(#0011CC)、ゴールは黄色(#FFF100)のまま使うこと(違う色にすると、壁やゴールとして判定されません)
  • スタート(左上)からゴールまで、通れる道があるか必ず確認しよう
  • 3枚とも同じにすれば「必ず同じ迷路」、1枚だけ変えれば「たまに出るレア迷路」になる
②音楽を変える → 音の関数3つ
音楽担当は「クリア時の音」「失敗時の音」「移動時の音」の3つの関数です。
  • 音ブロックを増やしたり、高さ・長さを変えたりして、自分だけのメロディにしよう。音の学習で作ったフレーズの出番です
  • 「移動時の音」は「速度÷2」ミリ秒。動きにぴったり合う長さになっています
③色のルールを変える → 最初の変数
「プログラム開始」のすぐ下で、ゲームのルールを変数で決めています。
  • 変数「青」=壁の色(#0011CC)、変数「黄色」=ゴールの色(#FFF100)。ここを変えたら、迷路の絵も同じ色に揃えること
  • 変数「速度」を小さくすると、プレイヤーが速く動く(=難しくなる)
④クリア画面・ゲームオーバー画面を変える → 関数「ゲーム」の最後
関数「ゲーム」の一番下にある「もし クリアしたか なら」のブロックがエンディング担当です。
  • 「なら」の中 = クリアしたときの絵と音
  • 「でなければ」の中 = ゲームオーバーのときの絵と音
絵を描き替えたり、音楽を変えたりして、自分らしいエンディングにしよう。
改造早見表
やりたいこと変える場所ヒント
迷路の形を変える関数「迷路決め」のRGB LEDブロック壁=青・ゴール=黄色はそのまま
音楽を変える関数「クリア時の音」「失敗時の音」「移動時の音」音ブロックをつなげて曲にできる
壁・ゴールの色を変える最初の変数「青」「黄色」迷路の絵も同じ色に揃える
スピードを変える変数「速度」小さくすると速い(難しい)
クリア/失敗画面を変える関数「ゲーム」の最後の「もし」絵も音も変えられる

応用 もっとすごい迷路ゲームに!

慣れてきたら、本物の迷路ゲームにあるような要素を足してみよう。下の3つは応用の見本プロジェクト。コピーして、中の仕組みを覗いてみよう。
  • コインとスコア:迷路にコイン(水色)を置いて、取った数をスコアに。最後に点数がLEDに流れる
  • 敵とライフ:オバケが自動でパトロール。触れるとライフが1減って、ハートが消えていく
  • ワープとボス:紫のワープゾーンで瞬間移動。最後は弾をよけながらボスに3回体当たり!
他にも「時間制限」「2人対戦」「隠し扉」……アイデアは無限大。どう作るかを考えるのが、プログラミングの一番面白いところです。
QR code for project
QR code for project
QR code for project

発表しよう

完成した迷路を友だちと交換して遊んでみよう。遊んでもらうときは、こんなことを話せるとかっこいい。
  • どんな迷路?(タイトルがあると良い)
  • 工夫した場所・見てほしい場所
  • 難しかったところ、次にやってみたいこと
お疲れさまでした!

まとめ

今日つくった迷路ゲームは、たった3つの部品でできていました。
  • 光(LEDパネル)=画面:迷路の壁も、ゴールも、プレイヤーも、ぜんぶ「色のついた点」でできていた
  • 音(スピーカー)=手ごたえ:移動の音・クリアの音・失敗の音があるだけで、ゲームはぐんとおもしろくなる
  • 傾き(ジャイロ)=コントローラー:ボタンがなくても、本体をかたむけるだけで操作できる
そして、この3つをつないでいたのが「センサーの数字を読む → もし〜ならではんだんする → 光と音で出す」という3ステップです。参考プログラム「動きで光らせよう」も、迷路ゲームの中身も、やっていることはまったく同じでした。
プログラムは、読めれば変えられる。迷路の形・音楽・色のルール・クリア画面――「どこを変えると何が変わるか」が分かった人は、もうこのゲームの作者です。
次にやってみたいこと
  • ステージを何面も用意して、クリアしたら次の迷路へ
  • 制限時間やライフを足して、もっとドキドキさせる
  • ジャイロを別のセンサー(明るさ・音など)に取りかえて、まったく別の操作にしてみる
今日おぼえた3ステップは、次にどんな作品を作るときもそのまま使えます。