カワリモノ息子の技術メモ的な~

カワリモノ息子とその母の技術メモ的な〜

学校が苦手な息子くんの作品とその母の作品、はたまた日常などいろいろを在宅エンジニア母が綴る

MENU

M5StackをChrome恐竜ゲームのコントローラーにした

(今回の記事は息子くん母が作ったものについての記事です)

f:id:toriko0413:20200921163347j:plain

M5Stackのコントローラー化を検討

「M5StackをPC操作用のコントローラーにしてみたい!」と思いました。
M5Stackにコントローラーを接続するのではなく、M5Stack自体をコントローラーにするということです。

「m5stack コントローラー bluetooth」とか
「esp32 コントローラー bluetooth」とかで検索すると、
M5Stack/ESP32にコントローラーを接続する記事(やりたいことと反対方向の記事)が沢山出てきます。
知りたいのはそうではないんだな~と思い、実現方法を考えました。

まず通信方法はBluetoothかWiFiか。
Bluetoothしんどそう。WindowsでBluetooth受信プログラムを書かないといけない。
WiFiにしたってそうなんだけどBluetoothのほうがより難しいイメージ。
どちらにしろM5Stackのプログラム開発というよりWindowsシステム側のプログラム開発がメインになっちゃいそう。

この話すると、中1息子くんに「おかあさんには難しいんじゃない?(僕だったらできると思うけど)」とか言われる始末!

かっ!こうみえても私わりと長いことプログラマーやってんですからねー!作ってやろうじゃないのー!

と燃えていた矢先。
引き続きネットで調べているとこちらのページを発見。

programresource.net

アッ・・・
ムズカシイ コト ヤラナクテモ、デキル ミタイ・・・

GitHubで公開されている「ESP32-BLE-Keyboard」っていうライブラリを使うと、簡単にBluetoothキーボードとして認識ができると。
これを使って実装してみました!

Chrome恐竜ゲームのコントローラーにしよう

とその前に、何を動かそう。
M5Stack Fireを使おうと思っており、使えるボタンは3つです。
(加速度センサーで傾きを検知して移動させる方法も考えましたが今回はパス)

なるべく単純な操作でいけるもの・・と考えた結果、PCで誰もが遊べるGoogle Chromeの恐竜ゲームにしました。

Google Chromeの恐竜ゲームとは

息子くんが小5時代(2018年)に改造したことがあるこちら。
siroitori.hatenablog.com

PCのブラウザであるGoogle Chromeで、オフライン時に遊べます。
またはオンライン時でも

chrome://dino/

をブラウザのアドレスバーに入力してアクセスしても起動することができますよ。

↓ この画面から恐竜ゲームが遊べます
f:id:toriko0413:20200921163526p:plain

使うボタンはジャンプするときのスペースとしゃがむときの下矢印(↓)があればOK!
あとはリセットのためのブラウザリロードF5キーを割り付ければ、ちょうど3つです。

f:id:toriko0413:20200921163318j:plain

実装

ライブラリの追加

まずは下記ライブラリを追加。
github.com
zipでダウンロードして、
Arduinoの[スケッチ]→[ライブラリをインクルード]→[.ZIP形式のライブラリをインストール…]
でインストールしました。

プログラムの作成

それぞれのボタンを以下のように割り当てることにしました。
Aボタン:F5   ・・・リセット(ブラウザのリロード)
Bボタン:スペース・・・スタート/ジャンプ
Cボタン:↓   ・・・しゃがむ

#include <M5Stack.h>
#include <BleKeyboard.h>
 
BleKeyboard bleKeyboard("M5Controller");
bool blestate = false;
  
void setup() {
    M5.begin();
    M5.Power.begin();
 
    bleKeyboard.begin();
 
    M5.Lcd.clear(BLACK);

    // 画面表示部分の作成
    uint16_t x = 20;
    uint16_t y = 10;
    M5.Lcd.drawJpgFile(SD, "/dino.jpg", x, y);

    M5.Lcd.setTextSize(2);
    M5.Lcd.setTextColor(YELLOW);
    
    M5.Lcd.println("=Dinosour Game Controller=");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.println("");
    M5.Lcd.setTextColor(BLUE);
    M5.Lcd.print(" RESET");
    M5.Lcd.setTextColor(RED);
    M5.Lcd.print("  START/JUMP  SQUAT");
}
 
void loop() {
    M5.update();
 
    if (bleKeyboard.isConnected()) {
        if (!blestate) {
            blestate = true;
        }
 
        if (M5.BtnA.wasPressed()) {
            bleKeyboard.press(KEY_F5);
            bleKeyboard.release(KEY_F5);
        } else if (M5.BtnB.wasPressed()) {
            bleKeyboard.press(0x20);    //space key
            bleKeyboard.release(0x20);
        } else if (M5.BtnC.wasPressed()) {
            bleKeyboard.press(KEY_DOWN_ARROW);
            delay(300);
            bleKeyboard.release(KEY_DOWN_ARROW);
        }
    } else {
        if (blestate) {
            blestate = false;
        }
    }
}

KEY_F5 や KEY_DOWN_ARROW は、Keyboard.h に定義されている定数。
スペースキーは定義が無かったので、0x20を直で入れました。

なんとこれだけのコードでコントローラーの完成!素敵!

これをM5Stackに書き込んで実行後PCのbluetooth接続設定の画面を開くと、新しいbluetoothデバイスとして「M5Controller」が出てくるのでWindowsからこれをペアリングしてあげます。
それであとはコントローラーとして実行できる状態になります。

できあがり

youtu.be

おわりに

なんとも本当に簡単にできました。
画面回りの調整に少し時間はかかったかなと思いますが、今回行き詰ることがなかったので、トータルで1時間半程度で作れました。

みなさんもM5Stackで簡単bluetoothコントローラー是非作ってみてください。