Cocos2d-JS v3.1圖形渲染性能提升50%


GameLook報道 / Cocos2d-JS是整合瞭Cocos2d-html5和Cocos2d-x JavaScript Bindings(JSB)的遊戲引擎,擁有清晰的工作流,提供一致的開發體驗,一次編碼可將遊戲同時部署在網頁和原生應用渠道。

JSB腳本綁定跨平臺方案是所有HTML5遊戲跨原生平臺解決方案中最高效的,其運行效率比其他類型解決方案更快數十倍、數百倍,接近原生應用的性能表現。不僅如此,在Cocos2d-x JSB在開啟瞭baseline compiler之後,JSB在android平臺上的運行效率又有瞭質的飛躍,實測其性能表現已經超越瞭Lua,看來github上JS語言強勢流行也不是沒有道理的。

在移動網頁遊戲的性能改進方面,Cocos2d-JS團隊經過不懈努力和反復嘗試,終於成功對v3.1版本的圖像渲染進行瞭更新升級,改進後的Canvas模式渲染效率大幅提升,實測數據顯示其性能相比v2.x版本最大可達到50%的提升幅度。具體測試情況見下圖:

性能測試對比:手機上300個靜態Sprite



性能測試對比:手機上200個Sprite進行縮放、旋轉

v3.1渲染框架更新:更加清晰 更易維護

Cocos2d-JS原v2.x版本中,渲染流程的每一幀都要以樹形遍歷的方式(visit),將場景中所有節點都訪問到,查詢是否需要調用矩陣變換函數(transform), 並需對子節點進行排序並進一步遍歷之後,才能調用當前節點渲染函數展現在屏幕上。在遊戲的層級較多的情況下,這樣的做法可能帶來很大的消耗——本身沒有繪制圖形功能的層、節點、場景容器等需調用下文進行保存與恢復,這些系統API調用將耗費多餘的資源——而在實際的遊戲應用場景中,多層級是非常普遍的。

針對於此,Cocos2d-JS團隊進行瞭各種相關的性能實驗,並得出可喜的結果:

➢    將“全局坐標計算”與“逐層調用矩陣變換函數”方式進行比較後,發現前者耗費的時間僅為後者的一半左右

➢    在UI較多的遊戲中,若將那些不包括變形、旋轉等復雜操作的“路人甲”型元素進行設置全局坐標,可省下重新計算坐標的調用消耗,直接使用渲染圖形的方法即可將它們畫出

根據實驗結果,Cocos2d-JS團隊對渲染框架進行瞭升級改進(如下圖所示)。可以看出,抽象出統一的渲染層後,v3.1的框架設計更加簡潔,層次更加清晰,更加易於維護。

V2.x(左)與V3.1(右)渲染框架范例圖對比

3.1渲染流程升級:渲染隊列 未來可支持自動批量渲染

根據最新的渲染框架,Cocos2d-JS v3.1對流程設計也進行瞭優化升級(新舊流程圖對比如下)。

(原版)V2.x渲染流程圖

(新版)V3.1渲染流程圖

新渲染流程主要有以下優勢:

➢    引入渲染對象與全局坐標計算——隻有需要繪制的對象才加入隊列中,采用整體渲染過程更加高效,避免瞭多餘的上下文保存恢復與坐標計算等操作

➢    避免重復調用遍歷函數——在沒有進行節點添加、節點刪除時,避免調用遍歷函數等不必要的循環與查詢

➢    方便進行不同渲染模式切換——遊戲元素管理與渲染處理層次更加清晰,職責更加分明,方便進行Canvas與WebGL渲染模式切換

在新的渲染設計中,增加瞭一個渲染命令對象,將代替原來的渲染函數進行繪圖。新的渲染命令可將各個渲染對象加入到渲染隊列,進行統一管理,並提供全局世界坐標。

渲染隊列隻在子節點變化時才需要更新隊列,使得執行更加高效,並節省重復計算資源,提升渲染性能。渲染隊列的管理方式可幫助優化渲染算法與碰撞檢測(如紋理自動批量渲染合並等),可方便地進行瓦片地圖(TileMap)算法改進,提升使用大地圖時的性能表現,未來也可加入單獨的渲染線程。

此外,新圖像渲染設計還可支持WebGL模式的自動批量渲染,為圖形渲染提速奠定瞭堅實基礎。開發中可避免頻繁的渲染節點添加、刪除動作,通過重用已有節點來進一步提升性能。可重用的對象在不用的時候可以設置隱藏,加入緩存池,等待重用。

通過更加智能、高效渲染模式,Cocos2d-JS v3.1新圖像渲染設計將最大化地降低CPU開銷,幫助節省渲染環節中的CPU消耗。Cocos2d-JS將繼續支持更多的精品HTML5遊戲高性能地運行在移動瀏覽器上,致力打造Web平臺最高性能與最多特性的2d遊戲引擎。

目前,Cocos2d-JS圖像渲染代碼已合並至https://github.com/cocos2d/cocos2d-html5/tree/Renderer ,歡迎各位開發者下載測試,圖形渲染的改進將在v3.1版本默認集成。

同時,也歡迎各位開發者來測試基於新圖形渲染實現的MoonWarriors打飛機遊戲,訪問地址:http://cocos.b0.upaiyun.com/,或掃描下方二維碼快速進入遊戲。

Comments are closed.