JavaScriptでゲームパッド

もともとは「GamePad API」としてW3Cが制定しているものだが、なぜかブラウザー毎に実装がマチマチで、これまたブラウザー毎に処理を分けないといけない。
そして、2014年現在は、Chrome37と、Firefox31でしかゲームパッドは使用出来ない（SafariとIEでは未実装）。

なので、実行しているブラウザを自動判別し、ChromeとFirefoxの両方でほぼ同じデータの取れるものだけを配列で返すライブラリを作ってみた。

 

両方のブラウザでほぼ同じデータが取れるものは下記になる。

 

ボタン1〜4に関しては各ゲームパッドによって違いはあるが、ボタンが4つあればボタン1〜4になっていると思われる。

ボタン5と6は、人差し指で押すボタンが返ってくる。
垂直軸と水平軸は−1、0、1の3つの値を返す。

さらに、Xbox360コントローラーでは2つのアナログスティックの値を−1〜1の範囲で返すようにしている。

しかし、アナログスティック1の値は垂直軸、水平軸の値とリンクしているので、アナログスティック1の値が振り切る（1、もしくは-1になる）と、十字キーを押したのと同じ状態になる。

Xbox360ではボタンは16個あるのだが、ファミコンもどきコントローラーとXbox360コントローラーで同じような値を返すのがボタン1〜6までなので、このライブラリではボタン6までしか値を返さない。

Xbox360コントローラーでは十字キーの値はボタンとして返ってくるのだが、ライブラリのほうで水平軸、垂直軸の値として返るように違いを吸収している。

 

ライブラリはgithubにあるので、普通にクローンすると使えるようになる。

 

digitarhythm/gamepadprocedure · GitHub

 

ファイル自体はCoffeeScriptなので使用する時はコンパイルしてご使用ください。

 

コンパイルしたファイル「gamepadprocedure.js」を読み込むと、「gamepadProcedure()」という関数が使用出来るようになるので、ゲームなどのループ処理内でこれを呼ぶことでゲームパッドの状態が配列として返ってくる。

SafariやIEの場合は空の配列が返される。

 

GAMEPADINFO = gamepadProcedure()

 

上記のようにした場合、ゲームパッドがひとつの場合はGAMEPADINFO[0]にゲームパッド情報が格納されている（ゲームパッド番号＝0）。

• GAMEPADINFO[0].padbuttons


• GAMEPADINFO[0].padaxes


• GAMEPADINFO[0].analogstick

上記3つのオブジェクトはさらに配列になっていて、GAMEPADINFO[0].padbuttons[0]〜[5]にボタン情報が入っている。

GAMEPADINFO[0].padaxes[0]には、十字キーの水平軸情報が入っている（-1、0、1）。

GAMEPADINFO[0].padaxes[1]には、十字キーの垂直軸情報が入っている（-1、0、1）。

GAMEPADINFO[0].analogstick[0]には、アナログスティック1の情報が配列として入っている。

GAMEPADINFO[0].analogstick[0][0]には、アナログスティック1の水平軸情報が入っている（-1〜1）。

GAMEPADINFO[0].analogstick[0][1]には、アナログスティック1の垂直軸情報が入っている（-1〜1）。

GAMEPADINFO[0].analogstick[1]には、アナログスティック2の情報が配列として入っている。

GAMEPADINFO[0].analogstick[1][0]には、アナログスティック2の水平軸情報が入っている（-1〜1）。

GAMEPADINFO[0].analogstick[1][1]には、アナログスティック2の垂直軸情報が入っている（-1〜1）。

 

ChromeとFirefoxではコントローラーの認識されるタイミングが違う。

FirefoxではファミコンもどきコントローラーでもXbox360コントローラーでも、Webアプリを起動した時には認識しておらず、ゲームパッドをなにかしら操作した時に認識される。

しかし、ChromeはどちらのゲームパッドでもWeb起動時に認識している。

動作的にはChromeのほうが好ましいのだが、一回認識してしまうとその後にUSBコネクタを何回抜き差ししても、最初に認識したゲームパッド番号がリセットされない。

例えば、Xbox360コントローラーを挿した状態でWebアプリを実行するとXbox360コントローラーがゲームパッド番号0として認識される。

その後にXbox360コントローラーを抜いてからファミコンもどきコントローラーを挿しても、ファミコンもどきコントローラーはゲームパッド番号1となりChromeを再起動するまでこの情報はリセットされない。

どちらにせよ、今の状態では複数のゲームパッドを使用したり、ゲームパッドの抜き差しなどはオススメしない。

enforce(enchant game framework)でシューティングゲーム

以前、Scratchで「Return to the earth」というゲームを作ったことがある。

Scratch2.0の新機能を確認するために作ったゲームなんだが、最初に作ろうと思った面を最後まで作りきれなかった。

そこで、enchant.jsを使ったゲームフレームワーク「enforce」でこれをちゃんと作ってみようと思う。

そして、Chromeアプリストアに有料で出してウハウハしよう（なんつって）。

とりあえずひな形を作ってみた。

カーソルキーの左右でシリンダーが移動して、「z」キーで弾を発射。以上（笑）

 Chrome、Safari、ハイエンドのAndroid端末のChrome、iOS8.0以上のSafariで動くと思います。

スマホなどのタッチデバイスでは自機（シリンダー）を動かして弾を撃つことは出来ませんが :-P