New 3DSブラウザのゲーム開発向けJavaScript API対応具合チェック

Newニンテンドー3DS インターネットブラウザーの主な仕様を見ると

HTML4.01/HTML5/XHTML1.1/Fullscreen/Gamepad/SVG/WebSocket/Video Subtitle/
WOFF/Web Messaging/Server-Sent/Web Storageの一部/XMLHttpRequest/
canvas/Video/DOM1-3/ECMAScript/CSS1/CSS2.1/CSS3 の一部

のウェブ標準に対応していると書いてある。旧3DSの仕様と比べるとだいぶリッチに見える。特にFullscreenとGamepadに対応しているならゲーム開発向けに使えるんじゃないのかね、と思って少し調べた。

Fullscreen

これ本当に対応しているの?

  • document.documentElement.webkitRequestFullScreen():何も起きない
  • document.documentElement.webkitRequestFullscreen():何も起きない
  • document.documentElement.requestFullscreen():多分関数が無い
  • document.documentElement.mozRequestFullScreen():多分関数が無い

もちろんPCのChromeだとちゃんとフルスクリーンになるんだけど、New 3DS上では何も起きない。何か別の呼び出し方が必要なのか。そもそもNetFront Browserのベンダープレフィックスは何だ。

Gamepad

navigator.getGamepads()を使う標準的な方法で確かにパッドの状態をとれる。けど、デジタルパッドとAボタン以外はブラウザ自体の操作に割り当てられているので使えない。アナログパッドや他のボタン全滅。

いろいろと勘違いがあった、下記追記参照。

その他

CanvasはfillRectとputImageDataしか試してないけどちゃんと動く。JavaScript自体はあんまり速い印象はない。128 x 128ドットのピクセル操作とかをやらせるとてきめんに遅くなる。

当たり前だがデベロッパツールとかコンソールとかは無い。

これらをふまえると

フルスクリーンもゲームパッドもパフォーマンスもイマイチなので、これでアクションゲーム開発はちょっとキツイ。フルスクリーンが効いて、その時は全てのパッド入力が取れる、という仕様が理想だったのだが。タッチペン使うのならもうちょっといけるのかもしれん。

Gamepad追記

@tkoharaさんに教えてもらって、htmlに

<meta name="viewport" content="width=device-width, height=device-height, 
user-scalable=no, initial-scale=1, maximum-scale=1">

を追記してアナログパッドなどでの画面の拡縮、移動操作を禁止すれば、パッド操作も問題なくできることがわかった。

あとテストプログラムでキー入力で取れていたものとゲームパッドで取れていたものを混同していて、いろいろ間違っていた。

  • ゲームパッドを取得するのはwebkitベンダープレフィックス付きのnavigator.webkitGetGamepads()
  • gamepad.buttonsは押し込みの値が直接取れる古いインタフェース(pressedやvalueは無い)
  • 左のアナログパッドがaxesの0, 1、右が2, 3
  • デジタルパッドはボタンとして取れる
  • L, RボタンやBボタンは進む、戻るのナビゲーションに割り当てられているので、ゲームに使えるかどうかは画面遷移に依存。基本使えない

なのでアナログパッドとデジタルパッド、A, X, Yボタンは使えそうなので、頑張ればなんとかなる、か?