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() メソッドで検出できない場合があります。接続関連のイベントを１度でも発火させると、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 インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| id | String | ゲームパッドの識別名。（製品名、製造番号、製造業者など） |
| index | Number | ゲームパッドのインデックス値。（プレイヤー番号に該当） |
| connected | Boolean | ゲームパッドの物理的な接続状態。true の場合接続中である。 |
| mapping | String | マッピングタイプ情報。 |
| buttons | GamepadButtonList | GamepadButtonList オブジェクトを取得する。 |
| axes | Array | 感圧可能なスティックなどの入力強度。(-1.0 〜 +1.0) |
| timestamp | Number | タイムスタンプ情報。 |
■マッピングタイプ情報（mapping プロパティ）
ゲームパッドのレイアウト名が得られます。
標準レイアウトである場合、"standard" という文字列が得られます。
例えば、「Xbox 360 コントローラー」は、標準レイアウトです。
| レイアウト名 | 説明 |
| "standard" | 標準レイアウト（参考リンク） |
| "" (空文字) | ベンダーの独自仕様であるレイアウト |
■ GamepadButtonList オブジェクト（buttons プロパティ）
GamepadButtonList オブジェクトは、配列のように中身を取り出せます。
中には、GamepadButton オブジェクトが格納されています。
十字キーボタンに該当する番地を知る方法は無いようです。
ゲームパッドの種類によっては、十字キーボタンの入力結果は、buttons プロパティではなく、axes プロパティの方に出力されます。
標準レイアウトであるゲームパッドでは、以下のようにマッピングされています。
| 番地 | 説明 |
| 12 | 上ボタン |
| 13 | 下ボタン |
| 14 | 左ボタン |
| 15 | 右ボタン |
| 番地 | 説明 |
| 0 | A ボタン（下段のボタン列） |
| 1 | B ボタン（下段のボタン列） |
| 2 | X ボタン（上段のボタン列） |
| 3 | Y ボタン（上段のボタン列） |
| 4 | L1 ボタン（上段） |
| 5 | R1 ボタン（上段） |
| 6 | L2 ボタン（下段） |
| 7 | R2 ボタン（下段） |
| 番地 | 説明 |
| 8 | SELECT ボタン |
| 9 | START ボタン |
| 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）（負数なら上方向、正数なら下方向） |
大抵の場合、２次元のアナログスティックや十字キーが該当するでしょう。
他にも、１〜３次元的な入力デバイスが存在するかもしれません。
しかし、スティックの数と次元の数との関係を知る方法は無いようです。
連番でマッピングされていないゲームパッドも存在するようです。
■ GamepadButton オブジェクトについて
GamepadButton インターフェースには、以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| pressed | Boolean | ボタンの押下状態。true で押されています。false で離されています。 |
| value | Number | 感圧可能なボタンの入力強度。(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);
});
}