MakeCode ArcadeとM5Stack、Teachable Machineで体験型ゲームジャム

メディア基礎演習で、前からやってみたかった体験型ゲームジャムをやりました。MakeCode ArcadeとM5Stack、それにTeachable Machineを組み合わせています。2コマで、オタ芸の音ゲーやPONGの再現など、いろんなゲームが完成しました。

センサーの値を、ゲームのボタンへ変える

ゲームはMakeCode Arcadeで作ります。センサーやカメラからの入力は、こちらのページで↑・↓・←・→・A・Bへ変換します。ゲームの共有URLを読み込んで、入力とボタンの対応を設定する仕組みです。

ゲーム側では、いつもどおりボタンで操作する処理を書けばよいようにしています。体の動きをどう読み取るかは、入力側で調整します。同じゲームでも、割り当てを変えると操作の仕方を変えられます。

センサー値の範囲と、対応するゲームのボタンを設定する画面。画面でテストするモードの表示例。

M5GOからは、JSONで送る

M5GOの送信プログラムでは、Port AのToFセンサーから距離を読み、Aボタンの状態と一緒に送っています。データは{"distance":170,"buttonA":false}のようなJSONを1行ずつ出す形です。

ブラウザーはWeb Serialで受け取ります。M5GO側は約50msごとの送信です。UIFlowでプログラムを動かした後は、UIFlow側のUSB接続を閉じてからWebページで接続します。対応ブラウザーはChrome／Edgeです。送信プログラムはこちら。

境界付近で、操作がばたつかないようにする

距離のような数値入力は、2つの境界で3範囲に分けます。設定例では、100未満なら左、100以上250未満なら何も押さない、250以上なら右です。数値を直接キャラクターの座標にするのではなく、ボタンのON／OFFに変えています。

境界ちょうどのところで値が揺れると、ボタンが細かく入ったり切れたりします。そのため、前の判定を少し維持する幅を設けました。設定画面の「境界の揺れを抑える幅」がその値です。

デジタル入力はONの間だけ押します。OFFになったときや、データが途絶えたときは解除します。同じボタンへ複数の入力を割り当てた場合は、どれか一つがONなら押した状態にします。この処理はmapping.jsにあります。

Teachable Machineの認識結果もボタンへ割り当てる

カメラのほうは、Teachable Machineで学習したクラスへボタンを対応付けます。最も確率の高いクラスを選び、確信度が設定値以上ならボタンを押す処理です。

確信度が低いときは、無理にどれかの操作へ決めず、何も押さない状態にします。カメラを止めたときや認識結果が古くなったときも、押しっぱなしにならないよう解除します。カメラ入力の処理はこちら。

ゲームを作るだけでも2コマは短いですが、今回は実際に遊べるところまで進められました。オタ芸で音ゲーを操作するような、普通のコントローラーでは出てこない案が出ていたのがよかったです。