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

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

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

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

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

在音效方面，剛開始的時(shí)候，我們必須退而使用基于Flash的方法，因?yàn)橐恍g覽器對(duì)于《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：移植這個(gè)游戲花了多少時(shí)間?

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

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

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

資源加載：不同于大多數(shù)本地應(yīng)用，Web應(yīng)用通常會(huì)按需加載資源，這樣才能快速啟動(dòng)。一般來說這是好事，但是會(huì)讓應(yīng)用邏輯更復(fù)雜，因?yàn)槲覀兿Ｍ枰馁Y源下載完成后，每個(gè)游戲場(chǎng)景馬上就能顯示出來。這還意味著你需要對(duì)資源的請(qǐng)求小心排序，這樣就不會(huì)在還不需要的資源上耗費(fèi)帶寬。

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

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

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

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