Skip to content

キミもwiiU 対応ゲームが作れる! wiiu.enchant.js α版リリース

wiiU で HTML5 ゲームを作る

こんにちは! enchant.js 開発チームのリョーヘイです。

任天堂から WiiU が発売されました。WiiU では、発売前から搭載されているブラウザのHTML5対応度が高いことや、JavaScript APIを通じてゲームパッドの情報が取得できることなどが一部で話題になっていました。「これはHTML5 ゲーム開発者への挑戦状だ! やるしかない!」 ということで、enchant.js 開発チームでは、WiiU の Webブラウザ上で動くゲームやアプリを簡単に開発することができる “wiiu.enchant.js” を作成しています。このたび、そのα版が完成しましたので、お知らせします。

基礎知識

WiiU ブラウザとHTMLアプリケーションは、JavaScript の GamePad API を通して通信します。イベントが来るわけではなく、必要なときにこちらから API を叩く必要があります。wiiu.enchant.js では 1フレームに1回、ゲームパッドから情報を取得しています。

ゲームパッドからは以下のような情報が取得できます。

  • 左右スティックの傾き
  • ゲームパッドの加速度 (3軸)
  • ゲームパッドの姿勢情報 (2軸)
  • A, B, Y, X, L, R, XL, XR ボタン・十字キーなどが押されているかどうか

ただし、現時点では GamePad の各スティック・キーにはいろいろな機能が割り当てられており、情報の取得ができるスティックやキーであっても、デフォルトの機能のせいでゲームUIには利用できない場合があります。例えば、B ボタンは「戻る」、L, R ボタンはそれぞれ「戻る」「進む」に割り当てられているため、押下と同時にページが遷移してしまいます。また、左右スティックはそれぞれ画面内の移動とズームに割り当てられているため、操作中はゲームを安定してプレイすることができません。(DOM の preventDefault のように、デフォルトの動作を停止するようなAPIを用意してほしいところですね)

これを防ぐために、2つの工夫をする必要があります。

1. viewport の設定

次のような viewport meta タグを head タグ内に入れます。これで左右スティックを傾けても移動やズームが発生しなくなります。


<meta name="viewport" content="width=1280,height=598,user-scalable=no">

2. _blank でのページ遷移

ゲームのHTMLページへの遷移には、target=”_blank” を指定したリンクを使います。これにより、「戻る」「進む」が無効化され、これらに割り当てられたボタンをゲームUIのために使えるようになります。

wiiu.enchant.js の機能

wiiu.enchant.js は、WiiU Gamepad API の薄いラッパとして機能します。

スティック・加速度・姿勢データ

左右スティックの情報は以下から取得できます。値は -1 〜 1 の間です。

  • core.input.lstick.x (LスティックのX方向の傾き, 右が正の値)
  • core.input.lstick.y (LスティックのY方向の傾き, 上が正の値)
  • core.input.rstick.x (RスティックのX方向の傾き)
  • core.input.rstick.y (RスティックのY方向の傾き)

加速度データ。1Gを +1.0 とした値です。

  • core.input.acc.x (左右)
  • core.input.acc.y (手前・奥)
  • core.input.acc.z (上下)

回転データ。360度を 1.0 とした値です。

  • core.input.angle.x (左右方向を軸とした回転)
  • core.input.angle.y (手前・奥の方向を軸とした回転)
  • core.input.angle.z (上下方向を軸とした回転)

キーイベント

以下のイベント、および対応する “buttonup” イベントが発行されるようになります。

  • abuttondown
  • bbuttondown
  • xbuttondown
  • ybuttondown
  • lbuttondown
  • rbuttondown
  • zlbuttondown
  • zrbuttondown
  • upbuttondown
  • downbuttondown
  • rightbuttondown
  • leftbuttondown

また、core.input も更新されます (ex. Aボタンが押されている間、core.input.A が true になります)。


core.on('abuttondown', function(){
    // jump
});

core.rootScene.on('enterframe', function(){
    if(core.input.b){
        // b-dash
    }
});

※ Game クラスは、v0.6 から Core クラスに改称されました。

  • 値はすべて 1フレームに1度更新されます。キーの up, down イベントは、1フレームにつき1回のみ発行されます。
  • ゲームパッドの innerWidth, innerHeight は 854×448 です。ピンポンゲームのサンプルでは、427×224 の解像度でゲームを作っています。
  • 現在は α版で、すべてのAPIをラップしているわけではありません。今後のアップデートは github およびこのページでお知らせします。

ダウンロード

github の “feature/wiiu” ブランチからダウンロードできます。git clone または zip ダウンロードして、”plugins/wiiu.enchant.js” をご利用ください。

https://github.com/wise9/enchant.js/tree/feature/wiiu

サンプル

左右のスティックを使って対戦するピンポンゲームのサンプルを、”examples/plugins/wiiu/vspong” に同封しています。すぐに遊んでみたい方はこちら。

http://wiiu.stepism.com/examples/plugins/wiiu/vspong/

参考資料

 

9leap にも、「WiiU対応ゲーム」のカテゴリが新設されました。自信作のゲームができたら是非投稿してみてください。

それでは、Enjoy!

このエントリーをはてなブックマークに追加
はてなブックマーク - キミもwiiU 対応ゲームが作れる! wiiu.enchant.js α版リリース
Post to Google Buzz
Share on GREE

Related posts:

  1. enchant.js v0.6.0 リリース! アップデートの内容紹介
  2. socket.enchant.jsに重大なバグ発見!と、もっとわかりやすいサンプル
  3. enchant.jsで自動的に画面が拡大されるのを抑制するには?
  4. enchant.jsがCoffeeScriptで記述可能に! enchant.coffee登場!
  5. enchant.jsが進化!新機能でプチ・ネットゲームを作っちゃおう!

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*