こどもも使える！ワイヤレスコントローラーを作る

こんなのができました

ことのあらまし

当方娘（２才）が居るんですが、ひょんなことで「ゲーム作ってむすめに遊んでもらいテェ、、、」という気持ちが高まり、今まで齧っては放置していた事を寄せ集めてゲームを作ることにしました。

めちゃくちゃ簡単なゲームと、子供でもわかる超直感的なコントローラーが要るな、と思い夜な夜な構想したところ、obnizでコントローラーを作ってWebブラウザのゲームと連動させれば作れそうだ、となったので、作りました。

仕組み

1. obnizが接続されるとランプが光る

2. 押しボタン押下でWebページ上でスペースキーが押下されるイベントを設置

3. スペースキーで操作できるゲーム内のキャラクターが動く

材料

• obniz board 1Y
• アーケードボタン
• 100円ショップの容器
• ジャンパワイヤ
• ピンヘッダ・ハウジング
• 電池ケース単４×３（および電池）
• 絶縁テープ

道具部門

• ステップドリル
• ハンダゴテ一式

ライブラリ

• obniz.js
• cocos2d-js-v3.13.js

つくっていきましょう

コントローラーを作っていきます。
まず用意するのは100円ショップにあるプラ容器。丁度良ければなんでもいいとは思いますが、子どもが叩くのに耐えられるくらいの頑丈さは欲しい所です。
それと大きい押しボタン。アーケードボタンとも言うそうですね。ゲームセンターとかにありそうなものです。

合体させるため穴を開けます。
DIYをやっていると「丁度いい穴を開けたい」問題がたびたび発生すると思います。これ結構悩みましたが、色々調べる中で「ステップドリル」と言うものに出会い、これを使うことにしました。結局ボタンをつけるので、今回は穴自体がきれいじゃなくても、まぁよいか。ということで。

（余談ですけれども、某通販サイトで安い３本入りのステップドリルを買ったんですが、ドリルにはめる６角の精度が悪く、ハマらないものがあり返品して結局日本製の物を書い直しました、、、日本製の安心感たるや、、、高いですけれどね）

合体します。外見が完成

ボタンにワイヤーをハンダ付け

ボタンの端子にワイヤーをハンダ付けします。
根元を補強しつつ、干渉を防ぐために絶縁テープで覆っておきました。
あと、obnizに挿す方はテープでまとめておいて挿しやすくしておきます。順番に気をつけつつ。

電池ケースにピンヘッダをハンダ付け

ワイヤレスにしたい、、、というのが今回の野望の一つでして、なんとかプラ容器に収まりつつobnizが動く電源を用意することにしました。

マルチメーターで電圧を見つつ、かつ小さい電池ケースを探った所単４電池３本が丁度良さそうという結論に。

で、こちらもobnizに挿せる様にピンヘッダをハンダ付けして、ハウジングを装着。

動いています。

プログラムを書く

プログラムを書いていきます。

1. obnizが接続されて使用可能な状態になったらLEDが光る
2. ボタン押下でスペースキーが押下される
   の２点だけなので、短いです。

var evt = new KeyboardEvent("keydown", { keyCode: 32 })
    var target = document.getElementById('gameCanvas');

    var obniz = new Obniz("0000-0000");
    obniz.onconnect = async function() {
      var led = obniz.wired("LED", { anode: 2, cathode: 3 }).on();
      var button = obniz.wired("Button", { signal: 0, gnd: 1 });
      button.onchange = function(pressed) {

        obniz.display.clear();
        obniz.display.print("pressed:" + pressed);
        if(pressed) {
          console.log('press')
          target.dispatchEvent(evt);
        }
      };
    };

ハマった所なんですが、「キーボードとどうやって連携したらいいの？？？？」というところです。キーボードのイベント見るのは分かるけど、押下されたことにするにはどうしたらいいんだ、となり、色々調べた結果キーボードイベントを作りゲーム本体の要素にdispatchEventしたところ動きました。よい解決方法なのかどうかはちょっと自信ないんですけれども。

ゲームを作る

ゲームを作っていきます。なにで作ろうかな〜〜〜と考えていた所、たまたま家にcocos2dというライブラリの本があったので、これを写経してゲームを作ったので、それをアレンジすることにしました。
（５〜６年前に流行ったライブラリっぽいです。２０２１年はまた色々ありますね。）

画面はこんな感じで、うさぎが走って風景画スクロール、右からいちごが出てきてうさぎと重なったらゲット。ジャンプもしながら何個取れるかな、というもの。絵も描きました。

（めちゃくちゃ簡単なゲームなので、本見ながらやればいけるでしょ〜〜〜と思っていた所、そう簡単にはいかない現実としばらく戦うことになりました。もう全然わからん。）

全然わからんなりに最適なやつじゃないな、、、という自覚もあるパワーコードも書きながら、なんとか遊べる様になりました。

完成

全部がっちゃんこして完成です。まぁ出来てみれば簡単な物ですし、全部そう難しくはないなとは思いますが、プロセスでは壁を打ち破れば次の壁、という感じでなんどか心が折れそうになりました。出来上がったときは結構感動しました、、、。

感想

今回は「こどもが使える・遊べるやつ」というのがテーマでしたが、プログラムを変えればもうどうにでもなるIoTボタンなので、いろんな展開ができそうだな、と思っています。
（絵を書き換えて男の子向けのゲームにしたりとか、ビンゴマシンをプログラムして大袈裟なビンゴボタンにするとか、、、）

子供には目の前の物体（ボタン）が何かと連動するっていうIoTのおもろさを体験できるモノにできればな〜など思っています。