2022年8月16日 tag: JavaScript

ブラウザでゲームパッドを使う方法【JavaScript】

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

ゲームパッドで遊べるなら作れるゲームのジャンルがグンと広がります。

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

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

また、この記事は前回・前々回からの続きで入力操作3部作の最後となります。

プログラムは追加する形で出来ているので気になる方は前の2つの記事もぜひ読んでください。

▷ キー入力操作

▷ バーチャルパッド

今回のサンプルプログラムはこちら

▷ サンプルプログラム

方向キー(または左スティック)で移動、Aボタン・Bボタンで弾発射、スタートボタンでポーズになってます。

▷ ファイルをダウンロード

当然ながらゲームパッドが必要なのでちゃんとパソコンにつないで操作してください。

codepenにも投稿してみたので使ってみてください(スマホで見るとバーチャルパッドが表示されます)。

See the Pen
p94e.js操作サンプル by いんわん (@inwan78)
on CodePen.

ゲームパッドの接続イベント

ゲームパッドは接続や切断時にイベントが発生します。

//ゲームパッド接続時のイベント
addEventListener("gamepadconnected", (e) => {
  //処理
});
//ゲームパッド切断時のイベント
addEventListener("gamepaddisconnected", (e) => {
  //処理
});

なので上記のように記述して接続時・切断時に必要な処理を記述します。

ゲームパッドの情報を取得

接続後、ゲームパッドの情報を取得するには

const pads = navigator.getGamepads();

と記述すれば取得できます。

そしてこれは複数ゲームパッドが接続されている可能性があるので配列になっています。

1つだけの場合はpads[0]に情報が入っています。

console.log(pads[0]);

で内容を確認できます。

ボタン類はpads[0].buttonsという配列に入っています。

０・・・A
１・・・B
２・・・X
３・・・Y
４・・・L1
５・・・R1
６・・・L2
７・・・R2
８・・・SELECT
９・・・START
１０・・左スティック押し込み
１１・・右スティック押し込み
１２・・上
１３・・右
１４・・下
１５・・左
１６・・xBoxボタン

押したかどうかの判定はpads[0].buttons[0].pressedに真偽値で入っているのでそれを使います。

スティックはpads[0].axes配列に入っています。

０・・・左スティックのX軸(-1 ～ 1)
１・・・左スティックのY軸(-1 ～ 1)
２・・・右スティックのX軸(-1 ～ 1)
３・・・右スティックのY軸(-1 ～ 1)

基本的にゲームパッドの使い方はこれだけです。

ゲームパッドクラスを作る

最後はゲームパッドクラスを作ってInputManagerに追加して入力操作プログラムを完成させるだけです。

と言っても特に特筆するようなところはほとんどないです。

サンプルプログラムを見てもらえばわかると思います。

気をつけないといけないところとしてはループ毎にnavigator.getGamepads()で情報を取得するところです。

ループ毎に取得しないと情報は更新されません。

クラスにupdate()メソッドを作っていますが、このクラスには自動更新機能は無いので必ずメインループ内に記述してください。

あと、十字キーと左スティックを併用できるようにする場合も注意が必要です。

私のサンプルでは左スティックも十字キーと同じフラグを使用しているので塀用となるとうまく動いてくれません。

なのでどっちを使っているのかを判定するフラグを作ってチェックしています。

バーチャルパッドとの関係

激レアなことだとは思いつつ、スマホでゲームパッドを使う場合バーチャルパッドの表示は不要なので消えるようにしています。

接続時と切断時にvpadのdisplayを切り替えています(main.jsの205行目くらい)

//ゲームパッド接続時のイベント
addEventListener("gamepadconnected", (e) => {
  this.gamePad.connected();
  //バーチャルパッドがあったら(モバイルなら)非表示
  if(this.vpad){
    this.vpad.pad.style.display = "none";
  }
});
//ゲームパッド切断時のイベント
addEventListener("gamepaddisconnected", (e) => {
  this.gamePad.disconnected();
  //バーチャルパッドがあったら(モバイルなら)表示
  if(this.vpad){
    this.vpad.pad.style.display = "block";
  }
});