ゲームコントローラーいいですよね！
Gamepad APIを使えばゲームコントローラーを直接Webアプリに繋げます。
とはいえ、流石に仕様通りにガリガリ書くのはちょっと面倒。
ということで、簡単に使えるようにするライブラリを紹介します。
import で読み込みたいんじゃ。
実は結構前から こちらの記事 を参考にして gamecontroller.js を使っていました。
まー、人によって好みはあると思うんですが、ライブラリからライブラリを読み込む、などのモジュール化を進めようとすると、ES6 Moduleのimportが使いたくなります。
gamecontroller.js はどうも ES6 Moduleのimportに対応してなさそうなので、他を探そう。ということで探してみました。
npmを探せばすぐ見つかりますね！
joypad.js
見つかったのがコレ。
Usageを見ると、ちゃんと ES6 Moduleでの利用方法が書いてあります。
import 'joypad.js'; // ES6`
よしよし。
ということで、使ってみます。
インストール
npm i joypad.js
で普通に入ります。
アプリケーションの設定がまだの方は、
npm init
で package.json を作っておくのをお忘れなく。
./node_modules/joypad.js/dist/joypad.min.jsにインストールされます。
ロード
jsから、importで下記のように読み込みます。
import "your-install-path/joypad.min.js";
すると、joypadというオブジェクトが使えるようになります。
connect / disconnect の検知
接続検知は下記のように行います。
joypad.on("connect",(e)=>{
console.log("name="+e.gamepad.id); // 接続されたゲームパッドのID(と書いてあるけど名前みたいな文字列)が入る
});
外され検知は下記のように行います。
joypad.on("disconnect",(e)=>{
console.log("name="+e.gamepad.id); // 外されたゲームパッドのID(と書いてあるけど名前みたいな文字列)が入る
});
簡単ですね！
注意
USBコントローラーでテストしてるんですが、USBポートにゲームコントローラーを接続した状態でアプリを起動しても、 connect イベントはまだ発行されません。
最初にコントローラーの何かのボタンを押した時に発行されるようです。（connectイベントと後述のbutton_pressが同時に発行されます）
Gamepad API はBluetoothのコントローラーにも対応していると思いますが、そちらの挙動は未確認です。
ボタンプッシュ / リリース の検知
ボタンのプッシュ検知は下記のように行います。
joypad.on("button_press",(e)=>{
console.log("name="+e.detail.buttonName); // `button_1`などのボタンの名前が入ります。
});
リリースも同様です。
joypad.on("button_release",(e)=>{
console.log("name="+e.detail.buttonName); // `button_1`などのボタンの名前が入ります。
});
めっちゃ普通ですね！
まとめ
joypad.js を使えばWebアプリに簡単にゲームコントローラーを接続できます。
みんなで楽しいアプリを作りましょう！
私が書いたサンプルコードはこちら。（雑！）
https://github.com/tadfmac/joypad-test
いや、joypad.jsインストールしたら、普通に /examples見ればいろいろありますので、そっちも見た方が早いかな。