Cocos2d-JS是整合了Cocos2d-html5和Cocos2d-x JavaScript Bindings(JSB)的游戲引擎，擁有清晰的工作流，提供一致的開發(fā)體驗(yàn)，一次編碼可將游戲同時(shí)部署在網(wǎng)頁(yè)和原生應(yīng)用渠道。

JSB腳本綁定跨平臺(tái)方案是所有HTML5游戲跨原生平臺(tái)解決方案中最高效的，其運(yùn)行效率比其他類型解決方案更快數(shù)十倍、數(shù)百倍，接近原生應(yīng)用的性能表現(xiàn)。不僅如此，在Cocos2d-x JSB在開啟了baseline compiler之后，JSB 在android平臺(tái)上的運(yùn)行效率又有了質(zhì)的飛躍，實(shí)測(cè)其性能表現(xiàn)已經(jīng)超越了Lua，看來github上JS語言強(qiáng)勢(shì)流行也不是沒有道理的。

在移動(dòng)網(wǎng)頁(yè)游戲的性能改進(jìn)方面，Cocos2d-JS團(tuán)隊(duì)經(jīng)過不懈努力和反復(fù)嘗試，終于成功對(duì)v3.1版本的圖像渲染進(jìn)行了更新升級(jí)，改進(jìn)后的Canvas模式渲染效率大幅提升，實(shí)測(cè)數(shù)據(jù)顯示其性能相比v2.x版本最大可達(dá)到50%的提升幅度。具體測(cè)試情況見下圖：

性能測(cè)試對(duì)比：手機(jī)上300個(gè)靜態(tài)Sprite

性能測(cè)試對(duì)比：手機(jī)上200個(gè)Sprite進(jìn)行縮放、旋轉(zhuǎn)

v3.1渲染框架更新：更加清晰 更易維護(hù)

Cocos2d-JS原v2.x版本中，渲染流程的每一幀都要以樹形遍歷的方式(visit)，將場(chǎng)景中所有節(jié)點(diǎn)都訪問到，查詢是否需要調(diào)用矩陣變換函數(shù)(transform), 并需對(duì)子節(jié)點(diǎn)進(jìn)行排序并進(jìn)一步遍歷之后，才能調(diào)用當(dāng)前節(jié)點(diǎn)渲染函數(shù)展現(xiàn)在屏幕上。在游戲的層級(jí)較多的情況下，這樣的做法可能帶來很大的消耗——本身沒有繪制圖形功能的層、節(jié)點(diǎn)、場(chǎng)景容器等需調(diào)用下文進(jìn)行保存與恢復(fù)，這些系統(tǒng)API調(diào)用將耗費(fèi)多余的資源——而在實(shí)際的游戲應(yīng)用場(chǎng)景中，多層級(jí)是非常普遍的。

針對(duì)于此，Cocos2d-JS團(tuán)隊(duì)進(jìn)行了各種相關(guān)的性能實(shí)驗(yàn)，并得出可喜的結(jié)果：

➢ 將“全局坐標(biāo)計(jì)算”與“逐層調(diào)用矩陣變換函數(shù)”方式進(jìn)行比較后，發(fā)現(xiàn)前者耗費(fèi)的時(shí)間僅為后者的一半左右

➢ 在UI較多的游戲中，若將那些不包括變形、旋轉(zhuǎn)等復(fù)雜操作的“路人甲”型元素進(jìn)行設(shè)置全局坐標(biāo)，可省下重新計(jì)算坐標(biāo)的調(diào)用消耗，直接使用渲染圖形的方法即可將它們畫出

根據(jù)實(shí)驗(yàn)結(jié)果，Cocos2d-JS團(tuán)隊(duì)對(duì)渲染框架進(jìn)行了升級(jí)改進(jìn)(如下圖所示)?？梢钥闯觯橄蟪鼋y(tǒng)一的渲染層后，v3.1的框架設(shè)計(jì)更加簡(jiǎn)潔，層次更加清晰，更加易于維護(hù)。

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

3.1渲染流程升級(jí)：渲染隊(duì)列 未來可支持自動(dòng)批量渲染

根據(jù)最新的渲染框架，Cocos2d-JS v3.1對(duì)流程設(shè)計(jì)也進(jìn)行了優(yōu)化升級(jí)(新舊流程圖對(duì)比如下)。

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

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

新渲染流程主要有以下優(yōu)勢(shì)：

➢ 引入渲染對(duì)象與全局坐標(biāo)計(jì)算——只有需要繪制的對(duì)象才加入隊(duì)列中，采用整體渲染過程更加高效，避免了多余的上下文保存恢復(fù)與坐標(biāo)計(jì)算等操作

➢ 避免重復(fù)調(diào)用遍歷函數(shù)——在沒有進(jìn)行節(jié)點(diǎn)添加、節(jié)點(diǎn)刪除時(shí)，避免調(diào)用遍歷函數(shù)等不必要的循環(huán)與查詢

➢ 方便進(jìn)行不同渲染模式切換——游戲元素管理與渲染處理層次更加清晰，職責(zé)更加分明，方便進(jìn)行Canvas與WebGL渲染模式切換

在新的渲染設(shè)計(jì)中，增加了一個(gè)渲染命令對(duì)象，將代替原來的渲染函數(shù)進(jìn)行繪圖。新的渲染命令可將各個(gè)渲染對(duì)象加入到渲染隊(duì)列，進(jìn)行統(tǒng)一管理，并提供全局世界坐標(biāo)。

渲染隊(duì)列只在子節(jié)點(diǎn)變化時(shí)才需要更新隊(duì)列，使得執(zhí)行更加高效，并節(jié)省重復(fù)計(jì)算資源，提升渲染性能。渲染隊(duì)列的管理方式可幫助優(yōu)化渲染算法與碰撞檢測(cè)(如紋理自動(dòng)批量渲染合并等)，可方便地進(jìn)行瓦片地圖(TileMap)算法改進(jìn)，提升使用大地圖時(shí)的性能表現(xiàn)，未來也可加入單獨(dú)的渲染線程。

此外，新圖像渲染設(shè)計(jì)還可支持WebGL模式的自動(dòng)批量渲染，為圖形渲染提速奠定了堅(jiān)實(shí)基礎(chǔ)。開發(fā)中可避免頻繁的渲染節(jié)點(diǎn)添加、刪除動(dòng)作，通過重用已有節(jié)點(diǎn)來進(jìn)一步提升性能?？芍赜玫膶?duì)象在不用的時(shí)候可以設(shè)置隱藏，加入緩存池，等待重用。

通過更加智能、高效渲染模式，Cocos2d-JS v3.1新圖像渲染設(shè)計(jì)將最大化地降低CPU開銷，幫助節(jié)省渲染環(huán)節(jié)中的CPU消耗。Cocos2d-JS將繼續(xù)支持更多的精品HTML5游戲高性能地運(yùn)行在移動(dòng)瀏覽器上，致力打造Web平臺(tái)最高性能與最多特性的2d游戲引擎。

目前，Cocos2d-JS圖像渲染代碼已合并至https://github.com/cocos2d/cocos2d-html5/tree/Renderer ，歡迎各位開發(fā)者下載測(cè)試，圖形渲染的改進(jìn)將在v3.1版本默認(rèn)集成。

同時(shí)，也歡迎各位開發(fā)者來測(cè)試基于新圖形渲染實(shí)現(xiàn)的MoonWarriors打飛機(jī)游戲，訪問地址：http://cocos.b0.upaiyun.com/，或掃描下方二維碼快速進(jìn)入游戲。