JoystickAPI(Gamepad APIとの表記もあり)はその名の通り、ブラウザから特別なソフトのインストール無しにジョイスティックが扱えるAPI。
何か試してみたいと思ったものの、ゲームを作るほどの手間はかけたくないし、ゲームじゃないのにゲームコントローラを使っても面白くないし。
ゲーム、ゲーム、ミスタービデオゲーム…そうだ、きっと誰かがHTML5でマリオを作っているはず。それをゲームコントローラで遊べる改造をしてみよう。
探せばあるもので、html5 マリオでケンサクしたら一件目にInfinite Mario Bros. in HTML5 | Rawrbitraryがヒット。
どうやらjavaからの移植で、移植元のjava版はMinecraftの作者Notchが作ったらしい。
GoogleChromeのデベロッパーツールの前では難読化したコードも楽々読める。キーボードの入力判定だけをJoystickAPIのそれに差し替えれば最低限動くはず。
機能がどこにあるかさっぱり分からなかったニコニコ動画Zeroを解析した時を思い出したけど、今回は簡単に差し替え出来た。mario部分が1つのjsファイルに纏まっていたし。
さてこれが本題のコード
Enjine.KeyboardInput.IsKeyDown=function(key){
//右、左、S(選択、ジャンプ)、A(ダッシュ、攻撃)
//箱コンにおいて… A=0 B=1 X=2 Y=3 左=14 右=15
//scfコンにおいて Yダッシュ＆攻撃、Bジャンプ
//つまり箱コンにおいてはXダッシュ、Aジャンプ
//A 65,down 40,S 83,left 37,
//上下左右
if(key==38){//上
return (navigator.webkitGamepads[0].buttons[12] || (0.5<navigator.webkitGamepads[0].axes[1]*-1))?1:0;
}else if(key==40){//下
return (navigator.webkitGamepads[0].buttons[13] || (0.5<navigator.webkitGamepads[0].axes[1]* 1))?1:0;
}else if(key==39){//右
return (navigator.webkitGamepads[0].buttons[15] || (0.5<navigator.webkitGamepads[0].axes[0]* 1))?1:0;
}else if(key==37){//左
return (navigator.webkitGamepads[0].buttons[14] || (0.5<navigator.webkitGamepads[0].axes[0]*-1))?1:0;
}else if(key==83){//S＝選択、ジャンプ＝A
return navigator.webkitGamepads[0].buttons[0];
}else if(key==65){//A＝ダッシュ＝X
return navigator.webkitGamepads[0].buttons[2];
}
};
これを有効にする手順は以下のとおり。
・xbox360コントローラーをPCに接続しセットアップする。自分はwindows7
・ブラウザを起動
・箱コンをPCに接続する。homeボタンを長押しして、ランプの点滅が止まったらOK
・箱コンのAボタンを押す。これでブラウザがゲームコントローラーを認識する
・Infinite Mario Bros. in HTML5 | Rawrbitraryにアクセス。読み込みが終わるまで待つ
・デベロッパーツールを開く。Ctrl+Shift+iや、メニュー→ツール→デベロッパーツール を選んでもよい。
・Consoleタブを選ぶ。既に何か書いてあるかもしれないが気にしなくて良い。
・テキストエリアに上記のコードをコピペし、エンターを押す。上記のコードはコード部分をダブルクリックすると選択状態になる。
・デベロッパーツールを閉じる
・ゲーム画面をマウスでクリック(念のためフォーカスを与える)
これで無事箱コンで操作が出来るはず。
細かく言うと、上下左右は十字キーとアナログ入力のどちらでも反応して、選択＆ジャンプの本来キーボードのSキーは箱コンのAボタン。ダッシュ＆攻撃の本来キーボードのAキーは箱コンのXボタン。
スーファミ配列に合わせたつもりだけど、これでいいんだよね。
GoogleChromeのバージョン21はWebカメラやマイクを使うgetUserMedia APIがプッシュされてるけど、ゲーム的にはJoystickAPIもなかなかよろしいと思う。
そうだ、3DSブラウザはこれに対応してくれよ
使ったコントローラーはこれ。
参考にしたサイト
Gamepad API Demo
コードにバグがあって箱コンが認識されない。大雑把に言うと、gamepad.jsの202行目のelse if()をelse if(true)にすればとりあえず動く。
