みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Nintendo Switch ProコントローラーをMacに接続してGamepadAPIでイベントを受け取る 🎮

昨日はNode.jsをつかって、Macに接続されたコントローラーの入力を取得しましたが、今日はGamepad APIをつかってフロントから値を取得してみました。

blog.kimizuka.org

Gamepad APIが非常に使いやすく、昨日よりも簡単に実装できました。

developer.mozilla.org

が。何故かプロコンをCSSでつくろうと思ってしまい、その部分に結構時間を使ってしまいました。


DEMO


See the Pen
Pro Controller with GamepadAPI
by kimmy (@kimmy)
on CodePen.

動作未確認ですが、今回は数台繋いだ場合も考慮した実装を心掛けました。動くと信じてますが、動かなかったらごめんなさい。


JavaScript

const vue = new Vue({
  el: '#vue',
  data: {
    controllers: [{
      axes: [0, 0, 0, 0]
    }],
  }
});

window.addEventListener('gamepadconnected', function(evt) { 
  tick();

  function tick() {
    const controllers = navigator.getGamepads();
    const contollerLength = controllers.length;

    vue.controllers = [];

    for (let i = 0; i < contollerLength; ++i) {
      if (controllers[i]) {
        vue.controllers.push(controllers[i]);
      }
    }
    
    requestAnimationFrame(tick);
  }
});

navigator.getGamepads()で取得したGamepadをまるまるVueに渡すだけという力技で実装しています。これで動くんだから動いですよね。Gamepad APIも、Vueも。
本当はロジックはJSに集約すべきなんですが、HTML側にバリバリ書いてしまいました。アナログスティックのところとか。
気になる方は是非CodePenをご確認ください。


わかったこと

昨日、アナログスティックは「角度と傾きが別で入ってきている」と予想していましたが外れでした。
実際のところ、X軸、Y軸の値が別々に入ってきているようです。
それがわかったので、今日のDEMOではアナログスティックの動きも再現できました。これが成長ですね。

Gamepad API