Gamepad API とは？
https://developer.mozilla.org/ja/docs/Web/API/Gamepad_API
ブラウザでゲームのコントローラを使うことができる。
試してみる
今回は macOS の Safari から PS4 のコントローラを使ってみた。
コードはこんな感じ↓
<div id="mylog">コントローラのボタンを押してください</div>
<script>
function mainLoop(){
const gamepad = navigator.getGamepads()[0];
if (!gamepad){
requestAnimationFrame(mainLoop);
return;
}
let str = gamepad.axes + "\n";
gamepad.buttons.forEach(button => {
str += `${button.pressed ? "O" : "-"}:${button.value}\n`;
});
document.getElementById("mylog").innerText = str;
requestAnimationFrame(mainLoop);
}
mainLoop();
</script>
最初にページを開いたときは navigator.getGamepads() が空になるが、ブラウザのページ内にフォーカスがあるときにコントローラで何かボタンを押すと、 navigator.getGamepads() が情報を返すようになる。
注意点としては、 navigator.getGamepads() が返す Gamepad オブジェクトの値は、取得した瞬間の状態を固定で保持しているらしく、時間が経ってもボタン入力などの情報が同じ値のままとなっている。
なので、毎フレームごとにボタンなどの状態を見張るときには、毎回 navigator.getGamepads() を呼んで最新情報を取得し直さないといけない。（実際に結構ハマった）
- 初期状態
- 左スティックを真上に倒したとき
- ○ボタンを押したとき
- L2 を半分ぐらい押し下げたとき。
button.valueにはアナログな値が入ることがあるようだ。（R2 もだったが、この2つが押す強さを感知しているとは知らなかった...）
