割繩子（Cut the Rope）非常可愛而有趣所以很快流行起來成為一個人見人愛的游戲。因此，我們有一個想法：讓我們為這個偉大的游戲提供一個HTML5的網頁版本，提供給更多的人。為了做到這一點，微軟的IE團隊與ZeptoLab（游戲的創造者）以及像素實驗室的專家們進行合作，使得割繩子可以在瀏覽器中運行。為了最終可以完整的將游戲全部通過HTML5移植到網頁上，必須做到：畫布上渲染圖形，使用瀏覽器兼容的音頻和視頻，CSS3樣式以及個性化的WOFF字體。
靈感
作為運行在IE9中的HTML5應用程序是從iOS的原生代碼中移植過來的。
上面的屏幕截圖展示的是這個版本中的某個關卡。
你可以通過這個網址來訪問HTML5版本的割繩子（Cut the Rope）：www.cuttherope.ie
我們認為HTML5版本使Web可以過更多有趣的東西，而最新版本的IE瀏覽器也在進一步的支持這些標准。考慮到這一點，我們希望可以分享更多這個項目“幕后”的技術細解，幫助你建立起自己的HTML5網站，並為Windows8商店做好准備。
從Objective-C到JavaScript
將割繩子移植到新平台上時，我們希望能保留其獨特的物理、交互以及個性的體驗。因此，在早期我們決定針對iOS原生代碼版本做一個“接口”來適配這個游戲（而不是重寫）。由此我們開始全面地分析原來的Objective-C代碼項目。原來這是一個非常大而復雜的游戲。iOS本地代碼大約包含了15,000行代碼（不包含引用庫）！在所有代碼中最復雜的部分是物理、動畫和繪圖引擎。這三者本身就非常復雜，再經過緊密的關系相連以及高度優化后更是如此。
要在保持獨特的個性和達到難以置信的質量的情況下並將玩家習慣也移植到瀏覽器中，這無疑是一項非常艱巨的任務。而要做到這一點，我們將賭注全押到了JavaScript上。
在過去，JavaScript是以效率低下而聞名的語言。坦率的說，開始是這樣的。舊版本的JavaScript引擎是被設計來執行簡單的“腳本”任務（也正因此而得名）。然后，今天，JavaScript引擎經過高度優化，功能類似於即使編譯語言，而執行速度也接近於原生代碼。
除此之外，我們知道編寫JavaScript代碼與其他編譯型代碼是要采用不相同的心態。正如我們要從Objective-C移植游戲一樣，我們需要擁抱種種變化以及優化相關的任務。
一個明顯的例子就是JavaScript中缺少結構。結構是通過一種輕量級的屬性來聚合相關屬性。它非常容易使用一個JavaScript對象來創建並設置一組屬性，但是這種做法和結構的實現是有非常大區別的。第一個區別是，每當結構分配給一個變量或傳遞給函數時都會生成一個變量的副本。因此，在類似於Objective-C之類的編譯型語言編寫函數時修改參數傳入的一個結構是不會影響調用者所持有的結構。即使在同一個函數中，將結構分配給不同的變量也會產生不同的副本變量。JavaScript對象，在另一個方面，是通過引用傳遞的。因此，當函數修改了對象參數，這個修改調用者也會看到。
模仿原生結構的一個簡單的方法就是創建JavaScript的副本然后賦值或作為參數傳遞。在原生語言中使用結構是非常小的開銷。而在JavaScript中創建對象就昂貴的多，所以我們必須非常小心，以盡量減少要分配的數量。特別是對任務，我們試圖盡可能的復制各個屬性而不是創建新對象實例。
另一個例子是面向對象的Objective-C的代碼庫。為了代替傳統的基於對象的繼承，JavaScript提供了典型的基於原型屬性的繼承方式。這是一個高度簡化的對象繼承形式，並與傳統的Objective-C等面向對象語言不兼容。幸運的是，有各種各樣的類庫，可以幫助你寫面向對象（OOP）風格的JavaScript代碼，我們使用由John Ressig編寫的一個非常簡單的類庫（以JQuery而成名）。（請注意，最新的JavaScript的規范版本ECMAScript5已經包括了對類的支持，但是我們選擇不使用這種方式，因為我們本身缺乏對這個版本語言的了解，再加上需要嚴格的執行我們的開發計划）
除了需要將Objective-C代碼移植到JavaScript，我們還需要從OpenGL將圖形代碼移植到HTML5的Canvas API。總的來說，這是非常順利的。Canvas提供了令人驚訝的渲染速度，尤其是該API在瀏覽器硬件加速方面（如Internet Explorer 9）。
用Canvas API繪制的有鋸齒的繩子實例。
令人驚訝的是，我們遇到的這個Canvas竟然比割繩子所采用的移動OpenGL ES版提供了更多的功能。例如繪制抗鋸齒線段。在OpenGL中繪制反鋸齒線條需要在其中通過鑲嵌從不透明到完全透明的色塊形成三角地帶來完成。HTML5的Canvas自身就具備了處理抗鋸齒線條的API。這就意味着，我們確實需要對OpenGL版本中的代碼進行刪減。刪除了OpenGL代碼中三角形頂點的數組也給我們帶來了更好的性能，盡可能多的嘗試采用本機復制的方法繪制三角形線條。
最后，我們需要在瀏覽器中執行將近15000行（最后它被精簡了很多，所以如果您在瀏覽器中查看源代碼將會比這個少）代碼。由於有這么龐大的代碼復雜性，Denis Morozov在開始之前很公允的問道：HTML5提供給我們的速度和性能能否滿足這個游戲？
要回答這個問題，我們需要先創建“性能”的里程碑，在這里我們得到了游戲中運行最激烈部分的最小版本。也就是說，我們需要繩子看起來和真的很像就需要在瀏覽器中實現非常復雜的物理引擎。
性能
在項目進行的第三周，我們終於有了一個簡單的定時器來引導動畫、繪制引擎和物理引擎。現在進入游戲場景，有了一根繩子、一顆星星和一個Om Nom精靈。努力！在這周四，已經包含一些基本的鼠標交互，我們可以玩游戲啦！很快就我們就會開始進行性能測試，但是我們希望可以讓ZeptoLab團隊給一些反饋。
當我們將代碼共享給ZeptoLab時，他們對游戲在瀏覽器中的性能（特別是游戲的速度和平滑感）感受十分驚訝。說實話，這讓我們稍稍的松了一口氣。在激烈和實時進行的物理計算方面，我們預計JavaScript會要更快一些。通常人們對JavaScript有“緩慢”的成見是錯誤的，這個例子就是非常好的證明。新一代的JavaScript引擎會更快。
在這個項目中，我們使用Internet Explorer 9預覽游戲。當你載入游戲時，Internet Explorer 9的Chakra JavaScript引擎會為代碼啟動一個預編譯線程，像Objective-C或C++一樣對進行編譯。然后，將編譯后的代碼（字節碼）實時發送給游戲執行線程。編譯后的結果接近本機原生代碼的執行速度。神奇的是，這些都是由JavaScript引擎來完成的，我們並沒有為此做任何特殊的代碼。
這是項目前做的幀速測試（注意，上限幀率為60FPS）
我們在JavaScript上的賭注得到了回報，接下來我們就把所有關注都轉移到了硬件和瀏覽器上。隨着IE瀏覽器的硬件加速渲染和我們的經驗、Disney Torn以及其他HTML5網站，沒有浪費太大的力量就使游戲在測試機器上完美運行。非常容易的達到了60FPS（frames per second）。但是我們要肯定，在其他瀏覽器和硬件上也可以輕松運行。上面是我們做的一些初步測試。
基於這些數字，我們將底線設置為30 FPS。我們決定在瀏覽器低於該閥值時通知用戶。他們依然可以選擇繼續玩游戲，但是我們會通知他們可能會感覺到有點呆滯。這將確保我們可以支持更多的硬件和軟件，以確保能為游戲玩家提供最好的游戲體驗。
還需要指出兩點。第一，目前的游戲版本只支持桌面電腦或蘋果電腦的鼠標操作，我們還沒有加入針對觸摸的支持，但是我們會考慮在未來的版本中實現。
第二，在目前的Chrome版本（版本號為16）中，有已知割斷繩子而聲音無法加載的未知問題。我們在研究可變通的方法，並試圖對多種媒體格式進行重新編碼（包括WEBM），但還是沒有發現格式或者MIME配置以及其他東西可以可靠的解決這個問題，這似乎是瀏覽器的本身的錯誤。更重要的是，游戲還可以繼續，雖然間歇的會失去音頻但是游戲依然可玩且有趣。盡管如此，我們可以說Internet Explorer 9用戶可以獲得一個非常偉大的用戶體驗，Chrome和Firefox用戶可能會遇到音頻運行的問題，但是注意我們會回調一個Flash插件，以確保聲音效果和音樂保持工作。
工具
關於HTML5另一件偉大的事情就是，你不需要去學習另外一門新的語言才能釋放這項新技術的力量。如果你知道和理解JavaScript並可以使用現代瀏覽器就可以做到啦。你甚至可以通過這樣的方式創建您自己的游戲。
代碼編輯器和開發環境
Visual Web Developer 2010 Express 是可以免費下載的編輯器，為Web開發人員提供了最好的開發體驗。
從截圖可以看到，大多數的時間都耗費在Calc2PointBezier中，這個方法是用來計算繩子段所在的位置。
有一個偉大而免費的工具，使JavaScript和HTML5的工作變的更加容易。我們在開發時使用的Visual Web Developer 2010（“Express”版本是免費提供的）就是個功能非常強大的網頁編輯器，支持JavaScript和CSS自動完成。更棒的是express版本是免費的！我們在Windows 7的Internet Explorer 9上測試的同時也對Firefox、Chrome、Safari以及Internet Explorer10開發者預覽版進行了測試。一般情況下，我們都在Internet Explorer 9上進行開發測試，並對HTML5的特性進行一致的實現，然后保證在其他瀏覽器上可以工作。
獲取我們的資源加載器！
割繩子是非常獨特的，具有非常詳細的視覺元素 --- 大量的媒體圖像、聲音和視頻 --- 這需要一些小成本。其結果是整個游戲遠高於網站的平均水平，這些綜合起來大約要有6MB（比較典型的網站平均水平為200-300K）。許多媒體信息都是下載一點使用一點，但是在我們下載完所有內容之前游戲是不能開始的。傳統的網頁在這方面是相當寬容的，如果你錯過了一、兩個圖像是沒有關系的，但是HTML5的Canvas API是非常嚴格的如果缺少圖像會運行（調用DrawImage）失敗。
為了應付這一挑戰，我們需要創建一個資源加載器，下載所有需要的內容，這個頁面要為下載提供良好的反饋信息。這段代碼要做一個大堆智能的事情：
- 它要涉及如何處理不同的瀏覽器下載方式，以及高速這些瀏覽器怎么去按照進度下載；
- 它可以讓你對下載列表做出非常明智的決定（你可能想先下載大文件，例如，你可能想在下載菜單圖片之前先下載游戲的圖片）；
- 最后一件聰明的事情時，是向你的用戶顯示下載進度，比如在游戲開始的時候，完成第一組的下載。
現在最棘手的事情是構建這些類庫。我們非常高興並希望和您分享這些資源加載的程序代碼。最終采用的是PxLoader，一個JavaScript資源加載器庫，你可以為HTML5的應用程序、游戲或網站進行資源預載。這個類庫開源和免費的，你可以在頁面的頂部獲取它，也可以通過點擊這里獲取。
Internet Explorer的性能工具
另一個在開發過程中不可缺少的工具就是Internet Explorer 9的JavaScript分析其。通過它可以分析代碼中的熱點和瓶頸。做第一個與性能相關的里程碑，在發現很多機器上幀速都停留在20或30FPS時，我們幾乎要選擇退出。
在做了初步的代碼分析后，我們沒有選擇退出，又一次對游戲進行了全面的探查，發現游戲在satisfyConstraints()函數上花費了大量的時間。該函數是用來對與繩索有關的物理特性進行數學計算的。在做Objective-C代碼移植時，我們先對這個方面進行了書面遞歸分析，深入的分析了每個調用和對象傳遞。
在來自微軟的指導下，我們決定通過一些代碼對這個函數進行“拆包”替換，結果相當驚人，我們看到幾乎在所有測試瀏覽器中性能都提高了10倍！坦率的說，在此之前我們從來都沒有發現，Internet Explorer 9有分析工具。
接下來是什么？
在九月的BUILD大會上，微軟展示了Windows 8的開發者預覽版。隨着這項產品的發布，HTML5的故事變得更為有趣，因為Metro風格的應用程序可以使用多樣的開發工具集，其中就包含HTML5。這意味着，Web開發人員可以將代碼更加輕松、無縫的移植到Windows 8。在稍后Windows 商店上線之后體驗在線支付的真正價值。
事實上，只需要做很少的額外的工作，就能夠將HTML5的應用移植成Windows 8 Metro風格的應用程序。你可以通過這個博客的文章了解割繩子（Cut the Rope）是如何與Windows商店相整合。
我們很高興能看到今天開發人員都在使用HTML5來構建應用。你可以下載Internet Explorer 9，並通過www.beautyoftheweb.com找到其他漂亮的站點，或通過dev.windows.com下載Windows 8的開發人員預覽版。
敬請關注，這僅僅是個開始...更多驚喜即將到來！