ブラウザゲームでもコントローラーで操作できるようにする！

2020年8月15日

実はブラウザ上で動くブラウザゲームでもXboxなどのPC用コントローラー、スマホの場合はbluetoothコントローラーで遊ぶことができます。

コントローラーで遊べるなら作れるゲームのジャンルがグンと広がります(・∀・)

というわけで今回はゲームパッドを使えるようにするやり方を紹介します。

ちなみに私はwindowsユーザーなのでMac&safariなんぞ知らん！！(どうも対応してないっぽいですね)

※スマホ用バーチャルパッドの記事もあります　▷▷　スマホ用ブラウザゲームで使えるバーチャルパッドの作り方

実はnpm でインストールできます

実は何も作らなくても世界のどっかのすごい人がもう作ってくれてるんですよね(*´▽｀*)

で、私が使っているのがこちらです。

https://www.npmjs.com/package/html5-gamepad

ページに書かれてある通り

npm i html5-gamepad

と入力すればインストールされます。

あとはexampleに書かれてある通りに記述すれば。。

動かん！！動かんのだぁーーーーー！！

なんか更新処理が上手くいってないらしい

firefoxでは動いたんですがchromeだと最初の入力は受け付けるもののその後の入力情報が更新されない。

一体全体何が問題なのかさっぱり見当もつかなくていろいろ調べました。

で、とりあえずnavigator.getGamepads()というものが入力情報を持っていることが分かりました。それでこの中身を見てみたんですが、これと作成したgamepadオブジェクトが同じなんですよね。で、よくわかんないけどchromeの場合はこれが自動で更新されていないのでこいつをnavigator.getGamepads()で毎回上書きしてしまえば万事解決です！

で、こんな感じで使えばコントローラーが使えるようになります。

if(!this.gamepad)return;//gamepad無いときはバイバイ
var gamepads = navigator.getGamepads();
this.gamepad.gamepad = gamepads[0];//自力で更新
if(this.gamepad.button('dpad down')){
  //押したときの処理
}else{
  //押してないときの処理
}

上のプログラムは必ずループ毎に処理される必要があるのでお忘れなく。

ボタンは’dpad down’と書かれている部分を変更すればOKです。各ボタンは上のリンク先の説明欄(下の方)に記載されているので参照してください。

接続と切断のチェック

あと重要なのがゲームパッドの接続と切断のチェック。これが無いとエラーの原因になります。

//ゲームパッド接続時
addEventListener("gamepadconnected", (e) => {
  this.gamepad = Gamepads[0];
});
//ゲームパッド切断時
addEventListener("gamepaddisconnected", (e) => {
  this.gamepad = undefined;
});

接続・切断時にイベントが発生するので上記のようにしておくとgamepadオブジェクトがあるかどうかで接続の状況をチェックできます(ループの所のif文がそれ)。

これでブラウザでもコントローラーで遊ぶゲームを作ることができます。

どんな感じか実際に遊んでみたい方は私のゲームを遊んでくださいな(‘ω’)ノ