M5StickCを使って、色を探すゲームを制作するワークショップです。
プログラム言語としてUIFlowというブロックプログラミングを使用します。
スキルレベル：Scratchができる。MakeCodeでMicro:bitのプログラミングができる。
必要機材および環境：
・プログラミング用PC
・M5StickC Plus もしくは M5StickC Plus 2
・M5Stack用カラーセンサユニット
・Wi-Fi 2.4GHz帯接続
https://github.com/airpocket-soundman/M5ColorFinderWS
otomaさん制作の色探しゲーム。
二人のプレイヤーがお題で示された色に近い色を探してカラーセンサで読み取り、より近い色を探したプレイヤーが勝ち。
参考サイト：https://protopedia.net/prototype/5078
・M5Stackとは、主にESP32シリーズのSoCをコントローラに採用したマイコンボード。
・メインラインの製品群は5cm各の正方形のプラスチック筐体に各種パーツを重ねる（スタックする）ことで機能拡張できる。
・モデルによるがディスプレイ（タッチ/非タッチ）、物理ボタン、Groveコネクタポート、各種IOを搭載しているため、工作の手間を最小限に抑えてさまざまなソリューションを開発できる。
・ESP32搭載モデルはWi-Fi/Bluetoothによる無線接続も可能。
・単体のマイコンボードとしてだけでなく、多様なセンサ類などの追加ユニットやUIFlowというビジュアルプログラミング環境などを含めたエコシステムが最大の特徴。
M5StickC Plus/Plus2には、リチウムイオンバッテリーが搭載されています。事前に充電することで単独で使用できます。
USB Type Cケーブルで充電できます。
※リチウムインバッテリーを搭載しているため取り扱いには注意が必要です。
過充電、過放電、夏場の車内放置などを避け、スマホと同等の取り扱いを心がけましょう。
M5いろさがしは**「UIFlow」**というブロックプログラミング環境を使用します。
購入直後のM5Stickにはデモプログラムが書き込まれているため、「M5Burner」というツールを使ってUIFlowのファームウェアを書き込む必要があります。
ファームウェアの書き込みはUSBケーブルを通じて行いますので、M5StickCとPCをUSBケーブルで接続したうえで以下の作業を実行してください。
M5Bunerを以下のサイトからダウンロードします。
https://docs.m5stack.com/en/download
ダウンロードしたファイルを解凍しツールを実行します。
M5Burnerを実行したら、左のカラムからコントローラの大分類を選択します。
今回のワークショップでは①「STICKC」を選択します。
右のカラムにはファームウェアの種類が表示されます。
「M5StickC Plus」に「UIFlow」のファームを入れるため、「UIFlow_StickC_Plus」を選択します。
「M5StickC Plus2」を使用する場合のファームは「UIFlow_SticC_Plus2」です。
目的のファームウェアを見つけたら、②のバージョンを確認します。
ファームウェアのバージョンは頻繁に更新されますが、特別な理由が無い限り最新版で問題ありません。
続いて③「Download」ボタンをクリックすると、目的のファームウェアをPCにダウンロードできます。
目的のファームウェアがダウンロード出来たらM5Stickに書き込みます。
書き込みはUSBケーブルを通じて行いますので、PCとM5StickがUSBケーブルで接続されていることを確認してください。
ファームウェアがダウンロードできていると、「burn」ボタンが表示されていますのでクリックします。
書き込み先の確認ダイアログが開きますので、M5Stickが接続されているポートを選び、「Next」ボタンをクリックします。
続いてWi-Fi接続先を問われますので、接続先のSSIDとパスワードを入力して「Next」をクリックします。
M5Stackシリーズは原則2.4GHz帯のみ対応していますので、2.4GHz帯のアクセスポイントを指定してください。
書き込みが開始されるのでしばらく待つと以下の通り表示されると完了です。「Burn successfully, click here to return」のボタンを押して下さい。
正しく設定されている場合、M5StickCの画面い次の写真の様にAPI KEYが表示されます。
（※API KEYは端末ごとに異なる値が自動的に設定されます。）
API KEYが表示された場合はM5Burnerを終了してください。
表示されない場合は設定が間違っている可能性がありますので、次項を参考に設定を見直してください。
M5Stickの設定を確認するにはM5Burnerの「Configure」ボタンを押して設定を読み込みます。
接続先のポートを入力するダイアログが表示されるので、StickCが接続されているポートを指定して「Load」ボタンをクリックしてください。
現在の設定が表示されるため、以下の項目をチェックして正しい値に変更し「Save」ボタンをクリックして書き込んでください。
・COM:現在接続しているポートを選択
・Start Mode:Internet Modeを選択
・Server:flow-jp.m5stack.com（※この項目は任意のサーバでOK）
・WIFI SSID:2.4GHz帯のアクセスポイントを入力
・WIFI Password:アクセスポイントのパスワードを入力
UIFlowはブラウザ上で動作するブロックプログラミング環境です。
次のサイトを開いてみましょう。
https://flow.m5stack.com/
UIFlowのエディタ画面が開いたら、右上の三本線のアイコンをマウスオーバーし、「設定」をクリックしてください。
Api Keyの欄には、M5StickCのディスプレイに表示されているAPI KEYを入力します。
Serverは任意ですが、ここでは「flow-jp.m5stack.com(Japan)」を選択します。
下段には使用するデバイスがアイコンで表示されていますので使用するデバイスを選択します。ここではM5StickC Plusを選択しています。
全て入力できたら「OK」をクリックします。
M5いろあつめでは、カラーセンサユニットを使用します。M5StickCとカラーセンサを付属のGroveケーブルで接続してください。
UIFlowにも使用するセンサを追加します。
追加するとセンサを制御するブロックが使える様になります。
画面左側の「＋」アイコンをクリックして接続するUnitを選択します。
M5Stackで使えるユニットがたくさん表示されます。
ダイアログ上部の検索窓に「color」と入力して絞り込みます。
今回使用するカラーセンサのチェックボックスをクリックします。「port」にA(33,32)と表示されていることを確認して右下の「OK」をクリックしてください。
「port」はM5Stickとセンサユニットの接続に使用するポートを指定する項目です。カラーセンサはport Aを使用します。
UIFlowの画面左のエリアで、ディスプレイのデザインができます。
M5いろあつめでは、3つの四角形と二つのラベル（テキスト表示）を使用します。
まず、左側にある「Rect」アイコンをM5StickCのディスプレイにドラッグします。
ディスプレイに小さな四角が表示されるので、この四角をクリックしてプロパティを開きます。
プロパティの以下の項目を修正します。
X:0
y:0
Width:135
Height:120
M5Stick C Plus及びC Plus 2のディスプレイは幅135、高さ240ピクセル、原点(0, 0)はディスプレイ左上です。
続いて残り二つの四角を引き出してディスプレイ上に適当に配置します。
それぞれrectangle1、rectangle2と命名されているので、プロパティを開いて次の通り設定します。
・rectangle1
X:0
y:122
Width:66
Height:90
・rectangle2
X:69
y:122
Width:66
Height:90
続いて、テキストを表示するための「ラベル」を配置します。
左端のLabelアイコンをディスプレイ上に二つドラッグします。それぞれ「label0」「label1」と表示されていればOKです。
プログラムで使用する変数を作成します。
ブロックのリストから「変数」＞「変数の作成…」をクリックすると変数を作成できます。
作成する変数名を入力して「OK」をクリックします。
同様に以下のすべての変数を作成してください。
・distance1
・distance2
・player1_b
・player1_g
・player1_r
・player2_b
・player2_g
・player2_r
・step_number
・target_b
・target_g
・target_r
作成した変数のうち、「step_number」を初期化します。
「変数」ブロックから変数に値を入れるブロックを使って、step_numberの値を0にします。
数値を入力するブロックは「数学」の中にあります。
これらのブロックを組み合わせて、Setupブロックにつなげます。
Setupブロックは、UIFlow内で最初に実行されるエントリーポイントです。
関数はいくつかの命令を一つにまとめたものです。
まず「set_target_color」という関数を作ります。
この関数は、ターゲットとなる色の値をランダムに決定し、rectangle0に表示します。
関数を作成するブロックはブロックリストの「関数」の中にあります。
先ほど使った変数に値を入力するブロックとランダムな数値を入力するブロックを使用して、「target_r」「target_g」「taget_b」の三つのブロックに0～255の間のランダムな数値を入力します。
ランダムな数値を入力するブロックは「数学」の中にあります。
変数「target_r」「target_g」「taget_b」に従ってrectangle0の色を変更します。
rectangleの色を変更するブロックはブロックリストの「UI」＞「四角形」の中にあります。
以上のブロックを使って、次の様な関数を組み立ててください。
同様に、player1とplayer2が見つけた色を登録する関数を作成します。
関数名は「get_player1_color」「get_player2_color」です。
ここでは、カラーセンサから色の値を読み取るブロックを使用します。
色の値を読み取るブロックは、「Units」＞「Color」の中にあります。
Tips
同じブロックを使用する際は、コピーしたいブロックをダブルクリックするだけでコピーできます。関数の様に複数ブロックを囲っている場合は、囲われているブロックごとコピーされます。
M5StickCの「Aボタン」を押してゲームを進める機能を追加します。
「Aボタン」は、ディスプレイ下に配置されています。
ボタンに合せて動作するブロックは「イベント」の中にあります。
ゲームはstep_numberの値に合わせて3段階で進行します。
「もし～であれば」ブロックを使用して条件式を使い、動作を制御します。
ボタンAを押したときに実行されるブロックの中で、step_numberを使って条件分岐し、ステップに合わせて先ほど作成した関数のいずれかを実行します。
実行したあとにはstep_numberを書き換えて次のステップに進めます。
自分で作成した関数はブロックリストの「関数」の中に新しいブロックとして表示されています。
「もし～であれば」ブロックは、「論理」の中にあります。
同時に条件式を入力するブロックも使用します。
引き出した状態のブロックを次のようにつなげてください。
このままでは一つの状態しか扱えないため「もし～であれば」ブロックの歯車をクリックして「else if」を追加し、三つの状態を扱える様にします。
関数とstep_numberの書き換えブロックを追加してください。
ここまでのブロックで、色を読み取りrectangleに表示するだけのコードができました。M5StickCに書き込んで、動作確認をします。
全体のブロックは次の通りです。画面右下の「Run」ボタンをクリックするとM5StickCが動作します。
Tips
「Run」による実行はテスト的な動作を行うモードです。M5Stickのメモリにはプログラムが書き込まれていないため、電源をリセットすると再度実行はできません。電源をリセットしても再実行させたい場合は「ダウンロード」ボタンを押してプログラムをフラッシュメモリに書き込む必要があります。
ここまでのプログラムで色を読み取って表示するだけの機能が実装できました。
読み取った色を使って勝敗を決めるロジックを追加します。
まず「数学」ブロックの中から、次の二つのブロックを取り出してください。
勝敗を判定するための新しい関数「judgement」を作ります。
先ほどの数学ブロックを次の様にセットして「＋」アイコンをクリックすると、ブロック入力枠が一つ増えます。
さらに「数学」ブロック、「論理」ブロック、「ラベル」ブロックを次の様に組み合わせます。
「ラベル」ブロックはディスプレイにテキストを表示するブロックです。「UI」＞「ラベル」の中にあります。
「judgement」関数では、ターゲットとなる色とplayer1、player2の色の差を計算してそれぞれdistance1とdistance2に保存、色の差が小さい方を勝者としています。
関数ができたら、ボタンAが押されたときに実行されるプログラムを次の通り修正します。
また、「set_target_color」関数に「rectangle1」「rectangle2」を隠すブロックを追加してください。
rectangleの表示を変更するブロックは「UI」＞「四角形」の中にあります。
以上でM5いろさがしのプログラムが完成しました。
「Run」ボタンを押して、プログラムが正しく動作するか確認してください。
正しく動作したら、「ダウンロード」ボタンを押してメモリに書き込んでください。
①M5StickCにカラーセンサを接続してから電源を入れてください。
②Aボタンを押すとゲームが開始され、ディスプレイ上部に目的となる色が表示されます。
③Player1の番です。
目的の色になるべく近い色を探して、カラーセンサを押し付けてAボタンを押して色を読み取ってください。
④Player2の番です。
目的の色になるべく近い色を探して、カラーセンサを押し付けてAボタンを押して色を読み取ってください。
⑤Player2が色を読み取ると、勝敗がひょうじされます。もう一度Aボタンを押すと次のゲームが始まります。