JavaScript プログラミング講座

 

Gamepad API について

 


■Gamepad API について

 
Gamepad API は、HTML5 世代の機能です。
 
http://www.w3.org/TR/gamepad/ (Working Draft)
 
ゲームパッドの入力情報を取得する事ができます。
 


 

ゲームパッドの入力を取得する

 
 
 


■ GamepadList オブジェクトについて

 
■ GamepadList オブジェクトを取得する
 
ゲームパッドリストを取得するには、navigator.getGamepads() メソッドを使用します。
 
戻り値から、GamepadList オブジェクトが得られます。
 
GamepadList オブジェクトは、配列のように中身を取り出せます。
 
中には、Gamepad オブジェクトが格納されています。
 
Google Chrome では、undefined 値が格納されている場合があります。
 
これは index 値の欠番を意味します。
 
ゲームパッドの種類によっては、getGamepads() メソッドで検出できない場合があります。接続関連のイベントを1度でも発火させると、getGamepads() メソッドで検出できるようです。(ページを開いてから、ゲームパッドを物理的に再接続し、何らかの入力操作を行います)
 
Navigator.getGamepads() :GamepadList
引数 Voidなし
戻り値 GamepadListゲームパッドリストが得られる
 
ゲームパッドリストを取得する

// getGamepads メソッドに対応している
if(navigator.getGamepads){

	// ゲームパッドリストを取得する
	var gamepad_list = navigator.getGamepads();

	// 出力テスト
	console.log(gamepad_list);

}
 
■ Gamepad オブジェクトの総数を取得する
 
GamepadList 内のアイテム総数を取得するには、length プロパティを使用します。
 
得られた総数のゲームパッドが接続されているとは限りません。
 
ブラウザによっては、欠番が存在する事があります。
 
undefined 値が格納されていないか確認します。
 
■取得例
 
Gamepad オブジェクトを取得する

// getGamepads メソッドに対応している
if(navigator.getGamepads){

	// ゲームパッドリストを取得する
	var gamepad_list = navigator.getGamepads();

	// ゲームパッドリスト内のアイテム総数を取得する
	var num = gamepad_list.length;

	var i;
	for(i=0;i < num;i++){
		// ゲームパッドを取得する(undefined 値の場合もある)
		var gamepad = gamepad_list[i];

		// 出力テスト
		console.log(gamepad);
	}

}
 
 

■ GamePad オブジェクトについて

 
GamePad オブジェクトは、Live なオブジェクトです。
 
中身は、自動的に最新の状態に更新されます。
 
Google Chrome では、自動的ではなく、navigator.getGamepads() メソッドを呼び出す事で更新されるようです。
 
GamePad インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
idStringゲームパッドの識別名。(製品名、製造番号、製造業者など)
indexNumberゲームパッドのインデックス値。(プレイヤー番号に該当)
connectedBooleanゲームパッドの物理的な接続状態。true の場合接続中である。
mappingStringマッピングタイプ情報。
buttonsGamepadButtonListGamepadButtonList オブジェクトを取得する。
axesArray感圧可能なスティックなどの入力強度。(-1.0 ~ +1.0)
timestampNumberタイムスタンプ情報。
 
■マッピングタイプ情報(mapping プロパティ)
 
ゲームパッドのレイアウト名が得られます。
 
標準レイアウトである場合、"standard" という文字列が得られます。
 
例えば、「Xbox 360 コントローラー」は、標準レイアウトです。
 
レイアウト名説明
"standard"標準レイアウト(参考リンク
"" (空文字)ベンダーの独自仕様であるレイアウト
 
■ GamepadButtonList オブジェクト(buttons プロパティ)
 
GamepadButtonList オブジェクトは、配列のように中身を取り出せます。
 
中には、GamepadButton オブジェクトが格納されています。
 
十字キーボタンに該当する番地を知る方法は無いようです。
 
ゲームパッドの種類によっては、十字キーボタンの入力結果は、buttons プロパティではなく、axes プロパティの方に出力されます。
 
標準レイアウトであるゲームパッドでは、以下のようにマッピングされています。
 
番地説明
12上ボタン
13下ボタン
14左ボタン
15右ボタン
 
番地説明
0A ボタン(下段のボタン列)
1B ボタン(下段のボタン列)
2X ボタン(上段のボタン列)
3Y ボタン(上段のボタン列)
4L1 ボタン(上段)
5R1 ボタン(上段)
6L2 ボタン(下段)
7R2 ボタン(下段)
 
番地説明
8SELECT ボタン
9START ボタン
10左スティック押込
11右スティック押込
16中央ボタン
 
■感圧可能なスティックなどの入力強度(axes プロパティ)
 
アナログスティックなどの入力強度情報が、配列で得られます。
 
中には、数値データ (-1.0 ~ 1.0) が格納されています。
 
ゲームパッドの種類によっては、十字キーボタンの入力結果がここで得られます。
 
標準レイアウトであるゲームパッドでは、以下のようにマッピングされています。
 
番地説明
0左スティックの水平方向(-1.0 ~ +1.0)(負数なら左方向、正数なら右方向)
1左スティックの垂直方向(-1.0 ~ +1.0)(負数なら上方向、正数なら下方向)
2右スティックの水平方向(-1.0 ~ +1.0)(負数なら左方向、正数なら右方向)
3右スティックの垂直方向(-1.0 ~ +1.0)(負数なら上方向、正数なら下方向)
 
大抵の場合、2次元のアナログスティックや十字キーが該当するでしょう。
 
他にも、1~3次元的な入力デバイスが存在するかもしれません。
 
しかし、スティックの数と次元の数との関係を知る方法は無いようです。
 
連番でマッピングされていないゲームパッドも存在するようです。
 

■ GamepadButton オブジェクトについて

 
GamepadButton インターフェースには、以下の読み取り専用のプロパティがあります。
 
プロパティ名説明
pressedBooleanボタンの押下状態。true で押されています。false で離されています。
valueNumber感圧可能なボタンの入力強度。(0.0 ~ 1.0)
 
■取得例
 
ゲームパッドの入力情報を出力する

<html>
  <body>

    <pre id="aaa"></pre>

    <script type="text/javascript">
    <!--

	// 匿名関数を即時実行
	(function(){

		// ------------------------------------------------------------
		// Gemapad API に対応しているか調べる
		// ------------------------------------------------------------
		if(!(window.Gamepad)) return;
		if(!(navigator.getGamepads)) return;

		// ------------------------------------------------------------
		// "aaa" という ID 属性のエレメントを取得する
		// ------------------------------------------------------------
		var element = document.getElementById("aaa");

		// ------------------------------------------------------------
		// 一定時間隔で、繰り返し実行される関数
		// ------------------------------------------------------------
		setInterval(function(){
			var str = "";

			// ゲームパッドリストを取得する
			var gamepad_list = navigator.getGamepads();

			// ゲームパッドリスト内のアイテム総数を取得する
			var num = gamepad_list.length;

			var i;
			for(i=0;i < num;i++){
				// ------------------------------------------------------------
				// Gamepad オブジェクトを取得する
				// ------------------------------------------------------------
				var gamepad = gamepad_list[i];
				if(!gamepad) continue;

				// ------------------------------------------------------------
				// ゲームパッドのインデックス値
				// ------------------------------------------------------------
				str += "index: " + gamepad.index + "\n";

				// ------------------------------------------------------------
				// タイムスタンプ情報
				// ------------------------------------------------------------
				str += "timestamp: " + gamepad.timestamp + "\n";

				// ------------------------------------------------------------
				// ゲームパッドの識別名
				// ------------------------------------------------------------
				str += "id: \"" + gamepad.id + "\"\n";

				// ------------------------------------------------------------
				// ゲームパッドの物理的な接続状態
				// ------------------------------------------------------------
				str += "connected: " + gamepad.connected + "\n";

				// ------------------------------------------------------------
				// マッピングタイプ情報
				// ------------------------------------------------------------
				str += "mapping: \"" + gamepad.mapping + "\"\n";

				// ------------------------------------------------------------
				// ボタンリスト
				// ------------------------------------------------------------
				var buttons = gamepad.buttons;

				str += "buttons: {\n";
				var j;
				var n = buttons.length;
				for(j=0;j < n;j++){
					// GamepadButton オブジェクトを取得
					var button = buttons[j];

					str += "  \"" + j + "\": { ";

					// ボタン押下状態
					str += "pressed:" + button.pressed + " , ";

					// ボタン入力強度
					str += "value:" + button.value + " }\n";
				}
				str += "}\n";

				// ------------------------------------------------------------
				// 軸リスト
				// ------------------------------------------------------------
				var axes = gamepad.axes;

				str += "axes: {\n";
				var j;
				var n = axes.length;
				for(j=0;j < n;j++){
					str += "  \"" + j + "\": ";

					// 入力強度
					str += axes[j] + "\n";
				}
				str += "}\n";
				str += "\n ----- \n\n";
			}

			element.textContent = str;

		},1000/60);

	})();

    //-->
    </script>

  </body>
</html>
 


 

ゲームパッドの接続状態を監視する

 


■ゲームパッドの接続状態を監視する

 
ゲームパッドの接続関連のイベントは、以下の種類があります。
 
イベントリスナーを使って登録します。
 
イベント名 解説
"gamepadconnected" GamepadEvent ゲームパッドを接続すると実行されるイベント
"gamepaddisconnected" GamepadEvent ゲームパッドの接続を解除すると実行されるイベント
 
■接続が検出できない場合
 
ゲームパッドを接続後、ゲームパッドから何らかの操作を行う事で、初めて gamepadconnected イベントが発火する場合があります。
 
■ GamepadEvent オブジェクトを取得する
 
登録したコールバック関数の引数から、GamepadEvent オブジェクトが得られます。
 
■ Gamepad オブジェクトを取得する
 
Gamepad オブジェクトを取得するには、gamepad プロパティを使用します。
 

■取得例

 
ゲームパッドの接続状態を監視する

// GamepadEvent に対応している
if(window.GamepadEvent){

	// ------------------------------------------------------------
	// ゲームパッドを接続すると実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener("gamepadconnected",function(e){
		console.log("ゲームパッドが接続された");
		console.log(e.gamepad);
	});

	// ------------------------------------------------------------
	// ゲームパッドの接続を解除すると実行されるイベント
	// ------------------------------------------------------------
	window.addEventListener("gamepaddisconnected",function(e){
		console.log("ゲームパッドの接続が解除された");
		console.log(e.gamepad);
	});

}