Joel Webber氏がAngry BirdsのHTML5への移植を語る

作者 Abel Avram , 翻訳者 編集部Ｎ 投稿日 2012年1月15日

セクション

デベロップメント

トピック

HTML 5 ,

RIA ,

Markup Languages ,

Java ,

GarbageCollection ,

言語 ,

プログラミング

共有 |

原文(投稿日：2012/01/10)へのリンク

Google Web Toolkit の共同作成者であるJoel Webber氏は、 GOTO Aarhus 2011で Angry Birds on HTML5 というセッションを開いた。InfoQはそれをレコードし公開した。我々は氏にインタビューして、人気ゲームAngry Birdsの Google Chrome と HTML 5への移植について、詳しく聞いた。

InfoQ: Angry BirdsのHTML5への移植に関して技術的に詳しくお話いただけませんか。

JW:幅広い技術的なことのほとんどは、GOTOでのプレゼンで話しました。要は、ゲームはJavaで書かれ、次に Google Web Toolkitを使ってJavascriptにクロスコンパイルされてます。移植のプロセスの間に、PlayNという小さなライブラリを書き、ゲーム開発者が全部Javaで開発できるようにしました（JVM 上で直接デバッグできるので、ブラザー上でデバッグするより遥かに強力です）。PlayNライブラリはまた、同じコードを Flash や Androidで走るようにクロスコンパイルすることができます。ただしRovioは現在この機能を使っていませんが。

InfoQ: HTML5のどのようなフィーチャを使ったのですか？

JW: ちょっと杓子定規ですが、技術的には "HTML5"でなくとも、しばしばそう呼ばれているスペックのいくつかを並べますね。短いリストならWebGL, Canvas, CSS3 （特にアフィン変換）、ローカルストレージ、 <audio> / WebAudioです。レンダリングには2つのモードがあります。 WebGL と DOMですね。WebGLモードでは、ページに単に1つの大きな <canvas> 要素があるだけです。DOMモードでは、それぞれのオブジェクト（bird, pig, block、バックグラウンド要素、など）に別々のDOM要素を使い、それからCSS3変換を使って、それらを効率的に配置します。このような二分法にした理由は、WebGLをまだサポートしていない多くのブラウザーがあり、Chromeだけではなく、できるだけ多くのブラウザー上でゲームが確実に動くようにしたかったからです。

オーディオには、最初Flashベースの代替手段を使わなければなりませんでした。というのもChromeを含んでいくつものブラウザーでは <audio> サポートが弱いからです。その後このことは解決され、Flashは単にほとんど使われない代替システムとなりました。結局、我々は WebAudio (https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html) がゲームに一番ふさわしいAPIだ、と信じています。

InfoQ: ゲームを移植するのにどのくらいの工数がかかったのですか？

JW: 正確に言うのは難しいですね。Googleで 我々3人がRovioをサポートしていますが、大抵は20%タイム（と時々夕方と週末）でやりました。実際のゲームの移植作業のほとんどは、一人のRovioのエンジニアが行ないました。後で他の人達が加わり、 in-app購入や製品化の問題のようなことを手伝ってくれました。

InfoQ: 一番難しかったのはどの部分ですか？

JW: ゲームのロジックは至って簡単でした。我々は既にBox2D（ Angry Birdsで使われた物理学エンジンと他の2D物理学ゲーム）の動作する移植を済ませ、Javaでゲームを書くと割りに大きなコードベースを管理するのが容易になりました。しかし若干の余分な仕事が必要でした。

• リソースのローディング：大抵のネイティブアプリと違って、一般にwebアプリは必要なリソースを必要な時にロードするので、早く立ち上げることができます。これは一般的にはいいことなのですが、アプリのロジックがこのために複雑になります。各ゲーム画面が必要になり次第リソースをダウンロードしたら、即座にその画面を表示する方がより好ましいからです。と言うことは、どの順番でリソースを要求するか注意する必要がある、ということです。必要でもないリソースのためにバンド幅を消費することがないようにしなければなりません。
• ブラウザーを跨いだレンダリング：先程言いましたように、全ブラウザーでゲームグラフィックスをレンダリングする唯一「最高の」方法というのはありません。レンダリングを抽象化して、2つの全く違ったアプローチを実装するのは猛烈に大変でした。
• ゲームをスムーズに1秒60フレームで走らせるのは、非常に重要な目標でした。ガーベッジコレクションのポーズでこのことが難しかったですが、結局解決できました。

氏は経験したガーベッジコレクションの問題と、PlayN ライブラリとJVM上のデバッグにおけるその役割に関して更に詳しく話してくれた。InfoQがホストしている Angry Birds on HTML5 のプレゼンでそれを見ることができる。