強火で進め

このブログではプログラム関連の記事を中心に書いてます。

Chrome 19で対応したGamepad APIを試してみた

Dev版の頃はXInput対応なゲームパッドしか対応してませんでしたが正式版ではそれ以外のゲームパッドにも対応しているみたいです。

Chromeゲームパッド対応を有効化

なお、デフォルトでは使えないみたいです。以下の手順が必要です。

まずはアドレスバーに chrome://flags/ と入力し、表示される画面の中から「ゲームパッドを有効にする」という項目の「有効にする」のリンクをクリックします。

すると再起動する様にとのメッセージが出るのでChromeを再起動します。これでゲームパッドの情報を取得出来るようになります。

こんな感じのプログラムでゲームパッドの情報を取得出来ます。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script>
window.addEventListener("load", function(e) {
  function runAnimation()
  {
    window.webkitRequestAnimationFrame(runAnimation);
    var gamepad_info = '';
    var gamepad_num = navigator.webkitGamepads.length;
    var i, b, a;
    var no_pad = true;
    for (i=0; i<gamepad_num; i++) {
    	var pad = navigator.webkitGamepads[i];
	    if(pad) {
	    	no_pad = false;
	    	gamepad_info += "【Gamepad[" + i + "]】<br>";
	    	for (b=0; b<pad.buttons.length; b++) {
		    	gamepad_info += "buttons[" + b + "]=" + pad.buttons[b] + "<br>";
	    	}
	    	for (a=0; a<pad.axes.length; a++) {
		    	gamepad_info += "axis[" + a + "]=" + pad.axes[a] + "<br>";
	    	}
	    }
    }
    if (no_pad) {
    	gamepad_info = '画面をクリックした後にゲームパッドのボタンを押して下さい';
    }
    document.getElementById('gamepad_info').innerHTML = gamepad_info;
  }
  window.webkitRequestAnimationFrame(runAnimation);
}, false);
</script>
  <title>Chromeでゲームパッドの情報を取得するサンプル</title>
</head>
<body>
<div id="gamepad_info"></div>
</body>
</html>

こちらで体験出来ます。ゲームパッドを繋いでChromeで見て下さい。