post:2012年8月1日 12:38 update:2015年5月5日 22:54

chrome21のJoystickAPIを試す

JoystickAPI(Gamepad APIとの表記もあり)はその名の通り、ブラウザから特別なソフトのインストール無しにジョイスティックが扱えるAPI。

何か試してみたいと思ったものの、ゲームを作るほどの手間はかけたくないし、ゲームじゃないのにゲームコントローラを使っても面白くないし。

ゲーム、ゲーム、ミスタービデオゲーム…そうだ、きっと誰かがHTML5でマリオを作っているはず。それをゲームコントローラで遊べる改造をしてみよう。



探せばあるもので、html5 マリオでケンサクしたら一件目にInfinite Mario Bros. in HTML5 | Rawrbitraryがヒット。

どうやらjavaからの移植で、移植元のjava版はMinecraftの作者Notchが作ったらしい。

GoogleChromeのデベロッパーツールの前では難読化したコードも楽々読める。キーボードの入力判定だけをJoystickAPIのそれに差し替えれば最低限動くはず。

機能がどこにあるかさっぱり分からなかったニコニコ動画Zeroを解析した時を思い出したけど、今回は簡単に差し替え出来た。mario部分が1つのjsファイルに纏まっていたし。



さてこれが本題のコード これを有効にする手順は以下のとおり。

・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)にすればとりあえず動く。



Infinite Mario Bros. in HTML5 | Rawrbitrary

マリオ3な雰囲気

コメントを残す

ブログオーナーにだけ送信したいメッセージはメール欄にどうぞ。名前とメール欄は任意。