譯者注：Cut the Rope 是一款人見人愛的小游戲。有一個開發(fā)團隊將它改造成了HTML5版本。想看看他們在改造過程中的經(jīng)驗之談嗎？那就看下面由開發(fā)人員自己寫的文章吧!

啟示

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

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

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

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

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

從Objective-C到 JavaScript

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

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

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

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

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

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

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

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

一個使用帆布API完成的aliased lines來畫繩子的例子。

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

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

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

Performance性能

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

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

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

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

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

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