千亿国际网站行者无疆

千亿国际网站|首页-正版登录 >新闻中心

Cocos2DHTML5開源2D游戲引擎

作者: 千亿国际网站   点击次数:    发布时间: 2019-11-04 18:12

千亿国际886Cocos2D-HTML5是基于HTML5規范集的Cocos2D引擎的分支,于2012年5月發布。Cocos2D-HTML5的作者林順將在本文中介紹Cocos2D-HTML5的框架、API、跨平臺能力以及強大的性能。Cocos2D-HTML5是Cocos2D系列引擎隨著互聯網技術演進而產生的一個分支。該分支基于HTML5規范集,目標是可對游戲進行跨平臺部署。Cocos2D-HTML5采用MIT開源協議,設計上保持Cocos2D家族的傳統架構,并可聯合Cocos2D-XJavaScript-binding接口,最大程度地實現游戲代碼在不同平臺上的復用。

Cocos2D-HTML5由Cocos2D-X核心團隊主導開發和維護,行業領袖、HTML5大力推動者Google為這個項目提供支持。Zynga、Google等大公司的工程師也參與到Cocos2D-HTML5的設計工作中,在各路高手的協作之下,Cocos2D-HTML5的技術方案和API設計正毫無疑問地朝著大氣、簡潔的方向快速發展。

Cocos2D程序員可分為三類:苦逼程序員,把自己游戲針對iOS、Android、WindowsPhone三大主流平臺分別用Objective-C、Java、C#移植一遍,不是熬夜換語言重寫游戲邏輯,就是學習不同語言為熬夜移植做準備;普通程序員,采用C++,一次編碼后爭取最大限度地在iOS、Android、Windows8Metro之間復用;而作為后PC時代的文藝程序員,我認為跨全平臺才是真的跨,配合Cocos2D-XJavaScript-binding,最終目標是能夠實現NativeApp和WebBrowser之間的輕松跨越。

下文就細致地介紹Cocos2D-HTML5引擎以及如何玩轉它。

Cocos2D-HTML5引擎框架的設計目標總結下來有兩個,第一個目標是“偷懶”,引擎運行目標平臺是所有的平臺,無論是PC瀏覽器還是移動瀏覽器,;第二個目標還是“偷懶”,兼容Cocos2D系列引擎,讓已掌握開發要領的同學可以繼續偷懶,讓沒有學過的同學可以輕松悟透、輕松入門、晉級。

在引擎的框架設計中,渲染層是Canvas或WebGL,如果瀏覽器支持WebGL,自動優先選擇WebGL,運行速度會快一點,要是不支持也沒關系,Canvas通過性能優化后,比起WebGL一點也不遜色。

區別于其他Cocos2D系列引擎設計,Cocos2D-HTML5引擎框架引入了DomMenu的設計,瀏覽器支持多語言的優勢得到了傳承,開發者再也不用為游戲的多語言發愁了,再也不需要辛苦地到處找字庫、貼圖了,因為在引擎內已準備好了。值得注意的是,Dom實現的各項菜單還有各種動作和特效,甚至和Canvas可以實現互動,讓開發者一點都感覺不到Dom的存在。

框架設計得簡潔明了,API當然也不能復雜,Cocos2D-HTML5在API的封裝上,直觀易懂,最大程度地保留原Cocos2D系列的API的使用習慣,保持發揚偷懶的風尚,使開發者可以在悟解框架之后輕松繼續晉級。

在引擎的設計和開發中,采用的是JohnResige類的繼承方法,在使用上類似于C++,適合原有Cocos2D系列的游戲資源進行快速1:1移植,我們的目標是實現機械式翻譯,因此期待自動翻譯的工具出現。

當然,Cocos2D-HTML5引擎面向的是Web,引擎在高級API的封裝上,根據JavaScript語言的特點重新進行封裝,滿足廣大前端程序員、JavaScript開發者的使用習慣:Writeless,domore。

API足夠容易使用。在其代碼倉庫有專門的目錄,其中為開發者準備了各種Demo,所有的引擎功能都有對應的testcase展示其用法,開發者可以在這個基礎上快速掌握各種功能和特效的使用,還有更簡單的方式—直接拷貝組合應用于游戲開發中。

此外,引擎采用原生的JavaScript語言開發,可兼容其他成熟的JavaScript框架,開發者可以在引擎的基礎上自由選用合適的框架,加速游戲的開發進度。

在互聯網領域,各個瀏覽器之間存在大量的標準和不兼容,引擎一定要將這種耗費無謂青春的行為扼殺。在引擎的設計中,通過瀏覽器能力檢測和適配器模式,消除不同瀏覽器帶來的運行環境的差異,兼容不同瀏覽器的事件處理,抹平不同瀏覽器之間的各個坑,讓開發者能在平坦的道路上加速前進,快樂寫代碼。抹平了差異,再也不需要做重復無價值的工作,基于Cocos2D-HTML5開發的游戲終于可以輕松穿越操作系統運行在各瀏覽器上了。

采用Cocos2D-HTML5這類更高級語言引擎進行游戲開發,開發效率更高,加上豐富的工具集支持、實時的各種調試手段和云合作開發手段,更加直接的效果調校方式,完全沒有開發環境依賴,各種優勢的疊加,可以大幅度降低開發成本,提升游戲的上架速度。

如果覺得這樣還不夠,還有更好的選擇,引擎的高級API和Cocos2D-XJavaScript-binding引擎API是相同的,同一份JavaScript游戲代碼不用修改或者小范圍修改,配合JavaScript-binding引擎就能以Hybrid的方式直接作為本地應用發布。

通過兩種發布方式的結合,Cocos2D-HTML5可實現立體覆蓋,通過它開發者就能以一個更快、更愜意的方式實現自己的想法。

引擎通過一系列的優化措施,在設計之初就注重各項功能的實現和性能的有機結合,保證引擎在使用上沒有各種性能上的短板。

目前引擎通過優化,運行起來已符合“復雜”游戲運行的性能要求。但不可否認,引擎采用的是腳本語言,且運行在瀏覽器這個特殊的環境中,引擎的效率相對于本地應用性能會低一些。

HTML5游戲引擎中,WebGL性能夠強,可惜不是所有瀏覽器都能支持,要實現偉大的跨平臺目標,引擎就必須兼容性能次之的Canvas。還好Canvas的表現還不錯,經過優化,Canvas模式下引擎性能表現毫不遜色。

各項性能優化工作如圖3、圖4所示,如有更好的方案請不吝賜教。

圖3優化之前的TileMap測試例(4400個Tile8.7幀)

首先,從邏輯層面和渲染層面相互配合,引入DirtyRegion的方法,利用少量的邏輯控制,在耗時最大的渲染環節,不該重畫的部分堅決不畫。通過優化,需要做的事情變少了,渲染效率高了,帶來的更大利好是系統級別的省電,在移動設備上,這個優勢會變得日益明顯。

圖4優化之后的TileMap測試例(4400個Tile60幀)

其次,引擎利用臨時Canvas作為緩存,用來緩存需要大量渲染處理的圖層中間結果,頻繁使用時,直接復制,不需要經過繁瑣的步驟獲得。通過優化可提升渲染環節的處理效率,加速引擎在特定情景模式下的運行速度。

下面列舉一個性能對比的例子:在進行優化之前,運行TileMa

p測試例,4400個Tile構成的地圖,每次在畫面中顯示,都需要將無數多的Tile拼成一幅圖,再顯示出來,想想也知道會多么浪費資源。在MacPro13寸上的Chrome瀏覽器上,Canvas模式下只能運行到8-10幀。引擎通過圖層緩存來優化,效果立竿見影,相同環境運行幀率立刻就有60幀了。

那么就只能達到60幀嗎?其實不是,只有60幀是因為瀏覽器有幀率控制。為了看到極限速度,可以將Chrome的幀率限制關閉掉,硬耗CPU計算,可以看到這個測試例的滿負載幀率可達250多幀。不過,如此大的幀率已超出顯示器的顯示范疇,沒有實際意義,它只是用來告訴我們它究竟能跑多快。

圖5關閉ChromeVSync的測試例(4400個Tile251幀)

最后,引擎性能優化工作還體現在不可視區域渲染和像素級渲染的優化上。Canvas默認是畫出你要它畫的所有東西,是個忠實的執行者,不管你是否畫在了不可視區域內,不像OpenGL會把不可視區域自動優化掉。所以我們選用手動模式,優化之后效果也是非常卓越的。

至于像素級的渲染優化,在非拼接類型的Sprite、Label等資源,就可以應用這類型的優化手段了,其原理是避免了Sprite渲染位置處于在兩個像素之間,Canvas要去產生邊緣各是半個像素的渲染的情況,提高Canvas的渲染效率,同時還可以獲得更好的顯示效果。

通過優化前后顯示效果的對比,可以看出在優化之后,Canvas只需直接渲染顯示原始的資源圖片,而不需要做像素級別的調整處理。

圖6中,優化前人物褲子上的線本來是單個像素的寬度,結果顯示位置剛好在兩個像素之間,Canvas要運用虛影、疊加等各種手段在上面2個像素的區域模擬出1個像素的效果,可以說出力不討好。

通過優化,Canvas可以避免這種嚴重浪費資源的情況,直接渲染加載圖片,提升Canvas的渲染效率,同時獲得沒有虛影的更佳顯示效果。當然,需要拼接的資源不能采用這樣的優化方法,防止出現渲染真空地帶,但很多類型的游戲,存在大量不需要拼接的資源,有廣闊的運用空間。

在Canvas模式下,引擎還優化了Tint的功能,通過圖層拆分得到紅、綠、藍和黑色四個基色的圖層,然后通過數學方式疊加得到想要的各個顏色效果,避免了用像素級別渲染這種效率極低的方式來實現Tint功能,從而大大提高了Tint功能的執行效率。

當然,這里討論的都是Canvas模式,用WebGL實現這個功能同樣無壓力。

在瀏覽器支持WebGL硬件加速模式下,引擎的壓力就小很多了,其渲染性能遠遠高于Canvas模式,各種優化措施更加齊全,這里就不一一列舉了。通過性能優化,引擎渲染環節占用的時間縮到最小,引擎可以支撐更復雜的游戲流暢運行,各種更炫的效果也更多,各位開發者在使用時就不會有如履薄冰的感覺了。

經過各方不懈的努力,現在Cocos2D-HTML5引擎終于踏出了堅實的第一步,目前已經發布了Alpha版本。

可能很多人還在抱臂觀望HTML5的游戲發展,而Cocos2D-HTML5游戲引擎已經出發了,我們會將《捕魚達人》游戲移植到Cocos2D-HTML5,讓這個游戲來進一步趟平瀏覽器上各種各樣的坑和引擎的Bug。

時間之梭沒有停止,各類型設備計算能力正飛速提升,運行性能上的約束會越來越小,Cocos2D-HTML5憑借其在開發便捷、成本低和發布渠道多樣化的優勢,會獲得越來越大的應用空間,變成游戲開發者優先考慮的游戲引擎,很快就有這么一天到來,不管你信不信,反正我們是.相信了,并在為之努力。

作者林順,開源引擎Cocos2D-X的共同創立者和核心開發者,目前負責Cocos2D-HTML5開源引擎項目的開發,致力于構造一個跨多平臺和跨瀏覽器的游戲框架。