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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2、渲染方式不當。來看看底層原理：

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

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

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

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

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

3、計算開銷過大。對骨骼動畫使用緩存，優(yōu)化骨骼開銷；避免大量的數(shù)學計算與浮點數(shù)計算；邏輯幀與渲染幀分離。這個提升是比較明顯的，因為很多游戲都是做30幀的，但是現(xiàn)在有些是60幀，所以要作一些邏輯幀和渲染幀的分離，邏輯上可以是15幀，然后渲染上做60幀，那么邏輯的開銷就可以少很多。

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

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

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

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

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

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

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

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

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

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

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