610tのアイコン画像
610t 2021年02月26日作成 (2022年01月18日更新)
製作品 製作品 閲覧数 3531
610t 2021年02月26日作成 (2022年01月18日更新) 製作品 製作品 閲覧数 3531

M5Scratchを使って、M5Scratchの仲間たちとScratchを使ったゲームを作ろう!!

M5Scratchを使って、M5Scratchの仲間たちとScratchを使ったゲームを作ろう!!

はじめに

小学校でもプログラミングを取り入れた授業がはじまり、ブロックベースプログラミング言語のScratchなどが使われていることが多いようです。

Scratchには、micro:bitやLEGOのプログラミング可能なシリーズなどの機器が利用できるような拡張機能が用意されています。
でも、M5Stackの様なマイコンボードも使ってみたいと思いませんか?

ここでは、M5Stackの仲間たちとScratchをつないで、情報のやり取りをする仕組みであるM5Scratchについてご紹介し、簡単なゲームを作ってみます。

使った技術たち

今回のシステムを作成するために、以下のような技術を使いました。

  • M5Stackの仲間たち(M5S)
  • Scratch 1.4

ここで、簡単に説明します。

M5Stackってなあに?

M5Stackは、M5Stack社が作っている多機能マイコンボードです。
M5StickC/M5Stack Basic/M5Stack Gray (Faces )/ATOM Matrix などは、M5Stackの仲間たち(以下、M5S)です。
各機種ごとの比較は、【M5Stack】スペック比較をしてみた ~オススメ品を紹介~などを参考にしてみてください。

M5Sには、以下のような特徴があります。

  • ちっちゃくて、かわいくて
  • ディスプレイが最初から付いていたり(機種による)、
  • 無線のWiFiやBluetoothが使えたり、
  • 加速度やジャイロや地磁気が取れるIMUがあったり(機種による)、
  • ボタンスイッチもあったり、
  • 温度計もあったり、
  • バッテリーがあったり、
  • 拡張モジュールGROVEで色々拡張できたり、
  • LEDもついていたり(機種による)、
  • (Facesのみ)キーボードゲームパッド電卓キーがあったり、
    他にも、とってもたくさん仲間たちがいるよ!!
    M5Stackの仲間たち(M5S)

Scratchってなあに?

Scratchはプログラミング教育などでよく利用されるブロックを並べてコードを作成する言語です。
今では、Scratch 3.0というバージョンがHTML5対応のWebブラウザ経由で利用できるようになっています (https://scratch.mit.edu/) 。他にもScratch 2.0というFlash上で動いていたバージョンもありました。
さらに、インターネットにつながっていないオフラインでも利用できるバージョンがそれぞれにあります。

今回は、後述のScratch遠隔センサーを利用するために、少し古いバージョンであるScratch 1.4を使います。
Scratch 1.4には、以下のような特徴があります。

  • Scratch遠隔センサーが使える。
  • オフラインで使える。
  • Windows, Linux, FreeBSD, NetBSD, macOS(pyonkee)をはじめとする様々なOSで動作可能。
  • ベースになっているのがSqueak(Smalltalk)で、それを使って魔改造が可能。
    Scratch 1.4のイメージ

Scratch遠隔センサーってなあに?

Scratchの古いバージョンであるScratch 1.4では、Scratch Remote Sensor Protocol (遠隔センサープロトコル)を使って、ネットワーク経由でScratchとインタラクションする仕組みが用意されています。
Scratch遠隔センサープロトコルには、以下のような特徴があります。

  • TCP/IP (ポート42001)経由でデータのやり取り
  • テキストベースのプロトコル
    • メッセージのやり取り: broadcast "メッセージ"
    • 変数のやり取り: sensor-update "変数" "値" ...
      Scratch遠隔センサーを使ったインタラクション

Scratch側での準備は、遠隔センサーを有効にすることだけです。

  • 調べる->"スライダセンサーの値"を右クリック->"遠隔センサー接続を有効にする"を選ぶ
    Scratch遠隔センサーを有効にする

M5Scratch

M5Scratchは、M5Stackの仲間を表すM5Sと、Scratchをあわせて作った造語です(M5Scratch=M5S+Scratch)。
M5Scratchは、Arduino IDEで作った、M5SとScratchとのやり取りを行うプログラムです。
Scratch側には改造は不要で、Scratch遠隔センサーを有効にするだけで動作します。
実際のコードは、 github https://github.com/610t/Arduino/tree/demo/M5Scratch を見て下さい (デモ用プログラムは、demoブランチで開発しています)。
詳しい説明やM5Scratchの改造の方法は、M5Scratchに関するなにかを見てください。
M5Scratchのプログラム(一部)

以下、M5SとScratchの情報のやりとりに関して簡単に説明します。
この情報のやりとりは、現在のバージョンのM5Scratchで実装しているものになりますが、もちろん改造をすることで、他のセンサーやアクチュエータの機能を利用することもできます。

ScratchからM5Sへの情報伝達

ScratchからM5Sへの情報伝達は、以下の図のようになっています。
ScratchからM5Sへの情報伝達
Scratch側で特定の変数の値を変更することで、M5S側にその変更がsensor-updateで通知されます。
また、イベントを送ると、broadcastでそのイベントが通知されます。

Scratchのどの変数に従ってM5S側でどんな動作をするのかを実装するためには、Arduino IDE上のM5Scratchプログラムで、受け取るデータやイベントを実装します。
Scratch側では、単に送りたい変数の値を変更したり、メッセージを送ったりするだけです。

現在のところは、以下のような情報をScratchから受け取り、その情報を利用しています。

  • sensor-update
    • 色データ(r,g,b): 円の色を指定
    • 座標(x,y): 猫の座標
    • 角度t: 猫の向いている方向
    • ズームz: 猫の大きさの倍率
    • LED点滅(l): LEDを点灯/消灯(1/0)
    • 文字列(s): 文字列sを画面に表示
  • broadcast
    • broadcast内容を画面に表示

M5SからScratchへの情報伝達

M5SからScratchへの情報伝達は、以下の図のようになっています。
M5SからScratchへの情報伝達
Scratch側で、受け取るデータやイベントを実装します。

  • sensor_update: ブロック[axセンサーの値]などで利用できます。
  • broadcast: ブロック[BtnAを受け取った時]などで利用できます。

データやイベントを送る部分は、Arduino IDE側で実装します。
現状では、以下のような値をScratchに送っています。

  • sensor_update
    • IMU(加速度(ax,ay,az)+ジャイロ(gx,gy,gz)+(Grayのみ)地磁気(mx,my,mz))
    • IMUの値を使った、なんちゃって方位(heading)やpitch, roll, yawなど
    • 温度センサー(temp)
  • broadcast
    ボタン(BtnA,BtnB,BtnC)、キーボード(Key_*)

ゲームを作ろう!!

M5Scratchは、以下の写真のように、現状でも色々なM5Sで動くようになっています。
M5Scratchが動いている様子

以下でM5Scratchを使った二つの作品を紹介します。

ネコちゃんにプレゼントを届けよう!!

以前 DojoCon2020プログラミングコンテスト用に作った、発表動画(3分弱)を見てください。
このデモでは、円周上をぐるぐる動いているScratch Cat(ネコちゃん)に、M5Sの加速度センサーを使ってプレゼントを操作することでネコちゃんにプレゼントを届けています。

ここに動画が表示されます

このコードについては、M5Scratchってなぁに?をご覧ください。

以下のように、複数のM5Sを同時につなぐことも可能です。
ただ、M5S側のコード(M5Scratch.ino)を変更しない限り、IMUのある機種を複数つなぐと、Scratch側の動作は不安定になります。
複数のM5Sをつなぐ

お魚がネコちゃんから逃げるゲーム

今度は、お魚になって、ネコちゃんから逃げるゲームを作ってみます。
ゲームのイメージ

ネコちゃんは、乱数を使ってでたらめに動く、いわゆるランダムウォークをしています。
あなたは、お魚になって、ネコちゃんに食べられないように逃げましょう。
ネコちゃんから逃げた時間が左上に表示されている得点(score)になります。
ボタンスイッチAを押してねこちゃんを挑発すると、ボーナスで10点追加されます。

このゲームは、以下のような簡単なコードで作成することができます。
ネコちゃんのコード

お魚のコード

おわりに

M5Stackの仲間たちとScratchをつないで、遊んでみました。
加速度センサーなどを使って、Scratch側のスプライトを動かすと、色々なプロジェクトが作れそうで、楽しいです。

これからの野望

以下のような野望があります。

  • ワークショップなんかをやって、子供たちにも使ってもらいたい。
  • GPIOを使うようにして、LEDをチカチカさせたり、センサーを追加して使えるようにしたい。
  • 他のM5S(M5Stick C Plus、 ATOM Lite、M5Stack Tough)やWio Terminalなどのマイコンボードでも動くようにしたい。
  • 現在、普通に使われていバージョンであるScratch 3で使えるようにしたい。
    • Scratchを改造しよう(500円)に説明が!!
    • micro:bitとScratchをつなぐ拡張機能のMicrobit Moreという前例がある。
    • Bluetooth Low Energy経由でつながるので、今みたいにScratchホストのIPアドレスを指定しなくていい。
  • 610t さんが 2021/02/26 に 編集 をしました。 (メッセージ: 初版)
  • 610t さんが 2021/02/26 に 編集 をしました。 (メッセージ: M5StickCのリンクを修正)
  • 610t さんが 2021/02/27 に 編集 をしました。 (メッセージ: 複数のM5Sで動作した場合の写真を更新。)
  • 610t さんが 2021/02/27 に 編集 をしました。 (メッセージ: お魚のコードの間違いを修正。)
  • 610t さんが 2022/01/18 に 編集 をしました。 (メッセージ: 記事の種類を追加。)
ログインしてコメントを投稿する