初版

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

製作品

### こんなのができました @[youtube](https://www.youtube.com/watch?v=2aFLvxZi0Bg) ### ことのあらまし 当方娘（２才）が居るんですが、ひょんなことで「ゲーム作ってむすめに遊んでもらいテェ、、、」という気持ちが高まり、今まで齧っては放置していた事を寄せ集めてゲームを作ることにしました。 めちゃくちゃ簡単なゲームと、子供でもわかる超直感的なコントローラーが要るな、と思い夜な夜な構想したところ、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というライブラリの本があったので、これを写経してゲームを作ったので、それをアレンジすることにしました。 （５〜６年前に流行ったライブラリっぽいです。２０２１年はまた色々ありますね。） 画面はこんな感じで、うさぎが走って風景画スクロール、右からいちごが出てきてうさぎと重なったらゲット。ジャンプもしながら何個取れるかな、というもの。絵も描きました。  （めちゃくちゃ簡単なゲームなので、本見ながらやればいけるでしょ〜〜〜と思っていた所、そう簡単にはいかない現実としばらく戦うことになりました。もう全然わからん。） 全然わからんなりに最適なやつじゃないな、、、という自覚もあるパワーコードも書きながら、なんとか遊べる様になりました。 ### 完成 全部がっちゃんこして完成です。まぁ出来てみれば簡単な物ですし、全部そう難しくはないなとは思いますが、プロセスでは壁を打ち破れば次の壁、という感じでなんどか心が折れそうになりました。出来上がったときは結構感動しました、、、。 @[youtube](https://www.youtube.com/watch?v=2aFLvxZi0Bg) ### 感想 今回は「こどもが使える・遊べるやつ」というのがテーマでしたが、プログラムを変えればもうどうにでもなるIoTボタンなので、いろんな展開ができそうだな、と思っています。 （絵を書き換えて男の子向けのゲームにしたりとか、ビンゴマシンをプログラムして大袈裟なビンゴボタンにするとか、、、） 子供には目の前の物体（ボタン）が何かと連動するっていうIoTのおもろさを体験できるモノにできればな〜など思っています。