[HTML5] Angry Birds を HTML5 に移植した人へのインタビュー記事・セッション

「Joel Webber氏がAngry BirdsのHTML5への移植を語る」
すごく興味深い。
HTML5 版は Google Web Toolkit を使って Java で書いてるのか。なんか、GWT を使って Java で書いたり、Script# を使って C# で書いたりと、「JavaScript だけど JavaScript は使ってない」 というのがどんどん増えていきそうだな。
レンダリングは WebGL モードと DOM モードがある。（セッション見たら WebGL、Canvas、DOM があるみたい）

記事にセッションへのリンクもあったので見てみた。（ほとんど聞き取れてないので、ほんとに見ただけって感じ）
Angry Birds on HTML5
以下、見ながら自分用の覚え書き

ゲームループ

• ごく普通に　ユーザーの入力 → ワールドの更新 → ワールドのレンダリング　らしい

スレッド

• モダンなゲームエンジンはシミュレーションとレンダリングに分かれてる
• けど、JavaScript はシングルスレッド
• HTML5 の Web Workers でマルチスレッドはできるが、そのぶん複雑になる

DOM によるレンダリング

• 普通のエレメントや CSS を使う
• <div style=”
  background: url(hoge.png) no-repeat;
  –webkit-transform: matrix3d(
  m00,m10,0,tx,
  m01,m11,0,ty,
  0,0,1,0,
  0,0,0,1);”/>
  みたいな感じ

Canvas によるレンダリング

• 2D のグラフィックシステム
• HTML5 Canvas は多くのブラウザーでハードウェアアクセラレーションが効く
• var ctx = Canvas.getContent(“2d”);
  ctx.save();
  ctx.transform(m00, m01, m10, m11, tx, ty);
  ctx.drawImage(hoge.png, 0, 0);
  ctx.restor();
  みたいな感じ

WebGL によるレンダリング

• 3D のグラフィックシステム（OpenGL ES 2 モデル）
• もっとも高速
• けど、まだほとんどサポートされてない

計算

• function mul(A, V, out) {
      out.x = V.x * A.m00 + V.y * A.m10;
      out.y = V.x * A.m01 + V.y * A.m11;
  }
  var A = new Mat(1, 0, 0, 1);
  var V = new Vec(0, 0);
  mul(A, V, out);
  これだと mul() の中身で 875 インストラクション（V8）
• function mul(A, V, out) {
      out[0] = V[0] * A[0] + V[1] * A[2];
      out[1] = V[0] * A[1] + V[1] * A[3];
  }
  var A = new Float32Array(1, 0, 0, 1);
  var V = new Float32Array(0, 0);
  mul(A, V, out);
  これだと mul() の中身で 376 インストラクション（V8）
  ざっくり、こうすれば 30% の時間で済むことになる

ガーベジコレクション

• GC が動くとその間止まる（60fps をキープできなくなる恐れあり）
• そこで、事前にオブジェクトをアロケートする、オブジェクトをプールするといったことをする
• 要するに、GC にゴミ回収させなければ、GC のせいで遅くならないってことか

起動時

• ブラウザーのキャッシュをうまく使う
• HTML5 AppCache は使える
• 細かい画像をたくさん読み込むより、1つにまとめていっきに読み込む

PlayN

• カジュアルゲーム用の Java ライブラリ
• ターゲット: HTML5、Flash、Android
• デスクトップの JVM を使って開発とデバッギング
• developers.google.com/playn
• GameLoop、Graphics、Audio、AssetManager、Network などのモジュール。Box2D も組み込んである