ページ

2012年1月19日木曜日

[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 も組み込んである

0 件のコメント:

コメントを投稿