《Cut The Rope》 HTML 5版背后的開發故事

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

        啟示

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

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

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

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

        我們覺得 HTML5 版本的游戲讓網絡更有趣了，同時，它也展示了 IE 的上一個版本因支持開放標準而顯示出的長處。因此，我們想要分享一些開發 Cut the Rope 過程中的技術細節，以便幫助構建你自己的 HTML5 站點，并最終為 Windows 8 Store 做準備！

        從Objective-C到 JavaScript

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

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

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

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

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

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

        另一個例子是 Objective – C 代碼庫面向對象的本質。與傳統的基于對象的繼承不同，JavaScript 提供了基于原型屬性（Prototype property）的繼承。這是對基于對象的繼承的一個高度簡化的形式，與傳統的 Objective – C 這樣面向對象的語言不兼容。幸運的是，有各種各樣的類庫，可以幫助你寫的面向對象編程（OOP）風格的 JavaScript 代碼，我們使用的類庫是一個非常簡單的由 John Ressig 寫的。 （需要注意的是，ECMAScript5，最新版本的 JavaScript 的規范，也提供了對一些類的支持，但我們選擇不使用它，因為我們對該版本的語言不熟悉，而我們的開發進度非常緊張）。

        除了將代碼從 Objective-C改到 Javascript，我們還需要將圖像代碼從 OpenGL 改到 HTML5 的 Canvas API。總體上說，這一切都進行地很順利。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 代碼中的三角形頂點數組解約掉可以提供更好性能。

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

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

        Performance性能

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

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

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

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

        我們在 Javascript 上打的賭成功了，因此，我們將注意力轉向了硬件和瀏覽器。由于 IE 的硬件加速堆棧以及我們在 Disney Tron 和其他一些 HTML5站點上積累的經驗，我們對于游戲在測試機器上的完美表現毫不擔心。我們很輕易地達到了上限 60 FPS（幀/每秒）。但是，我們想要確認游戲在其他硬件和其他瀏覽器上也能表現得很好。下面是我們經過一些初步測試后所看到的結果。

        根據測試數據，我們將 30 FPS（幀/每秒）設置為最小閾值。當瀏覽器速度低于這個閾值的時候，我們將會通知用戶。他們仍然可以玩這個游戲，但是我們會通知他們在游戲中他們可能會 感覺到一些遲緩現象。這確保了這個游戲能支持不同硬件和軟件，并且提供給玩家我們所能提供的最好體驗。

        我們想要指出兩件事情。第一件事，這個游戲的現有版本在桌面 PC 機和 Mac 機上使用鼠標玩時效果是最好的。我們還沒有加入對觸屏輸入的只支持，但在未來的版本中，我們會考慮這一點。

        第二件事，現有的 Chrome 版本（version 16）有一些已經為大家所知的和媒體播放相關的問題， 使得 Cut the Rope 中的聲音飄忽不定。我們進行了深入調研，試圖用不同格式（包括 WebM）重新編碼媒體文件，但是沒有找到一個合適的格式或者 MIME 配置或者其他任何方案來有效解決這個問題。這個問題看起來是瀏覽器的 bugs 以及已經為大家所知的問題。更重要的是，盡管聲音時斷時續，游戲玩起來還是非常有意思的。考慮到這一點，我們一方面可以說 IE9 的用戶能免費得到一個很棒的應用，另一方面，Chrome 以及一些 Firefox 用戶可能會遇到一些聲音上的問題，但他們會注意到我們退回使用了一個 flash 插件來確保聲效和音樂都能正常工作。

        工具

        關于 HTML5 的一件很好的事情是你不需要學習一門新的語言來利用這項新技術的強大功能。如果你知道并且懂得 Javascript，那么你就能實現一個現代瀏覽器所能實現的所有功能。你甚至可以創建一個像這個游戲一樣的你自己的游戲！

        代碼編輯器以及開發環境

        Visual Web Developer 2010 Express 可以免費下載使用，是一款很棒的編輯器，即使是對有經驗的 Web 開發者來說也是如此。

        分析器截圖，圖中內容是對 Calc2PointBezier 函數中花費的不合比例的時間（Calc2PointBezier 函數是用來計算繩子每節的位置）。

        有一些很好的免費工具，可以讓我們更容易地使用 Javascript 和 HTML5。我們的大多數開發工作都是在 Visual Web Developer 2010（“快捷”版本可以在這里免 費獲得）中完成的。這是一個非常健壯的 Web 編輯器，帶有 Javascript 以及 CSS 自動完成功能。更好的一點是：它是免費的！我們在 Windows 7 的 IE9 上完成了我們的大多數測試，并且我們也時不時在 Firefox、Chrome、Safari 以及 IE10 的開發者嘗鮮版。總體上說，主流瀏覽器對于我們所使用的 HTML5 的特性都有比較一致的實現。在大多數情況下，我們在 IE9 上測試通過的特性在其他地方也運行得一樣好。

        清查我們的資源加載器（Resource Loader）！

        Cut the Rope 有一個非常獨特的細節化的視覺風格——有很多圖片、音頻和視頻，并且花費也很小。最終達到的效果就是這個游戲比一般的網站要大很多。綜合起來說，它大概有 6MB（而一般的網站是 200-300K）。這些多媒體資源要花費一段時間才能下載，而如果資源沒有下載到位，我們看不到網頁上的內容，我們是無法開始游戲的。在一個典型的網頁 中，如果你缺掉了一兩幅圖，它仍然是可以運行的，但在 HTML5 的 API（drawImage）中，如果圖像無法獲取的話，這一 API 就會崩潰。

        為了解決這個問題，我們想要創建一個資源加載器，用來下載頁面所需要的所有內容，并且當下載完成后，給我們一個好的反饋。這一點小代碼能做很多很棒的事情：

        1. 它屏蔽了不同瀏覽器之間對下載處理的不同以及它們告知你進度的方式的不同。

        2. 它能讓你決定事物下載的順序（你可能會想要先下載大文件，或者你想要在下載游戲圖形之前先下載所有菜單圖像）。

        3. 最終，它可以智能提醒你事物的到達，這樣就可以通知用戶進度情況，甚至可以開始部分游戲。

        創建這些類型的庫是很難做好的。由于我們對于這些庫的效果感到十分滿意，因此我們想要分享我們的資源加載器的代碼給 你。最終的成果形式是 PxLoader，一個 Javascript 的資源加載器庫，你可以使用它為 HTML5 應用、游戲、站點制作預加載器。它是開源免費的。你可以從頁面頂端抓取它，或者點擊這里。

        IE中的性能工具

        另外一個在開發過程中不可或缺的工具是 IE9 中的 Javascript 分析器（JavaScript Profiler）。分析器能讓你發現你的代碼中的熱點以及瓶頸。在我們第一次做性能評估的時候，我們發現在一些機器上我們一直困在了 20 或者 30 幀/每秒，這使得我們幾乎要放棄了。

        我們做了一些最初的代碼檢查，但是什么都沒有檢查出來。我們使用分析器加載了游戲，發現我們在 satisfyConstraints ()函數上花了太多時間。這個函數是用來計算有關繩子的一些物理性質的數字。我們用來改寫的 Objective-C版的實現是用遞歸實現的，遞歸每加深一層，就會傳遞一個新的對象。

        通過 Microsoft 的一些指導，我們決定將遞歸函數替換成一個“解開”的循環版本。結果是驚人的。我們在每一個瀏覽器中都看到了 10 倍以上的性能提升。坦白說，如果沒有 IE9 的分析器工具，我們永遠都不可能發現這一點。

        下一步是什么？

        九月，Microsoft 展示了一個 Windows 8 的開發者嘗鮮版。在這一聲明以后，HTML5將會更有趣，因為 Metro 風格的應用可以用好幾種開發工具集開發，包括 HTML5。這意味著 Web 開發者可以將為 Web 所寫的代碼拿來很容易地無縫移植到 Windows 8 中。為在線應用的投資將來可以在 Windows Store 中得到實實在在的回報。

        事實上，只要再做一點點工作，我們就能將 HTML5 應用移植到 Windows 8 的 Metro 風格應用中。可以在這篇博文中讀到關于 Cut the Rope 以及它整合到 Windows Store 中的內容。

        我們非常開心看到開發者使用 HTML5 構建的應用。你可以下載 IE9 并且可以在 www.beautyoftheweb.com 找到一些其他的很漂亮的站點，或者在 dev.windows.com 下載開發者嘗鮮版的 Windows 8。

        要保持關注，因為這只是一個開始……還會有更多驚喜的！

來自: www.webapptrend.com