Cocos2D-HTML5開源2D遊戲引擎

轉自：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憑借其在開發便捷、成本低和釋出管道多樣化的優勢，會獲得越來越大的應用空間，變成遊戲開發者優先考慮的遊戲引擎，很快就有這麼一天到來，不管你信不信，反正我們是.相信了，并在為之努力。