http://www.programmer.com.cn/12198/
Cocos2D-HTML5是基于HTML5規范集的Cocos2D引擎的分支，于2012年5月發布。Cocos2D-HTML5的作者林順將在本文中介紹Cocos2D-HTML5的框架、API、跨平臺能力以及強大的性能。Cocos2D-HTML5是Cocos2D系列引擎隨著互聯網技術演進而產生的一個分支。該分支基于HTML5規范集，目標是可對游戲進行跨平臺部署。Cocos2D-HTML5采用MIT開源協議，設計上保持Cocos2D家族的傳統架構，并可聯合Cocos2D-X?JavaScript-binding接口，最大程度地實現游戲代碼在不同平臺上的復用。
Cocos2D-HTML5由Cocos2D-X核心團隊主導開發和維護，行業領袖、HTML5大力推動者Google為這個項目提供支持。Zynga、Google等大公司的工程師也參與到Cocos2D-HTML5的設計工作中，在各路高手的協作之下，Cocos2D-HTML5的技術方案和API設計正毫無疑問地朝著?大氣、簡潔的方向快速發展。
Cocos2D程序員可分為三類：苦逼程序員，把自己游戲針對iOS、?Android、Windows?Phone三大主流平臺分別用Objective-C、Java、C#移植一遍，不是熬夜換語言重寫游戲邏輯，就是學習不同語言為熬夜移植做準備；普通程序員，采用C++，一次編碼后爭取最大限度地在iOS、Android、Windows?8?Metro之間復用；而作為后PC時代的文藝程序員，我認為跨全平臺才是真的跨，配合Cocos2D-X?JavaScript-binding，最終目標是能夠實現Native?App和Web?Browser之間的輕松跨越。
圖1 Cocos2D-HTML5游戲框架結構
下文就細致地介紹Cocos2D-HTML5引擎以及如何玩轉它。
引擎的框架設計
Cocos2D-HTML5引擎框架的設計目標總結下來有兩個，第一個目標是?“偷懶”，引擎運行目標平臺是所有的平臺，無論是PC瀏覽器還是移動瀏覽器，；第二個目標還是“偷懶”，兼容Cocos2D系列引擎，讓已掌握開發要領的同學可以繼續偷懶，讓沒有學過的同學可以輕松悟透、輕松入門、晉級。
在引擎的框架設計中，渲染層是Canvas或WebGL，如果瀏覽器支持WebGL，自動優先選擇WebGL，運行速度會快一點，要是不支持也沒關系，Canvas通過性能優化后，比起WebGL一點也不遜色。
區別于其他Cocos2D系列引擎設計，Cocos2D-HTML5引擎框架引入了Dom?Menu的設計，瀏覽器支持多語言的優勢得到了傳承，開發者再也不用為游戲的多語言發愁了，再也不需要辛苦地到處找字庫、貼圖了，因為在引擎內已準備好了。值得注意的是，Dom實現的各項菜單還有各種動作和特效，甚至和Canvas可以實現互動，讓開發者一點都感覺不到Dom的存在。
圖2 UI Dom分層結構
引擎的API封裝和使用介紹
框架設計得簡潔明了，API當然也不能復雜，Cocos2D-HTML5在API的封裝上，直觀易懂，最大程度地保留原Cocos2D系列的API的使用習慣，保持發揚偷懶的風尚，使開發者可以在悟解框架之后輕松繼續晉級。
在引擎的設計和開發中，采用的是John?Resige類的繼承方法，在使用上類似于C++，適合原有Cocos2D系列的游戲資源進行快速1:1移植，我們的目標是實現機械式翻譯，因此期待自動翻譯的工具出現。
當然，Cocos2D-HTML5引擎面向的是Web，引擎在高級API的封裝上，根據JavaScript語言的特點重新進行封裝，滿足廣大前端程序員、JavaScript開發者的使用習慣：Write?less，do?more。
API足夠容易使用。在其代碼倉庫有專門的目錄，其中為開發者準備了各種Demo，所有的引擎功能都有對應的test?case展示其用法，開發者可以在這個基礎上快速掌握各種功能和特效的使用，還有更簡單的方式—直接拷貝組合應用于游戲開發中。
此外，引擎采用原生的JavaScript語言開發，可兼容其他成熟的JavaScript框架，開發者可以在引擎的基礎上自由選用合適的框架，加速游戲的開發進度。
引擎的跨平臺能力
在互聯網領域，各個瀏覽器之間存在大量的標準和不兼容，引擎一定要將這種耗費無謂青春的行為扼殺。在引擎的設計中，通過瀏覽器能力檢測和適配器模式，消除不同瀏覽器帶來的運行環境的差異，兼容不同瀏覽器的事件處理，抹平不同瀏覽器之間的各個坑，讓開發者能在平坦的道路上加速前進，快樂寫代碼。抹平了差異，再也不需要做重復無價值的工作，基于Cocos2D-HTML5開發的游戲終于可以輕松穿越操作系統運行在各瀏覽器上了。
采用Cocos2D-HTML5這類更高級語言引擎進行游戲開發，開發效率更高，加上豐富的工具集支持、實時的各種調試手段和云合作開發手段，更加直接的效果調校方式，完全沒有開發環境依賴，各種優勢的疊加，可以大幅度降低開發成本，提升游戲的上架速度。
如果覺得這樣還不夠，還有更好的選擇，引擎的高級API和Cocos2D-X?JavaScript-binding引擎API是相同的，同一份JavaScript游戲代碼不用修改或者小范圍修改，配合JavaScript-binding引擎就能以Hybrid的方式直接作為本地應用發布。
通過兩種發布方式的結合，Cocos2D-HTML5可實現立體覆蓋，通過它開發者就能以一個更快、更愜意的方式實現自己的想法。
引擎的性能
引擎通過一系列的優化措施，在設計之初就注重各項功能的實現和性能的有機結合，保證引擎在使用上沒有各種性能上的短板。
目前引擎通過優化，運行起來已符合“復雜”游戲運行的性能要求。但不可否認，引擎采用的是腳本語言，且運行在瀏覽器這個特殊的環境中，引擎的效率相對于本地應用性能會低一些。
HTML5游戲引擎中，WebGL性能夠強，可惜不是所有瀏覽器都能支持，要實現偉大的跨平臺目標，引擎就必須兼容性能次之的Canvas。還好Canvas的表現還不錯，經過優化，Canvas模式下引擎性能表現毫不遜色。
各項性能優化工作如圖3、圖4所示，如有更好的方案請不吝賜教。
圖3 優化之前的TileMap測試例（4400個Tile 8.7幀）
首先，從邏輯層面和渲染層面相互配合，引入DirtyRegion的方法，利用少量的邏輯控制，在耗時最大的渲染環節，不該重畫的部分堅決不畫。通過優化，需要做的事情變少了，渲染效率高了，帶來的更大利好是系統級別的省電，在移動設備上，這個優勢會變得日益明顯。
圖4 優化之后的TileMap測試例（4400個Tile 60幀）
其次，引擎利用臨時Canvas作為緩存，用來緩存需要大量渲染處理的圖層中間結果，頻繁使用時，直接復制，不需要經過繁瑣的步驟獲得。通過優化可提升渲染環節的處理效率，加速引擎在特定情景模式下的運行速度。
下面列舉一個性能對比的例子：在進行優化之前，運行TileMap測試例，4400個Tile構成的地圖，每次在畫面中顯示，都需要將無數多的Tile拼成一幅圖，再顯示出來，想想也知道會多么浪費資源。在Mac?Pro?13寸上的Chrome瀏覽器上，Canvas模式下只能運行到8-10幀。引擎通過圖層緩存來優化，效果立竿見影，相同環境運行幀率立刻就有60幀了。
那么就只能達到60幀嗎？其實不是，只有60幀是因為瀏覽器有幀率控制。為了看到極限速度，可以將Chrome的幀率限制關閉掉，硬耗CPU計算，可以看到這個測試例的滿負載幀率可達250多幀。不過，如此大的幀率已超出顯示器的顯示范疇，沒有實際意義，它只是用來告訴我們它究竟能跑多快。
圖5 關閉Chrome VSync的測試例（4400個Tile 251幀）
最后，引擎性能優化工作還體現在不可視區域渲染和像素級渲染的優化上。Canvas默認是畫出你要它畫的所有東西，是個忠實的執行者，不管你是否畫在了不可視區域內，不像OpenGL會把不可視區域自動優化掉。所以我們選用手動模式，優化之后效果也是非常卓越的。
至于像素級的渲染優化，在非拼接類型的Sprite、Label等資源，就可以應用這類型的優化手段了，其原理是避免了Sprite渲染位置處于在兩個像素之間，Canvas要去產生邊緣各是半個像素的渲染的情況，提高Canvas的渲染效率，同時還可以獲得更好的顯示效果。
通過優化前后顯示效果的對比，可以看出在優化之后，Canvas只需直接渲染顯示原始的資源圖片，而不需要做像素級別的調整處理。
圖6中，優化前人物褲子上的線本來是單個像素的寬度，結果顯示位置剛好在兩個像素之間，Canvas要運用虛影、疊加等各種手段在上面2個像素的區域模擬出1個像素的效果，可以說出力不討好。
通過優化，Canvas可以避免這種嚴重浪費資源的情況，直接渲染加載圖片，提升Canvas的渲染效率，同時獲得沒有虛影的更佳顯示效果。當然，需要拼接的資源不能采用這樣的優化方法，防止出現渲染真空地帶，但很多類型的游戲，存在大量不需要拼接的資源，有廣闊的運用空間。
在Canvas模式下，引擎還優化了Tint的功能，通過圖層拆分得到紅、綠、藍和黑色四個基色的圖層，然后通過數學方式疊加得到想要的各個顏色效果，避免了用像素級別渲染這種效率極低的方式來實現Tint功能，從而大大提高了Tint功能的執行效率。
當然，這里討論的都是Canvas模式，用WebGL實現這個功能同樣無壓力。
在瀏覽器支持WebGL硬件加速模式下，引擎的壓力就小很多了，其渲染性能遠遠高于Canvas模式，各種優化措施更加齊全，這里就不一一列舉了。通過性能優化，引擎渲染環節占用的時間縮到最小，引擎可以支撐更復雜的游戲流暢運行，各種更炫的效果也更多，各位開發者在使用時就不會有如履薄冰的感覺了。
圖6 優化前后的顯示效果對比
結語
經過各方不懈的努力，現在Cocos2D-HTML5引擎終于踏出了堅實的第一步，目前已經發布了Alpha版本。
可能很多人還在抱臂觀望HTML5的游戲發展，?而Cocos2D-HTML5游戲引擎已經出發了，我們會將《捕魚達人》游戲移植到Cocos2D-HTML5，讓這個游戲來進一步趟平瀏覽器上各種各樣的坑和引擎的Bug。
時間之梭沒有停止，各類型設備計算能力正飛速提升，運行性能上的約束會越來越小，Cocos2D-HTML5憑借其在開發便捷、成本低和發布渠道多樣化的優勢，會獲得越來越大的應用空間，變成游戲開發者優先考慮的游戲引擎，很快就有這么一天到來，不管你信不信，反正我們是.相信了，并在為之努力。
Cocos2D-HTML5項目還處于初期階段，如果開發者在使用時遇到問題，歡迎登錄http://www.cocos2d-x.org論壇提意見。作為開源項目的Cocos2D-HTML5要想走得更遠，離不開大家的幫助。
作者林順，開源引擎Cocos2D-X的共同創立者和核心開發者，目前負責Cocos2D-HTML5開源引擎項目的開發，致力于構造一個跨多平臺和跨瀏覽器的游戲框架。
本文選自《程序員》雜志2012年06期，未經允許不得轉載。如需轉載請聯系 market@csdn.net
《程序員》2012年雜志訂閱送好禮活動火熱進行中
 ---- 翻譯的很好！)
)
