Joel Webber是Google Web Toolkit的創(chuàng)建者之一，他在GOTO Aarhus 2011大會上做了名為”HTML 5中憤怒的小鳥”的演講，該演講由InfoQ錄制并發(fā)布。我們采訪了Webber，想知道將“憤怒的小鳥”這款熱門游戲移植到Google Chrome和HTML5上的更多細(xì)節(jié)。

InfoQ：關(guān)于將“憤怒的小鳥”移植到HTML5上，請您提供一些技術(shù)細(xì)節(jié)吧。

JW：在GOTO的演講里面，涵蓋了大多數(shù)廣泛技術(shù)層面。簡單說來，游戲是用Java寫的，使用Google Web Toolkit轉(zhuǎn)編譯成了JavaScript。在移植過程中，我們開發(fā)了一個小程序庫，叫PlayN，游戲開發(fā)者可以用其完全在Java環(huán)境中工作(相比在瀏覽器中調(diào)試，直接在JVM上調(diào)試要方便、強(qiáng)大得多)。經(jīng)過轉(zhuǎn)編譯，PlayN程序庫讓同樣的代碼可以運(yùn)行在Flash和Android上，盡管 Rovio目前還沒有使用這個功能。

InfoQ：您使用了哪些HTML5特性?

JW：要是說得迂腐一點(diǎn)，我用到了一些目前還不屬于“HTML5”的規(guī)范，但常常被人們認(rèn)為是其一部分。其中包括：WebGL、Canvas、CSS3(特別是仿射[affine]變換)，LocalStorage、《audio》/WebAudio。在渲染上，有兩種模式：WebGL和DOM。WebGL模式中，頁面上只有一個大的《canvas》元素。在DOM模式中，我們對每個對象使用單獨(dú)的DOM元素，這些對象包括鳥、豬、石塊、背景元素等等。然后，我們使用CSS3變換來高效地給這些元素布局。之所以用這兩種模式，是因為還有很多瀏覽器不支持 WebGL，而且我們想保證所有可能的瀏覽器都能運(yùn)行這個游戲，不僅僅是Chrome。

在音效方面，剛開始的時候，我們必須退而使用基于Flash的方法，因為一些瀏覽器對于《audio》標(biāo)簽的支持很差(包括Chrome)。后來這里修復(fù)了一下，F(xiàn)lash也就成為我們很少使用的倒退式方法。最終，我們相信WebAudio(https://dvcs.w3.org/hg /audio/raw-file/tip/webaudio/specification.html)才是游戲中應(yīng)該使用的API。

InfoQ：移植這個游戲花了多少時間?

JM：很難給出精確答案。在Google，我們有三個人支持Rovio，但主要是用那20%的時間(有時還包括晚上和周末)。一個Rovio的工程師完成了移植的大部分主要工作。其他人后來輔助一些應(yīng)用內(nèi)支付工作，以及一些上線后的問題。

InfoQ：最困難的工作是哪些?

JW：游戲的邏輯很直接。我們已經(jīng)有Box2D(Angry Birds和其他很多2D物理游戲使用的引擎)可以使用，用Java開發(fā)游戲讓其更易于管理(某種程度上比較大的)代碼庫。不過還是有一些東西需要額外的工作：

資源加載：不同于大多數(shù)本地應(yīng)用，Web應(yīng)用通常會按需加載資源，這樣才能快速啟動。一般來說這是好事，但是會讓應(yīng)用邏輯更復(fù)雜，因為我們希望需要的資源下載完成后，每個游戲場景馬上就能顯示出來。這還意味著你需要對資源的請求小心排序，這樣就不會在還不需要的資源上耗費(fèi)帶寬。

跨瀏覽器渲染：如前所述，沒有什么“最好的”方式，能夠在所有的瀏覽器中渲染游戲畫面。抽象渲染邏輯，并實施兩種完全不同的方法，需要大量精力和工作量。

讓游戲能夠做到每秒60幀運(yùn)行，這是一個很重要的目標(biāo)。垃圾回收暫停讓其變得很困難，盡管我們最后還是解決了這方面的問題。

在InfoQ提供的“HTML5中憤怒的小鳥”演示中，Web提到更多遇到的關(guān)于垃圾回收方面的難題，以及PlayN程序庫，還有該程序庫在JVM上調(diào)試時起到的作用。

更多信息請查看IT技術(shù)專欄