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 は開発者とデザイナーに Game...

実際に体験してみよう

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

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便利ですね。超簡単です。

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

 

コメント