原文連結：cuttherope，編譯：webapptrend
譯者注：Cut the Rope 是一款人見人愛的小遊戲。有一個開發團隊將它改造成了HTML5版本。想看看他們在改造過程中的經驗之談嗎？那就看下面由開發人員自己寫的文章吧~
啟示
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做準備！
在IE9中作為一個HTML5應用來執行，從原始的iOS原始碼改寫而來。從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自動完成功能。更好的一點是：它是免費的！我們在Windows7的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展示了一個Windows8的開發者嚐鮮版。在這一宣告以後，HTML5將會更有趣，因為Metro風格的應用可以用好幾種開發工具集開發，包括HTML5。這意味著Web開發者可以將為Web所寫的程式碼拿來很容易地無縫移植到Windows8中。為線上應用的投資將來可以在Windows Store中得到實實在在的回報。
事實上，只要再做一點點工作，我們就能將HTML5應用移植到Windows8的Metro風格應用中。可以在這篇博文中讀到關於 Cut the Rope以及它整合到Windows Store中的內容。
我們非常開心看到開發者使用HTML5構建的應用。你可以下載IE9並且可以在www.beautyoftheweb.com找到一些其他的很漂亮的站點，或者在dev.windows.com下載開發者嚐鮮版的Windows 8。
要保持關注，因為這只是一個開始……還會有更多驚喜的！