M5Stack に Grove 端子台経由でゲームスイッチを動かすメモ

この記事は IoTLT Advent Calendar 2021 の 3 日目の記事です。

M5Stack に Grove 端子台経由でゲームスイッチを動かすメモをまとめます。

ゲームスイッチ

image

大きいボタンはロマンでありインターフェース的にも素敵です。デジタルハリウッド大学大学院 プロダクトプロトタイピング II の 2021 年度講師をしてきました が、そのときに生徒の作りたいものの相談に乗っているときに「大きなボタンって大事だな」というシーンは多かったです。

M5Stack のデフォルトボタンも扱いやすいものですが、やはり、誰かに使ってもらう上では、もっと大きいボタンの実装も把握しておくと良いですね。

image

ということで、今回は、電子工作のショップでも手に入りやすく、デザイン的にもカラーバリエーションが豊富で、耐久性も高いゲームスイッチを扱ってみようと思います。ほかの人におススメすることは多いのですが、実際に私がちゃんと使ったことはないやってみます!

こちらは 千石電商さんのネットショップのゲームスイッチカテゴリ から買った セイミツ工業 PS-15 黒(ボディ同色) ゲームスイッチ φ30 コンパクトタイプ 黒(ボディ同色) です。

開封してみる

image

購入してみると、やはり大きなボタンゆえにかさばるため、ネコポスではなく、通常の小包として届きました。

image

このように袋に入っていました。

image

いざ開封。

image

このゲームスイッチの仕組みはいたってシンプルでした。この2つの端子にタクトスイッチと同じようなアプローチで回路をつないでいきます。

Grove 端子台とゲームスイッチをつなげる

M5Stack のピンに差し込みたいのでゲームスイッチを Grove 端子台でうまく橋渡しをします。

image

こちらが Grove 端子台 です。

image

GROVE – 4ピン – ジャンパオスケーブル(5本セット) – スイッチサイエンス を用意します。

image

この 2 つをつないで、オスピンが M5Stack に刺さるようにします。

image

つづいて、Grove 端子台にゲームスイッチをつなぐためにケーブルを用意します。

image

ゲームスイッチの端子に、これくらいの長さでつながるようワイヤーストリッパーで切り揃えました。

image

ワイヤーストリッパーだとこういう感じで金属部分をむき出すのがラクちん。

image

イイ感じに端子に絡めて、ねじってつなげていきます。

image

うまくつなげられました。

image

端子台のほうにもマイナスドライバーで回して端子台の穴を広げてから、ケーブルの金属部分を差し込んで、またマイナスドライバーで締めてつなぎます。

M5Stack とGrove 4ピン ジャンパオスケーブルをつなげる

M5Stack に Grove 4ピン ジャンパオスケーブルのピンをつなぎます。

image

写真のように、赤と黒のケーブルをつなぎます。

  • 黒ケーブル
    • G に差し込む
  • 赤ケーブル
    • 2 番ピンに差し込む

このように差し込みます。

image

これで準備が完了です。

M5Stack 側のソースコード

M5Stack に書き込んだソースコードがこちらです。

#include <M5Stack.h>

const int buttonPin = 2;

int buttonState = 0;
int buttonStatePrevious = 0;

void setup() {
  M5.begin(true, false, true);
  M5.Power.begin();
  M5.Lcd.clear(TFT_BLACK);

  M5.Lcd.setTextColor(WHITE);
  M5.Lcd.setTextSize(4);
  M5.Lcd.println("[Game Button]");
  
  pinMode(buttonPin, INPUT_PULLUP);
}

void loop() {
  M5.update();
  
  buttonState = digitalRead(buttonPin);

  if(buttonStatePrevious != buttonState){
    M5.Lcd.clear(TFT_BLACK);
    M5.Lcd.setCursor(10, 100);
    M5.Lcd.setTextColor(WHITE);
    M5.Lcd.setTextSize(5);
    if (buttonState == HIGH) {
      M5.Lcd.println("ON");
    } else {
      M5.Lcd.println("OFF");
    }

    buttonStatePrevious = buttonState;
  }
  
}

いわゆるデジタル入力の対応で済むんですが、こういうボタンの扱いで、いつも忘れがちなのが INPUT_PULLUP でプルアップ処理をするところですね。あとは、以前の状態を記憶しておいて、変化があった時だけ状態を知らせる仕組みにしています。

動かしてみる

こちらを書きこんで動かしてみると、

image

ボタンを押すと ON とディスプレイが反応します。

image

ボタンを話すと OFF とディスプレイが反応します。

無事うまく動かすことができました。さきほどもお伝えしましたが、やっぱりプルアップを最初忘れましたし、一度やってみないと「この2つの端子だけで、どうやってつなげるんだっけ・・・?」と微妙に不安になっていたので、やってみればスッキリ連携することができました。

こういったゲームスイッチは大きさや形も様々ですし、なによりカラーが豊富です、カラーが豊富だといろいろな見せ方に合わせて対応できるので人に見せるときには力を発揮します。

また、ゲームスイッチというだけあって耐久性もポイント。電子工作で買うようなタクトスイッチと比べると頑丈で、多少無茶な連打をしても、ゲームでガシガシ押しまくるシチュエーションを耐えれるくらいなので安心です。

なにより、わりとゲームセンターで格ゲーなりパズルゲームなりで色々なゲームで遊んだ自分としては、そのインターフェースが時を越えて扱えるようになったのは達成感がありました!