初版

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

# はじめに 小学校でもプログラミングを取り入れた授業がはじまり、ブロックベースプログラミング言語のScratchなどが使われていることが多いようです。 Scratchには、[micro:bit](https://microbit.org/)やLEGOのプログラミング可能なシリーズなどの機器が利用できるような拡張機能が用意されています。 **でも、M5Stackの様なマイコンボードも使ってみたいと思いませんか?** ここでは、M5Stackの仲間たちとScratchをつないで、情報のやり取りをする仕組みであるM5Scratchについてご紹介し、簡単なゲームを作ってみます。 # 使った技術たち 今回のシステムを作成するために、以下のような技術を使いました。 - M5Stackの仲間たち(M5S) - Scratch 1.4 ここで、簡単に説明します。 ## M5Stackってなあに? [M5Stack](http://m5stack.com/)は、M5Stack社が作っている多機能マイコンボードです。 [M5StickC](https://www.switch-science.com/catalog/5517/])/[M5Stack Basic](https://www.switch-science.com/catalog/3647/)/[M5Stack Gray](https://www.switch-science.com/catalog/3648/) ([Faces ](https://www.switch-science.com/catalog/3649/))/[ATOM Matrix](https://www.switch-science.com/catalog/6260/) などは、M5Stackの仲間たち(以下、**M5S**)です。 各機種ごとの比較は、[【M5Stack】スペック比較をしてみた ～オススメ品を紹介～](https://haratta-tech-lab.com/m5stack-spec/)などを参考にしてみてください。 M5Sには、以下のような特徴があります。 - **ちっちゃくて、かわいくて**、 - **ディスプレイ**が最初から付いていたり(機種による)、 - 無線の**WiFiやBluetooth**が使えたり、 - **加速度やジャイロや地磁気**が取れる**IMU**があったり(機種による)、 - **ボタンスイッチ**もあったり、 - **温度計**もあったり、 - **バッテリー**があったり、 - **拡張モジュール**や**GROVE**で色々拡張できたり、 - **LED**もついていたり(機種による)、 - (Facesのみ)**キーボード**や**ゲームパッド**、**電卓キー**があったり、 他にも、とってもたくさん仲間たちがいるよ!!  ## Scratchってなあに? [Scratch](https://scratch.mit.edu/)はプログラミング教育などでよく利用されるブロックを並べてコードを作成する言語です。 今では、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遠隔センサーってなあに? Scratchの古いバージョンであるScratch 1.4では、[Scratch Remote Sensor Protocol]( https://en.scratch-wiki.info/wiki/Remote_Sensors_Protocol) (遠隔センサープロトコル)を使って、ネットワーク経由でScratchとインタラクションする仕組みが用意されています。 Scratch遠隔センサープロトコルには、以下のような特徴があります。 - TCP/IP (ポート42001)経由でデータのやり取り - テキストベースのプロトコル - メッセージのやり取り: `broadcast "メッセージ"` - 変数のやり取り: `sensor-update "変数" "値" ...`  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に関するなにか](https://scrapbox.io/M5S/M5Scratch%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E3%81%AA%E3%81%AB%E3%81%8B)を見てください。  以下、M5SとScratchの情報のやりとりに関して簡単に説明します。 この情報のやりとりは、現在のバージョンのM5Scratchで実装しているものになりますが、もちろん改造をすることで、他のセンサーやアクチュエータの機能を利用することもできます。 ## 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への情報伝達は、以下の図のようになっています。  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を使った二つの作品を紹介します。 ## ネコちゃんにプレゼントを届けよう!! 以前 [DojoCon2020](https://dojocon2020.coderdojo.jp/)[プログラミングコンテスト](https://dojocon2020.coderdojo.jp/contest)用に作った、[発表動画](https://youtu.be/tUXKSZtTxOE)(3分弱)を見てください。 このデモでは、円周上をぐるぐる動いているScratch Cat(ネコちゃん)に、M5Sの加速度センサーを使ってプレゼントを操作することでネコちゃんにプレゼントを届けています。 @[youtube](https://youtu.be/tUXKSZtTxOE) このコードについては、[M5Scratchってなぁに？](https://scrapbox.io/CoderDojoNara/M5Scratch%E3%81%A3%E3%81%A6%E3%81%AA%E3%81%81%E3%81%AB%EF%BC%9F)をご覧ください。 以下のように、複数のM5Sを同時につなぐことも可能です。 ただ、M5S側のコード(*M5Scratch.ino*)を変更しない限り、IMUのある機種を複数つなぐと、Scratch側の動作は不安定になります。  ## お魚がネコちゃんから逃げるゲーム 今度は、お魚になって、ネコちゃんから逃げるゲームを作ってみます。  ネコちゃんは、乱数を使ってでたらめに動く、いわゆるランダムウォークをしています。 あなたは、お魚になって、ネコちゃんに食べられないように逃げましょう。 ネコちゃんから逃げた時間が左上に表示されている得点(score)になります。 ボタンスイッチAを押してねこちゃんを挑発すると、ボーナスで10点追加されます。 このゲームは、以下のような簡単なコードで作成することができます。   # おわりに M5Stackの仲間たちとScratchをつないで、遊んでみました。 加速度センサーなどを使って、Scratch側のスプライトを動かすと、色々なプロジェクトが作れそうで、楽しいです。 ## これからの野望 以下のような野望があります。 - ワークショップなんかをやって、子供たちにも使ってもらいたい。 - GPIOを使うようにして、LEDをチカチカさせたり、センサーを追加して使えるようにしたい。 - 他のM5S(M5Stick C Plus、 ATOM Lite、M5Stack Tough)やWio Terminalなどのマイコンボードでも動くようにしたい。 - 現在、普通に使われていバージョンであるScratch 3で使えるようにしたい。 - [ Scratchを改造しよう](https://otona-scratch.champierre.com/books/1/posts)(500円)に説明が!! - micro:bitとScratchをつなぐ拡張機能の[Microbit More](https://lab.yengawa.com/project/microbit-more-v2/)という前例がある。 - Bluetooth Low Energy経由でつながるので、今みたいにScratchホストのIPアドレスを指定しなくていい。