性能翻倍？！Cocos Creator 3.3 的小游戲升級(jí)優(yōu)化之路

Cocos 官方 Demo Team 成立以來(lái)，已經(jīng)發(fā)布了《奔跑吧巨人》和《奔跑吧小仙女》兩款 3D 小游戲。接下來(lái)，Demo Team 也將持續(xù)輸出各品類(lèi) 3D 游戲，并提供含工程源碼、美術(shù)資源、策劃文檔的完整開(kāi)源項(xiàng)目，同時(shí)邀請(qǐng)各路大神制作配套文字/視頻教程，敬請(qǐng)關(guān)注！

在《奔跑吧小仙女》發(fā)布后，有用戶(hù)反饋：“為什么 Demo 在微信小游戲平臺(tái)上，性能評(píng)測(cè)分?jǐn)?shù)總是不夠理想呢？”這是因?yàn)椤侗寂馨尚∠膳肥腔?Cocos Creator 3.0 開(kāi)發(fā)的，而在剛邁入 v3.0 時(shí)代時(shí)，發(fā)布到小游戲平臺(tái)的性能確實(shí)不怎么好。微信后臺(tái)的性能評(píng)測(cè)中，“啟動(dòng)性能”的分?jǐn)?shù)尤其刺眼：

性能是小游戲的重中之重，v3.0 發(fā)布后的這大半年，引擎也在持續(xù)和性能“死磕”。Cocos Creator 3.3 認(rèn)真對(duì)引擎性能做了一波優(yōu)化，特別是在小游戲平臺(tái)。拿升級(jí)到 v3.3 的《奔跑吧小仙女》跑跑看：

對(duì)比 v3.0 版本的數(shù)據(jù)，《奔跑吧小仙女》升級(jí)后，微信平臺(tái)的啟動(dòng)性能分?jǐn)?shù)近乎翻倍，運(yùn)行性能分?jǐn)?shù)提升了50%，各項(xiàng)指標(biāo)均達(dá)到令人滿(mǎn)意的程度。可以看出，Cocos Creator 3.3 在小游戲的啟動(dòng)性能、運(yùn)行性能都有了一個(gè)顯著的提升。

除此之外，我們還對(duì)游戲做了其他優(yōu)化，在此也給出一些小游戲優(yōu)化上的流程和建議，供大家參考：

包體的大小直接影響游戲加載的時(shí)間，例如小游戲的首屏啟動(dòng)時(shí)間等；而微信平臺(tái)對(duì)主包體的 4M 限制，也使得包體大小顯得非常關(guān)鍵。

引擎的功能裁切大家應(yīng)該都不陌生，在這里我們可以去掉項(xiàng)目不需要的模塊，有效減少包體大小。而到了 3D 時(shí)代，[物理系統(tǒng)]也和之前有些區(qū)別，此時(shí)可以根據(jù)項(xiàng)目需求選擇合適的物理引擎進(jìn)行開(kāi)發(fā)。

在小游戲平臺(tái)中，模型使用512x512尺寸的貼圖即可滿(mǎn)足基本需求。若游戲里使用了大量的資源圖片，也可以使用 tinyPNG、pngquant 等第三方平臺(tái)進(jìn)行無(wú)損壓縮處理，適合自己的項(xiàng)目就好。

update(){
    const num = 5;  //間隔num幀執(zhí)行一次方法
    //director.getTotalFrames() 用于獲取 director 啟動(dòng)以來(lái)游戲運(yùn)行的總幀數(shù)
    if (director.getTotalFrames() % num === 0) {
        //執(zhí)行相應(yīng)操作 A
    }
    if (director.getTotalFrames() % num === 2) {
        //執(zhí)行相應(yīng)操作 B
    }
}

如何通過(guò)工具查看性能問(wèn)題？這邊以 Chrome 為例，打開(kāi)開(kāi)發(fā)者模式 -> Performance，介紹一下它的界面和使用說(shuō)明。

首先點(diǎn)擊錄制按鈕，錄制一段性能視頻。若出現(xiàn)卡頓，則等待幾秒直至界面不卡頓再開(kāi)始正常玩游戲，一般錄制10-30秒即可。

錄制結(jié)束后，查看時(shí)間軸上的 CPU（綠色區(qū)域），若幀數(shù)波動(dòng)的部分有紅色提示，則代表此處出現(xiàn)卡頓問(wèn)題，需要優(yōu)先解決。

若幀數(shù)波動(dòng)的部分沒(méi)有紅色提示，可以分析并處理幀數(shù)不穩(wěn)的問(wèn)題，如下圖中紅色下劃線標(biāo)出的部分。

那么，怎么查看具體是什么問(wèn)題呢？選中并點(diǎn)擊一個(gè)幀數(shù)波動(dòng)較大的區(qū)域，如下圖中的2號(hào)框，下方將顯示具體執(zhí)行了哪些代碼。再選擇 Call Tree -> Total Time，按耗時(shí)降序排列，打開(kāi)耗時(shí)較多的部分查看具體原因，參考上述性能優(yōu)化方案做具體優(yōu)化。

提前透露一下，Demo Team 的下一款游戲也已經(jīng)在路上了，聽(tīng)說(shuō)是個(gè)帶有類(lèi) Roguelike 元素的闖關(guān)游戲。希望這些完整游戲源碼能給廣大 3D 項(xiàng)目開(kāi)發(fā)者一些幫助與靈感。

???? 你最想看到哪種類(lèi)型的官方 Demo 制作上架？歡迎在評(píng)論區(qū)留言討論。9月9日中午12點(diǎn)，我們將從評(píng)論區(qū)隨機(jī)抽選3位用戶(hù)，送出 Cocos 周邊盲盒禮包1份！

往期精彩