譯者注：Cut the Rope 是一款人見人愛的小游戲。有一個(gè)開發(fā)團(tuán)隊(duì)將它改造成了HTML5版本。想看看他們?cè)诟脑爝^(guò)程中的經(jīng)驗(yàn)之談嗎？那就看下面由開發(fā)人員自己寫的文章吧!

啟示

在IE9中作為一個(gè)HTML5應(yīng)用來(lái)運(yùn)行，從原始的iOS源碼改寫而來(lái)。

Cut the Rope 是一款人見人愛的小游戲。所以我們有了個(gè)點(diǎn)子，即通過(guò)使用HTML5將這款游戲放到網(wǎng)上以便讓更多的人能接觸到它。

為了做到這一點(diǎn)，微軟的IE團(tuán)隊(duì)和ZeptoLab團(tuán)隊(duì)（游戲的開發(fā)者）以及Pixel Lab的專家們合作以便將Cut the Rope 的網(wǎng)絡(luò)版本實(shí)現(xiàn)。最終效果要能將游戲毫不失真地翻譯成網(wǎng)絡(luò)版本，并且能展示出HTML5的強(qiáng)大功能：畫布提供的繪圖、基于瀏覽器的音頻和視頻、CSS3風(fēng)格以及WOFF字體的個(gè)性。

如果你想玩一下Cut the Rope 的HTML5版本，就去下面這個(gè)網(wǎng)址吧：www.cuttherope.ie。

我們覺得HTML5版本的游戲讓網(wǎng)絡(luò)更有趣了，同時(shí)，它也展示了IE的上一個(gè)版本因支持開放標(biāo)準(zhǔn)而顯示出的長(zhǎng)處。因此，我們想要分享一些開發(fā) Cut the Rope 過(guò)程中的技術(shù)細(xì)節(jié)，以便幫助構(gòu)建你自己的HTML5站點(diǎn)，并最終為Windows 8 Store做準(zhǔn)備！

從Objective-C到 JavaScript

在將Cut the Rope應(yīng)用到一個(gè)新平臺(tái)上的時(shí)候，我們希望我們保留了這個(gè)游戲的獨(dú)特的物理特性、動(dòng)作以及風(fēng)格。所以，在開始的時(shí)候，我們想要改寫iOS版本（而不是重寫）。我們仔細(xì)分析了用Objective-C寫成的原始版本，發(fā)現(xiàn)工程量很大，并且很復(fù)雜。iOS版本包含大約15，000行代碼（不包括庫(kù)�。┐�碼中最復(fù)雜的部分是動(dòng)作、動(dòng)畫以及繪圖引擎。它們本身就很復(fù)雜，使事情變得更為復(fù)雜的是這三塊之間耦合度很高，并經(jīng)過(guò)了大量?jī)?yōu)化。

這是個(gè)令人生畏的工作：要將這些代碼在瀏覽器上實(shí)現(xiàn)，而又不喪失原先的獨(dú)特個(gè)性以及很高的質(zhì)量。為了完成這個(gè)工作，我們賭上了Javascript。

在過(guò)去，Javascript一直被人看做是速度很慢的語(yǔ)言。坦白講，這種說(shuō)法在最初的確是對(duì)的。老的Javascript引擎是為處理簡(jiǎn)單的“腳本”（scripting）類型的工作設(shè)計(jì)的（如它的名字所示）。然而，在現(xiàn)在，Javascript引擎已經(jīng)經(jīng)過(guò)大量?jī)?yōu)化了。整合進(jìn)just-in-time等功能以后，Javascript執(zhí)行速度已經(jīng)可以接近底層代碼執(zhí)行速度了。

除此以外，我們知道使用Javascript編程不同于——并且需要的思維方式也不同于——用編譯型語(yǔ)言編程。當(dāng)我們將這個(gè)游戲從Objective-C改寫過(guò)來(lái)的時(shí)候，我們知道應(yīng)該充分利用Javascript編程的不同以及優(yōu)點(diǎn)。

一個(gè)明顯的例子是在Javascript中缺少structs。Structs是相關(guān)屬性的輕量級(jí)的聚合。使用Javascript對(duì)象來(lái)聚合一系列屬性是很容易的，但是這和使用一個(gè)合適的struct是很不同的。第一個(gè)不同是一旦structs被賦值給一個(gè)變量或則傳遞到一個(gè)函數(shù)的時(shí)候，它都會(huì)被復(fù)制。因此，一個(gè)使用如Objective-C這樣的編譯型語(yǔ)言編寫的函數(shù)可以修改以參數(shù)形式傳過(guò)來(lái)的struct的值，而又不改變?cè)瓉?lái)調(diào)用函數(shù)中的值。即使是在同一個(gè)函數(shù)中，將一個(gè)不同的值賦給struct也會(huì)將值復(fù)制一遍。而Javascript對(duì)象，是通過(guò)引用傳遞的。所以一個(gè)函數(shù)修改了一個(gè)對(duì)象參數(shù)的時(shí)候，原調(diào)用函數(shù)也能看到這個(gè)變化。

一個(gè)用來(lái)模仿structs的簡(jiǎn)單的方式是每當(dāng)將Javascript對(duì)象作為賦值對(duì)象或者參數(shù)傳遞的對(duì)象時(shí)都創(chuàng)建一個(gè)副本對(duì)象。在底層語(yǔ)言（native languages）中，使用structs的開銷是很小的。但在Javascript中創(chuàng)建一個(gè)對(duì)象則會(huì)有很大開銷，因此我們要非常小心，減少創(chuàng)建對(duì)象的次數(shù)。特別是在賦值的時(shí)候，我們盡可能地復(fù)制單個(gè)屬性，而不是創(chuàng)建一整個(gè)新的對(duì)象實(shí)體。

另一個(gè)例子是Objective – C代碼庫(kù)面向?qū)ο蟮谋举|(zhì)。與傳統(tǒng)的基于對(duì)象的繼承不同，JavaScript提供了基于原型屬性（Prototype property）的繼承。這是對(duì)基于對(duì)象的繼承的一個(gè)高度簡(jiǎn)化的形式，與傳統(tǒng)的Objective – C這樣面向?qū)ο蟮恼Z(yǔ)言不兼容。幸運(yùn)的是，有各種各樣的類庫(kù)，可以幫助你寫的面向?qū)ο缶幊蹋∣OP）風(fēng)格的JavaScript代碼，我們使用的類庫(kù)是一個(gè)非常簡(jiǎn)單的由John Ressig寫的。 （需要注意的是，ECMAScript5，最新版本的JavaScript的規(guī)范，也提供了對(duì)一些類的支持，但我們選擇不使用它，因?yàn)槲覀儗?duì)該版本的語(yǔ)言不熟悉，而我們的開發(fā)進(jìn)度非常緊張）。

除了將代碼從Objective-C改到Javascript，我們還需要將圖像代碼從OpenGL改到HTML5的Canvas API�？傮w上說(shuō)，這一切都進(jìn)行地很順利。Canvas是一個(gè)很快的渲染表面，特別是在一個(gè)API由硬件加速的瀏覽器中（比如IE9）。

一個(gè)使用帆布API完成的aliased lines來(lái)畫繩子的例子。

令人驚訝地是，我們遇到了好幾個(gè)地方，都是Canvas比在移動(dòng)版本Cut the Rope中使用的OpenGL ES提供了更多功能的。一個(gè)例子是畫anti-alias lines。在使用OpenGL畫anti-aliased lines的時(shí)候，需要將一條線鑲嵌到一個(gè)三角形地帶中，并且將末端的渾濁部分褪色以完成透明化。而在HTML5的canvas中，anti-aliasing lines的繪制是由line API自動(dòng)完成的。這意味著我們實(shí)際上需要從OpenGL版本中去掉一些代碼。將OpenGL代碼中的三角形頂點(diǎn)數(shù)組解約掉可以提供更好性能。

最終，我們有幾乎15，000行代碼在瀏覽器中執(zhí)行（它已經(jīng)被最小化了，所以如果你在瀏覽器中查看源代碼的時(shí)候，你會(huì)看到少得多的代碼）�？紤]到這么多代碼帶來(lái)的復(fù)雜性，Denis Morozov（ZeptoLab開發(fā)部門的總監(jiān)，the Director of Development at ZeptoLab）在開始的時(shí)候問(wèn)了一個(gè)問(wèn)題：HTML5能給我們我們所需要的速度和性能嗎？

為了回答這個(gè)問(wèn)題，我們創(chuàng)建了一個(gè)早期的“性能”里程碑，在這里，我們集中精力去得到游戲運(yùn)行時(shí)難度最高部分的最小版本。也就是說(shuō)，我們想要看一下繩子看起來(lái)是什么樣子的，以及我們是否能在瀏覽器中處理復(fù)雜的物理引擎。

Performance性能

項(xiàng)目開始以后三個(gè)星期，我們最終有了物理和繪圖引擎的基本部分，以及一個(gè)簡(jiǎn)單的用于啟動(dòng)動(dòng)畫的計(jì)時(shí)器�，F(xiàn)在，我們可以在游戲場(chǎng)景中呈現(xiàn)出一些繩索，一顆星星，以及一個(gè)Om Nom sprite。不錯(cuò)的進(jìn)步！第四周的時(shí)候，我們加入了一些基本的和鼠標(biāo)的互動(dòng)，這樣，我們就能真正開始玩游戲了。我們?cè)陂_發(fā)的過(guò)程中一直都在測(cè)試性能，并且希望ZeptoLab的團(tuán)隊(duì)能夠給我們一些反饋。

當(dāng)我們把這些代碼和ZeptoLab分享的時(shí)候，他們對(duì)這些代碼在瀏覽器中的性能表現(xiàn)感到驚喜（尤其是游戲的速度和平滑度）。說(shuō)句實(shí)話，我們一直都提著一口氣呢。我們希望Javascript能快點(diǎn)，因?yàn)槲锢碛?jì)算非常復(fù)雜，并且有實(shí)時(shí)性要求。這是一個(gè)很好的例子，證明了人們過(guò)去認(rèn)為Javascript很慢的觀點(diǎn)實(shí)際上是錯(cuò)的。最新的Javascript引擎是非�？斓摹�

在這個(gè)項(xiàng)目中，我們?cè)贗E9中預(yù)覽了游戲。當(dāng)你加載了游戲的時(shí)候，IE9的Chakra JavaScript引擎在一個(gè)后臺(tái)線程中將代碼進(jìn)行了預(yù)編譯——就像一個(gè)編譯器編譯Objective-C 或者 C++一樣。然后，它實(shí)時(shí)將編譯過(guò)的代碼（字節(jié)碼）發(fā)送給游戲線程去執(zhí)行。執(zhí)行速度幾乎和本地執(zhí)行速度一樣。令人驚訝的是，這樣的性能是來(lái)自于Javascript引擎，我們不需要在代碼中做任何特殊處理。

項(xiàng)目早期幀率檢測(cè)結(jié)果（注意幀率上限是60FPS）

標(biāo)簽： 割繩子  �发经�

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。