Micro:bit×Scratch

Micro:bit×Scratchでクネクネ道を運転しよう! - 縦スクロールも

 

今回はMicrobit(マイクロビット)とScratch(スクラッチ)を組み合わせて、車の運転をしてみたいと思います!

マイクロビットに内蔵の加速度センサーを使うことによって、ハンドル操作をしているように車を動かすことができます。

挑戦してみてニャア!

また、背景を縦スクロールさせる方法もご紹介します。

 

もしスクラッチを初めて触る!という方は、まずこちらから基本操作を覚えましょう。

プログラミング学習はスクラッチから!だれでも簡単・使い方入門

  プログラミング学習を始める入り口として最適なScratch(スクラッチ)の始め方や基本操作を解説します。 小中学生のお子さんを持つご両親はもちろん、プログラミング初心者の方にもオススメで ...

続きを見る

マイクロビットの初期設定などはこちらを参考にどうぞ。

Micro:bit(マイクロビット)をはじめよう!Scratchで使うには?

  Micro:bit(マイクロビット)をこれから始める方へ向けたスタートガイドです。 Micro:bitとは? Micro:bitはイギリスのBBCが開発した手のひらサイズのコンピュータで ...

続きを見る

 

はじめようニャア!

 

 

縦スクロールの背景(スプライト)を作る

まずは背景の用意をしましょう。

縦スクロールの方法はいろいろとありますが、今回は縦長の画像を上から下へ動かすことによってスクロールしている=上に進んでいるように見える方法をご紹介します。

ニャアが作った道の画像を使ってニャア

また、背景は動かすことができないのでスプライトとして追加する必要があります。

 

ポイント

  • 道の画像をこちらからダウンロードする(ファイル名"road.jpg"
  • スプライトをアップロード→"road.jpg"を選んでアップロード
  • コスチューム画面を開く

  • 横幅いっぱいになるように大きくする
    ※もし選択できない場合は"ベクターに変換"をクリック!
    斜め方向に引っ張るとタテとヨコのバランスを崩さず大きさを変えられる

  • 下の端を合わせる(黄色線はステージの枠、ピンク線がその下端)

 

縦スクロールのスクリプト

次に道の画像を縦スクロールさせるスクリプトを作っていきます。

ポイント

  • 下のようにスクリプトを作る

が押されると基準の位置(X:0,Y:0)にセットされるようにします。

スタートしてすぐ動かないように2秒待つを入れたニャア

そして"Y座標を○ずつ変える"で画像を動かすことができます。(下に動かすのでマイナスが必要

この数字でスクロールの速さを調整できるので、好きな速さを探してみてください。

"もしY座標=-710なら"は、道の画像を上端まで動かした時のY座標です。

画像が切れないギリギリの座標だニャア

 

車のスプライトを用意する

次に道を走らせる車のスプライトを用意しましょう。

こちらの車の画像("car.png")をダウンロードして使ってください。
(※この画像はイラストACのフリー画像を加工したものです)

 

ポイント

  • スプライトをアップロード→"car"を選んでアップロード
  • 大きさを20, 向きを0にする
  • スタート位置に置く

 

車のスクリプト

次に車のスクリプトを作っていきます。

まずは何もしなくても自動的に直進するスクリプトです。

ポイント

  • 下のようにスクリプトを作る

先ほどの縦スクロールと同じく"○歩動かす"の数字で速さを調整することができます。

 

右と左に曲がるスクリプト

直進だけだとやがて道から外れてしまうので、右や左に曲がるスクリプトも追加しましょう。

ここでいよいよマイクロビットの登場です!

ポイント

  • 拡張機能を追加→"micro:bit"

  • Bluetoothでマイクロビットを接続する(接続について詳しくはこちら
  • 下のようにスクリプトを追加する

ここまでできたらを押してスタートさせてみましょう。

右や左にマイクロビットを傾けながら、クネクネ道をはみださないように!

上手に運転できるかニャア?

 

ブレーキとアクセルを作る

さて、ここでニャアからの課題があります!

ニャアの課題

マイクロビットのボタンABを使って、ブレーキとアクセルのスクリプトをつくりましょう。


一般的な車ではブレーキは左側、アクセルは右側についています。

これに合わせてAボタンをブレーキ、Bボタンをアクセルとしましょう。

・・

・・・

作ってみましたか?それではこちらが一例です。

ポイント

基本的な考え方は左右に曲がるスクリプトと同じですが、ここで重要なのが"< >まで繰り返す"です。

<<ボタンが押された>ではない>まで繰り返すというのは、つまりボタンを押している間だけ実行するということですね!

ここまでできたらを押して再挑戦!

左右の傾きやA・Bボタンを駆使して運転してみましょう。

 

また、ブレーキやアクセルのスクリプト"○歩動かす"の数字を色々と変えながら、速さや進む方向が変わるポイントを見つけてみてください。

たとえばブレーキの歩数をマイナス方向に大きくすると…?

うしろに進みだすニャア

 

 

ゴールを決める

運転に慣れてアクセルなども使いこなすと、縦スクロールが終わる前に画面の端まで到達してしまうこともあるでしょう。

その時は「ゴール」ということにしましょうか。

ゴールの背景を作って背景を変えるようにしても良いですし、ここでは例としてスプライトでゴールを表現したいと思います。

 

ポイント

  • "スプライトを描く"をクリック
  • "GOAL!!"などと文字を書く

  • 車のスプライトに以下のスクリプトを追加する

  • GOAL文字のスプライトに以下のスクリプトを追加する

ステージ(スプライトが動き回るところ)の上端はY座標=180なので、これより上に車が行けばゴールということにしました。

 

発展ポイント

ここまでで基本的なスクリプトをご紹介しました。

工夫次第でもっと面白くすることができると思うので、挑戦してみてください。

たとえば道を難しくする場合はこちら"road_hard.jpg"を使ってみたり、自分で道を描いてみても良いと思います。

また、道からはみ出したらペナルティがあるとか、道に障害物があるなどしても刺激的ですね!

 

おさらい動画とScratchプロジェクトページ

レッスンの流れやスクリプト全体は下のおさらい動画やScratchプロジェクトページにて確認できます。

 

オンラインレッスン受付中!

インスタフォローで更新情報チェックニャア…  

ごきげんよう

 

-Micro:bit×Scratch
-,

error: Content is protected !!

© 2020 ニャアのスクラッチ Powered by AFFINGER5