ブラウザでもコントローラーを使ってゲームできるようにする!

実はブラウザ上で動くブラウザゲームでも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文がそれ)。

 

これでブラウザでもコントローラーで遊ぶゲームを作ることができます(‘ω’)ノ

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

同じ色で複数くっついているタイルをタッチすると消すことができます。一度にたくさん消すと...
スペースインベーダー風ゲーム。謎の宇宙人たちが襲って来たみたいなんでやっつけてください。
モバイル&対戦専用リバーシ。角を取ってみたら予想外に戦略が変わって面白い。
一番最初に作ったシューティングゲームです。まぁ最初はこんなもんですよ。

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記