2018/04/01 ブログのテーマをcocoonに変更しました。
スポンサーリンク

Nintendo SwitchのコントローラでGamepad APIを試す

スポンサーリンク

Nintendo Switchのコントローラを活用出来ないかなーと思ってたところ、Gamepad APIなるものを見つけたので、今回はGamepad APIで簡単に遊んで見ました。

Gamepad APIとは

HTML5から追加された機能で、ゲームパッドの情報を取得できます。

Gamepad APIの利用
HTML5 はリッチでインタラクティブなゲームを開発するために必要なコンポーネントを多く搭載しています。 canvasや WebGL、audio に video などの技術は、今まで Native コードを書く必要のあった機能をサポートできるほどに成長しました。Gamepad API は開発者とデザイナーに Gamep...

実際に体験してみよう

パソコンとコントローラを繋ぐ

SwitchのコントローラはBluetoothで通信してますので、パソコンにも繋がります。

青丸の所を長押しでペアリングモード

コントローラをペアリングモードにして、パソコンに繋ぎます。

pcとコントローラを繋ぐ(Mac版の画像)

繋ぐのは1つのコントーラだけで大丈夫です。2つ繋ぐ事も可能ですが、今回は1つのコントローラにしか反応しないようにしています。

画像を動かしてみよう

こいつ動くぞ。

ジョイスティックを動かすと画像が移動するはずです。

結果

一応Switch持ってない方に動画で

プログラム

一応参考までに

WordPressのテキストエディタにそのまま貼り付けをしています。

<div><script>
    var xx = 0;
    var yy = 0;
    var pv = 5; // 1回の移動量
    var x = 0;
    var y = 0;
    var haveEvents = 'ongamepadconnected' in window;
    var controllers = {};
    //接続されたら
    function connecthandler(e) {
        addgamepad(e.gamepad);
    }
    function addgamepad(gamepad) {
        controllers[gamepad.index] = gamepad;
        requestAnimationFrame(updateStatus);
    }
    //main
    function updateStatus() {
        if (!haveEvents) {
            scangamepads();
        }
        var j;
        var stick;
        for (j in controllers) {
            var controller = controllers[j];
            stick = controller.axes[9];
        }
        // 四捨五入
        stick = Math.floor(stick * Math.pow(10, 1)) / Math.pow(10, 1);
        if (stick == -1 || stick == -0.8 || stick == 1) y = 1
        if (stick == 0.4 || stick == 0.1 || stick == -0.2) y = -1
        if (stick == 1 || stick == 0.7 || stick == 0.4) x = -1
        if (stick == -0.8 || stick == -0.5 || stick == -0.2) x = 1
        if (stick == 1.2) {
            x = 0;
            y = 0;
        }
        xx += x * pv;
        yy -= y * pv;
                x = 0;
        y = 0;
        document.getElementById("chou").style.left = xx + "px";
        document.getElementById("chou").style.top = yy + "px";
        requestAnimationFrame(updateStatus);
    }
    function disconnecthandler(e) {
        removegamepad(e.gamepad);
    }
    function removegamepad(gamepad) {
        var d = document.getElementById("controller" + gamepad.index);
        document.body.removeChild(d);
        delete controllers[gamepad.index];
    }
    window.addEventListener("gamepadconnected", connecthandler);
    window.addEventListener("gamepaddisconnected", disconnecthandler);
    //scan
    function scangamepads() {
        var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []);
        for (var i = 0; i < gamepads.length; i++) {
            if (gamepads[i]) {
                if (gamepads[i].index in controllers) {
                    controllers[gamepads[i].index] = gamepads[i];
                } else {
                    addgamepad(gamepads[i]);
                }
            }
        }
    }
    //event
    if (!haveEvents) {
        setInterval(scangamepads, 500);
    }
</script></div>
<div style="position: absolute;">
<div id="chou" style="position: relative;z-index: 99;"><img src="https://routecompass.net/wp-content/uploads/2017/07/otoshiana-2.png" alt="" width="100" height="100" /></div>
</div>
<div style="margin-bottom: 120px;"></div>

感想

Gamepad API便利ですね。超簡単です。

今回は画像を動かしただけですが、ゲームとかを作っても面白そうです。乞うご期待

 

The following two tabs change content below.

オーカワ

GCPばっか触ってるにゃーんエンジニア こちらのブログでも活躍中

コメント