強火で進め

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

FirefoxでゲームパッドAPIを使うサンプル

以前、紹介したゲームパッドAPIのサンプルを作ってみました。

FirefoxのNightlyビルドとChromeのCanary版でゲームパッドAPIを提供開始 - 強火で進め
http://d.hatena.ne.jp/nakamura001/20111220/1324389164

Firefoxの実装はW3Cのドラフトとはちょっと異なる部分も有るみたいなのでベンダープレフィックスの Moz を変更したとしたとしても他の環境では動作しない可能性も有るのでその点ご注意下さい。

ゲームパッドを接続した時には以下のイベントが発生します。既に接続済みの状態で実行するとゲームパッドのボタンなどを押した時などに発生します。

  window.addEventListener("MozGamepadConnected", function(e) {
  }, false);

こんな感じで情報を取得できます。

  window.addEventListener("MozGamepadConnected", function(e) {
    var gamepad = e.gamepad;
    var info = '';
    info += 'id : ' + gamepad.id + '<br>';
    info += 'connected : ' + gamepad.connected + '<br>';
    info += 'buttons : ' + gamepad.buttons + '<br>';
    info += 'axes : ' + gamepad.axes + '<br>';
    info += 'index : ' + gamepad.index + '<br>';
    document.getElementById('info').innerHTML = info;
  }, false);
説明 補足
id ゲームパッドのID(※)
connected 接続状態 接続時、true
buttons ボタンの情報
axes 軸の情報 十字キーの縦方向や横方向の入力量など
index ゲームパッドの番号 接続された順番に0から振られる様です

※実際はゲームパッドの名称(型番)+αな感じの文字列。バッファローのPC版モンスターハンター向けのゲームパッドの場合は「1dd8-12-iBUFFALO BSGP1205MHF」となりました。

その他に以下の様なイベントが有ります。
ゲームパッドを外した時】

  window.addEventListener("MozGamepadDisconnected", function(e) {
  }, false);

【ボタンが押された時】

  window.addEventListener("MozGamepadButtonDown", function(e) {
  }, false);

【ボタンが離された時】

  window.addEventListener("MozGamepadButtonUp", function(e) {
  }, false);

【軸の入力が発生した時】

  window.addEventListener("MozGamepadAxisMove", function(e) {
  }, false);

この様に各種入力時にイベントが発生しますが接続時にgamepadオブジェクトを保存しておいてタイマーなどで定期的に呼び出しても入力状態を取得可能です。こちらの方が簡単で良いでしょう。

  window.addEventListener("MozGamepadConnected", function(e) {
    var gamepad = e.gamepad;
    gamepads[e.gamepad.id] = gamepad;

イベントで入力状態を取得するサンプルはこちら
gamepadオブジェクトを保存しておいてタイマーで入力状態を取得するサンプルはこちらに準備しました。

ゲームパッドの入力はキーボードの入力と同様にブラウザの表示部分にフォーカスが当たっていないと発生しましせん。上手く動作しない場合は画面を一度、マウスでクリックして下さい。

Firebugなどの画面にフォーカスが当たっている時も同様に入力が取得出来ない状態になっているので開発中などは注意して下さい。