摘要：據(jù)不完全統(tǒng)計(jì)，這五年中，白鷺引擎累計(jì)運(yùn)轉(zhuǎn)的游戲和微信小游戲的流水?dāng)?shù)據(jù)約為億。

我們的引擎架構(gòu)師做某一沙龍活動(dòng)的演講速記，純純的干貨，分享給大家。

王澤：各位開發(fā)者下午好！我叫王澤，是白鷺引擎的首席架構(gòu)師。

今天給大家分享的題目是《重度H5游戲性能優(yōu)化技巧》。之所以決定用這個(gè)題目，是因?yàn)槲易罱鼛字茉趶V深一帶拜訪了很多使用白鷺引擎的開發(fā)者，發(fā)現(xiàn)特別是在廣州一帶，大部分開發(fā)者都在做重度H5游戲。在幾周的拜訪過程中，我協(xié)助許多廣州的游戲開發(fā)團(tuán)隊(duì)進(jìn)行游戲性能優(yōu)化，并在在這個(gè)過程中發(fā)現(xiàn)很多開發(fā)者遇到的問題是非常相似的，于是我借這次開發(fā)者沙龍的機(jī)會(huì)，把這些優(yōu)化技巧整理出來與廣大開發(fā)者分享。

這些技巧都是我在實(shí)際項(xiàng)目中得到驗(yàn)證過的優(yōu)化技巧，并且都是投入產(chǎn)出比很高的優(yōu)化項(xiàng)，建議做重度H5游戲的開發(fā)者重點(diǎn)針對(duì)您們的游戲進(jìn)行這些優(yōu)化。

在開講之前，我首先為大家回顧一下白鷺引擎的歷史上幾個(gè)比較重要的版本。2014年3月白鷺引擎發(fā)布了0.9版本，并產(chǎn)生了《圍住神經(jīng)貓》這一爆款。緊接著一鼓作氣發(fā)布了1.0版本引入了完整的GUI，這使得開發(fā)者可以開始做具備大量復(fù)雜 UI界面的游戲，《愚公移山》就是這樣的一款產(chǎn)品，他成功的在 2014年底就取得了每月180萬流水的成績(jī)。

接著在 2014年11月發(fā)布了 2.0版本，重點(diǎn)包含了白鷺引擎的工作流工具集，特別是 UI 編輯器與動(dòng)畫編輯器，這對(duì)游戲開發(fā)效率帶來了重大提升，因此在 2014年底，使用了白鷺引擎 2.0 版本的《傳奇世界H5》 成為了第一款月流水超過千萬的 H5 游戲。2016年1月，白鷺發(fā)布了3.0版本，這個(gè)版本引入了 WebGL 渲染器，大幅提升了游戲渲染效率，這個(gè)版本得到了開發(fā)者的普遍歡迎，《決戰(zhàn)沙城》更是用這個(gè)版本實(shí)現(xiàn)了 H5 游戲月流水三千萬的成績(jī)。

2016年底，白鷺引擎自研了一款名為《莽荒紀(jì)》的產(chǎn)品，并同步推出白鷺引擎4.0版本。這款游戲使用了大量的骨骼動(dòng)畫，對(duì)動(dòng)畫渲染性能和資源加載效率的要求非常高，得益于4.0版本針對(duì)這兩點(diǎn)的優(yōu)化，這款產(chǎn)品在絕大部分設(shè)備包括千元機(jī)上都有非常好的表現(xiàn)。2017年5月份，白鷺引擎發(fā)布了 5.0版本，市場(chǎng)上也出現(xiàn)了第一款月流水過億的H5游戲——《傳奇來了》。

緊接著，在微信發(fā)布小游戲后，第一時(shí)間發(fā)布了引擎5.1版本正式支持微信小游戲，《海盜來了》通過白鷺引擎的底層支持，僅用3天便將游戲從H5版本發(fā)布到微信小游戲平臺(tái)，成為首款月流水過億的微信小游戲。

回顧白鷺引擎的歷史，我們就會(huì)發(fā)現(xiàn)，隨著軟硬件的不斷升級(jí)以及白鷺引擎每個(gè)版本迭代的持續(xù)努力，不斷的刷新著 H5游戲行業(yè)的新高度。但我們并未躺在過去的功勞簿上，仍然在持續(xù)高效率的進(jìn)行版本迭代。

白鷺引擎目前按照雙周迭代的節(jié)奏，同時(shí)發(fā)布5.2穩(wěn)定版與5.3特性版本，如果開發(fā)者想要開發(fā)商業(yè)化游戲，可用5.2穩(wěn)定版本來做；如果你想使用一些新的特性，比如說3D以及一些2D的高級(jí)優(yōu)化技巧，就可以使用白鷺引擎最新的5.3版本來做。

白鷺引擎目前在H5游戲的市場(chǎng)占有率達(dá)到了70%。統(tǒng)計(jì)方法是：取樣愛微游、瘋狂游樂場(chǎng)以及QQ空間三個(gè)業(yè)內(nèi)公認(rèn)的頭部渠道的Top30的游戲，逐一去看這些游戲采用了哪些游戲引擎。

除了H5游戲之外，白鷺引擎在微信小游戲上的市場(chǎng)占有率53%。這里有兩種統(tǒng)計(jì)方法：第一種統(tǒng)計(jì)方法是把所有能統(tǒng)計(jì)到的微信小游戲都統(tǒng)計(jì)起來，一個(gè)一個(gè)抓包看是什么引擎做的。

通過這種方式，統(tǒng)計(jì)到的白鷺引擎的市場(chǎng)占有率高達(dá)80%，但是我認(rèn)為這是有失偏頗的數(shù)據(jù)，因?yàn)槟芙y(tǒng)計(jì)到的小游戲有很大一部分是因?yàn)榕c白鷺官方人士有微信好友關(guān)系，而這部分好友幾乎都在使用白鷺引擎開發(fā)微信小游戲，所以我認(rèn)為這種統(tǒng)計(jì)方式是并不準(zhǔn)確的。于是我們采用了另一種更為公平的統(tǒng)計(jì)方法，通過相對(duì)權(quán)威的阿拉丁統(tǒng)計(jì)數(shù)據(jù)，把阿拉丁榜單的Top50拉出來，得出白鷺引擎市場(chǎng)占有率為53%。

據(jù)不完全統(tǒng)計(jì)，這五年中，白鷺引擎累計(jì)運(yùn)轉(zhuǎn)的H5游戲和微信小游戲的流水?dāng)?shù)據(jù)約為200億。非常感謝大家對(duì)白鷺引擎的支持。今天能有這個(gè)成績(jī)并不是完全是依靠白鷺自己做的，引擎技術(shù)并不能解決所有的問題，最大的外因是依靠各位一起努力的結(jié)果，特別是各位游戲開發(fā)者，瀏覽器底層技術(shù)提供方、渠道方、以及很多支持伙伴的幫助。

除了外因的幫助之外，白鷺自身也幫助開發(fā)者做了很多事情，我個(gè)人是Flash頁游研發(fā)出身，白鷺引擎團(tuán)隊(duì)的大部分研發(fā)也都是游戲行業(yè)出身，所以白鷺的研發(fā)團(tuán)隊(duì)更了解也被稱為“手機(jī)頁游”的H5游戲開發(fā)者的痛點(diǎn)需求，并且這五年為各地的H5游戲開發(fā)者提供了總計(jì)1400天的駐場(chǎng)支持，飛到各個(gè)城市，包括廣州、深圳、上海、廈門、福州、成都、武漢、南京、西安，當(dāng)然還有北京。我平均基本上有三分之一的時(shí)間是不在公司里的，都在為各地的開發(fā)者解決各種各樣的問題。通過這些比較務(wù)實(shí)、接地氣的方式，保證白鷺引擎可以運(yùn)行在盡可能多的設(shè)備上，并提升在低端機(jī)上的游戲體驗(yàn)。

今天廣州開發(fā)者沙龍的主題是“怎樣做一款賺錢的小游戲”。我認(rèn)為解決技術(shù)上的短板決定了游戲是否能賺錢的下限。針對(duì)游戲運(yùn)營(yíng)的幾個(gè)關(guān)鍵數(shù)據(jù)，游戲的運(yùn)行性能主要影響玩家的在線時(shí)長(zhǎng)，游戲加載性能主要影響玩家的前期留存。我今天重點(diǎn)介紹如何提升游戲的運(yùn)行性能。

我見過的大部分尋求技術(shù)幫助的 CP 都會(huì)提及游戲性能需要提升。但是我認(rèn)為性能糟糕是一個(gè)技術(shù)術(shù)語，它在產(chǎn)品上一般有如下四種體現(xiàn)方式：
1、幀頻很低。
2、設(shè)備發(fā)熱。
3、不定期卡頓。
雖然看起來這些問題都是性能問題，但是產(chǎn)生這些問題背后的原因則是完全不一樣的。

在解決問題之前，需要將這些問題首先輸出一個(gè)可量化的數(shù)據(jù)指標(biāo)。

幀頻很低可以被量化為：在特定設(shè)備上的幀頻是XX幀，其中 JavaScript 邏輯開銷 XX毫秒，渲染開銷YY毫秒，這些數(shù)據(jù)在白鷺引擎的性能面板中都有體現(xiàn)。

設(shè)備發(fā)熱看似是很難量化的，并不是所有操作系統(tǒng)都提供了設(shè)備溫度的 API。因此我們向開發(fā)者推薦另一種方法作為量化方式，首先將設(shè)備充滿電，然后統(tǒng)計(jì)游戲在 XX分鐘后的剩余電量。由于耗電量和發(fā)熱基本成正比，所以解決耗電問題，發(fā)熱問題就也能同步得到解決。

至于不定期卡頓。一定要記錄卡頓是否存在規(guī)律。比如是播放動(dòng)畫的瞬間？打開UI面板的瞬間？或者是毫無規(guī)律？

上述問題量化之后，接下來再來逐一地嘗試解決這些問題。

幀頻低和發(fā)熱主要有如下四個(gè)原因：
1、渲染內(nèi)容過多。
2、渲染方式不當(dāng)。
3、計(jì)算開銷過大。
4、 大量創(chuàng)建對(duì)象。

這四點(diǎn)又分屬兩個(gè)類別，分別是 JavaScript邏輯開銷和引擎渲染開銷。關(guān)于渲染內(nèi)容和渲染方式不當(dāng)最終是可以在引擎渲染層這個(gè)環(huán)節(jié)想辦法解決的。而計(jì)算開銷過大和大量創(chuàng)建對(duì)象都是在用戶邏輯的JavaScript層去解決的。這兩塊的解決方式是完全不一樣的，對(duì)渲染來說，你需要去嘗試?yán)斫釽ebGL底層的渲染原理是什么，而對(duì)于JavaScript，你需要了解JavaScript底層的一些原理。

首先聊聊引擎渲染層面的東西：
1、渲染內(nèi)容過多。在屏幕之外的內(nèi)容，可以設(shè)置隱藏，不要執(zhí)行渲染。這就提到一個(gè)很有意思的問題了，看似很簡(jiǎn)單優(yōu)化方法為什么不在白鷺引擎內(nèi)部實(shí)現(xiàn)呢？其實(shí)這涉及到白鷺引擎的一個(gè)核心設(shè)計(jì)理念：不要替開發(fā)者去做“自作聰明”的優(yōu)化。這樣才能保證優(yōu)秀開發(fā)者做出更好的游戲。除了屏幕外的內(nèi)容不進(jìn)行渲染之外，游戲普遍有很多UI彈窗，當(dāng)你打開彈窗的時(shí)候，強(qiáng)烈建議你把游戲背景隱藏，這同樣可以節(jié)省大量的渲染開銷。

2、渲染方式不當(dāng)。來看看底層原理：

白鷺引擎2D是如何渲染游戲的多張紋理的？ 在白鷺引擎里，2D是一次性提交所有的數(shù)據(jù)，然后設(shè)置渲染模式，執(zhí)行渲染批次，再設(shè)計(jì)渲染模式，再執(zhí)行渲染批次。如果你能保證渲染模式這個(gè)東西是沒有發(fā)生變化的，就可以一次盡可能多地渲染，在這種情況下就可以做一次的渲染批次，這個(gè)優(yōu)化聽起來很簡(jiǎn)單，我說說在實(shí)際游戲里的典型案例。

這張圖是我昨晚自己畫的示例圖。做游戲時(shí)經(jīng)常會(huì)遇到這樣的場(chǎng)景，就是有很多人、很多怪，每個(gè)人都包含了影子、模型動(dòng)畫、血條三個(gè)部分。最簡(jiǎn)單的渲染方式是，將一個(gè)人設(shè)置成一個(gè) DisplayObjectContainer，這個(gè)對(duì)象有三個(gè)子對(duì)象：一個(gè)人、一個(gè)影子和一個(gè)血條，這樣每個(gè)人的渲染次數(shù)就是3，進(jìn)而8個(gè)人的渲染次數(shù)就是24。優(yōu)化后是10，如何做這個(gè)優(yōu)化？方法非常簡(jiǎn)單，就是你把所有的影子放在一個(gè)Container上，把人放在一個(gè)Container上，再把血條放在一個(gè)Container上。

由于所有影子的紋理都是一樣的，所以引擎底層會(huì)自動(dòng)開啟批次合并，渲染次數(shù)是是1，然后渲染8個(gè)人，這8個(gè)人的紋理一般都是不一樣的，所以就是8，上面就是血條的紋理也是一樣的所以也是1。把這三者加起來，最終的優(yōu)化結(jié)果就是從 24降低到10。

第二個(gè)示例。這是大家做的重度游戲的典型UI，DrawCall是30，這種游戲可以做很多優(yōu)化，就是把所有的圖片、文字合成一張紋理集。這個(gè)全做完之后，渲染批次就從30變成2，之所以不是1而是2，是因?yàn)橛疑辖堑膌v888肯定是個(gè)動(dòng)態(tài)文本，無法參與批次合并。

所以這就是一個(gè)簡(jiǎn)單的例子，希望大家以后做UI 時(shí)可以嘗試著去把所有的動(dòng)態(tài)文本都盡可能放在最上層，把圖片都放在下層，并將這些圖片合并成紋理集。特別是在游戲的 ListItemRenderer 之中，一般游戲中的一個(gè) List 至少會(huì)顯示 5個(gè) ListItemRenderer，如果你能將 ItemRenderer的DrawCall降低5，那整體的 DrawCall就能降低 25，所以針對(duì)ListItemRenderer的優(yōu)化是投入產(chǎn)出比非常高的，強(qiáng)烈推薦各位開發(fā)者重點(diǎn)優(yōu)化這里。

3、計(jì)算開銷過大。對(duì)骨骼動(dòng)畫使用緩存，優(yōu)化骨骼開銷；避免大量的數(shù)學(xué)計(jì)算與浮點(diǎn)數(shù)計(jì)算；邏輯幀與渲染幀分離。這個(gè)提升是比較明顯的，因?yàn)楹芏嘤螒蚨际亲?0幀的，但是現(xiàn)在有些是60幀，所以要作一些邏輯幀和渲染幀的分離，邏輯上可以是15幀，然后渲染上做60幀，那么邏輯的開銷就可以少很多。

4、還有一個(gè)是非常重要的大家可能不太注意的，就是大量創(chuàng)建對(duì)象。JavaScript虛擬機(jī)有一個(gè)特點(diǎn)，就是對(duì)象創(chuàng)建的開銷遠(yuǎn)遠(yuǎn)大于對(duì)象計(jì)算的開銷，并且對(duì)象創(chuàng)建會(huì)導(dǎo)致垃圾回收，而垃圾回收會(huì)導(dǎo)致游戲不定期卡頓，所以有一個(gè)很重要的原則就是不要在你的主循環(huán)里創(chuàng)建任何對(duì)象，強(qiáng)烈建議游戲中的人物、怪物、技能特效統(tǒng)統(tǒng)做成對(duì)象池，這樣可以大幅降低游戲的不定期卡頓現(xiàn)象的出現(xiàn)。分享一個(gè)常用的測(cè)試函數(shù)。

來看這個(gè)函數(shù)的原理。它就是顯示了每一秒鐘去拿一個(gè)hashCount跟上一個(gè)hashCount作對(duì)比，這個(gè)hashCount是由白鷺引擎內(nèi)部 API，用于統(tǒng)計(jì)引擎對(duì)象的創(chuàng)建數(shù)量。如果你的游戲靜止放置不動(dòng)，那么理論上hashCount diff的結(jié)果應(yīng)該是0，實(shí)際上要盡可能控制在120以下，我給大家分享一個(gè)數(shù)據(jù)，我見過的最賺錢的那一批游戲的 hashCount diff 都控制在120以下的。

如果這個(gè)數(shù)字超標(biāo)，應(yīng)該如何去解決呢？只需要在引擎的 HashObject 的構(gòu)造函數(shù)這里添加一個(gè)斷點(diǎn)，在運(yùn)行時(shí)去檢查調(diào)用堆棧就可以了。

我協(xié)助優(yōu)化過一款產(chǎn)品，它的hashCount diff數(shù)字高達(dá)4000，每秒創(chuàng)建4000個(gè)對(duì)象，我調(diào)試他的代碼后發(fā)現(xiàn)，其實(shí)只是一個(gè)很小的問題導(dǎo)致了這個(gè)結(jié)果，花了15分鐘修復(fù)之后，游戲的發(fā)熱、卡頓等問題都得到了大幅的緩解。

接下來我跟大家介紹一下白鷺的3D引擎的核心功能，以及內(nèi)部?jī)?yōu)化技巧，也給大家做重度游戲時(shí)以一些啟發(fā)。

Egret3D內(nèi)部的所有資源都采用了GLTF文件格式。這是一種對(duì)OpenGL ES、WebGL非常友好的3D內(nèi)容格式標(biāo)準(zhǔn)。面向?qū)崟r(shí)渲染，盡量提供可直接傳輸給圖形API的數(shù)據(jù)格式，而不再需要反序列化。

剛剛我提到了盡量提供可直接傳輸給圖形API的數(shù)據(jù)格式，在 Egret3D內(nèi)測(cè)版本中，在3D引擎加載一個(gè)模型文件，需要首先加載了模型文件，然后解析模型文件，這就像配置文件一樣。第三步要生成WebGL所需要的數(shù)據(jù)格式，最后把它提交到GPU。而在正式版本的流程變成了加載新的 GLTF文件，進(jìn)而由于GLTF的文件格式和GPU想要的文件格式是幾乎一樣的，所以不需要解析也不需要生成，直接把它作一個(gè)簡(jiǎn)單的ArraryBuffer切割，然后提交到 GPU就可以了。

通過這個(gè)優(yōu)化達(dá)到什么樣的效果？模型解析速度提升170%，內(nèi)存占用降低1倍，加載速度提升30%，所有這些優(yōu)化的底層的本質(zhì)原因是由于底層采用了GLTF的模型文件的標(biāo)準(zhǔn)范式。這就相當(dāng)于是白鷺引擎3D版本的比較常見的引擎優(yōu)化。

《泡泡學(xué)園OL》是白鷺自研團(tuán)隊(duì)打造的一款標(biāo)桿品質(zhì)的3D微信小游戲。在這款游戲制作過程中，不斷挑戰(zhàn) Egret3D 與微信小游戲的性能極限極限，具體技術(shù)指標(biāo)包括： 100,000 Vertex ， Lightmap貼圖、GPU骨骼動(dòng)畫，GPU粒子動(dòng)畫，碰撞引擎，幀同步網(wǎng)絡(luò)通訊，基于行為樹的AI 等。
這款游戲前期開發(fā)過程中使用了 Unity3D 編輯場(chǎng)景，然后通過白鷺引擎的 Unity3D導(dǎo)出插件發(fā)布到 Egret3D 中。目前已經(jīng)使用白鷺引擎正在研發(fā)的 3D 編輯器進(jìn)行后續(xù)開發(fā)和維護(hù)。

目前白鷺科技已經(jīng)發(fā)布了 Egret3D的1.1版本，即將在9月底發(fā)布1.2版本，這個(gè)版本重點(diǎn)針對(duì)開發(fā)者的開發(fā)效率進(jìn)行優(yōu)化，首先是推出一款可視化的調(diào)試工具 Egret Inspector 3D ，其次就是將3D編輯器提供給更多開發(fā)者進(jìn)行試用并收集反饋，如果您已經(jīng)使用 Egret3D 立項(xiàng)并進(jìn)入項(xiàng)目開發(fā)階段，可以優(yōu)先試用3D編輯器。

以上就是我為大家分享的全部?jī)?nèi)容。謝謝大家！