【51CTO.com原創(chuàng)稿件】隨著國(guó)內(nèi)的引擎開發(fā)技術(shù)的進(jìn)步，2D游戲技術(shù)已經(jīng)成為市場(chǎng)主流，并正式拉開了3D游戲的序幕。白鷺時(shí)代CEO陳書藝表示，白鷺時(shí)代自2014年成立起，就致力于提升HTML5游戲性能，增強(qiáng)游戲的體驗(yàn)。但HTML5游戲如果沒有統(tǒng)一的技術(shù)標(biāo)準(zhǔn)就開始做內(nèi)容創(chuàng)作很難成功，所以開發(fā)引擎是必然。白鷺引擎從1.0到4.0，一路走來，為HTML5游戲開發(fā)所面臨的開發(fā)效率、運(yùn)行性能和資源加載量等難點(diǎn)做了很多貢獻(xiàn)。

[[185594]]

難點(diǎn)一、 如何提升開發(fā)效率快速上線

對(duì)于開發(fā)商來說游戲開發(fā)效率是最重要的一個(gè)環(huán)節(jié)，有時(shí)候游戲晚推出一個(gè)月就會(huì)錯(cuò)過最好的窗口期，而快速上線能夠留給自己更多的時(shí)間調(diào)整游戲。為提升開發(fā)效率，白鷺引擎API選擇Canvas、開發(fā)語言選擇Typescript。

為什么采用Canvas？游戲發(fā)展需要非常豐富細(xì)膩的動(dòng)畫效果，DOM完全做不了這是白鷺引擎選擇Canvas的原因所在。Canvas是HTML5新API，還可以實(shí)現(xiàn)更多的復(fù)雜交互的效果。

為什么放棄Dart、AS3、JavaScript，最終選擇了TypeScript（后續(xù)簡(jiǎn)稱TS）作為白鷺引擎的開發(fā)語言呢？TS是一個(gè)嚴(yán)格意義上JavaScript超集，而且它的語言設(shè)計(jì)非常符合JavaScrip的最新標(biāo)準(zhǔn)ES6。據(jù)白鷺引擎架構(gòu)師王澤介紹說：TS本身具有開源屬性，這意味著開發(fā)者可以自有更改其源代碼，同時(shí)，TS的架構(gòu)設(shè)計(jì)非常優(yōu)秀，為開發(fā)者的進(jìn)一步擴(kuò)展提供了充分的API接口，比如實(shí)現(xiàn)編譯器、自定義語法檢查以及自定義輸出結(jié)構(gòu)等。

不采用Dart、AS3、JavaScript作為開發(fā)語言原因如下：

1.    首先，Dart 的形式針對(duì)很多會(huì)使用 JS 或 AS3 的開發(fā)者而言（尤其是初學(xué)者這個(gè)最大的群體），學(xué)習(xí)的成本曲線較陡，而谷歌又是一個(gè)在技術(shù)上“太過”創(chuàng)新的公司，跟隨一個(gè)有可能“朝令夕改”的技術(shù)去制作一款產(chǎn)品，而且將整個(gè)白鷺的工具和服務(wù)的體系都懸于它之上，有一定的風(fēng)險(xiǎn)。

2.    AS3 首先是一個(gè)封閉的語言，而且 Flash 團(tuán)隊(duì)已經(jīng)放棄 AS3 到 AS4，AVM2 到 AVM3 的項(xiàng)目，所以用不了全新的 ES6 新特性，雖然很遺憾，但是最終還是沒有選擇 AS3。

3.    JavaScript是弱類型，會(huì)導(dǎo)致開發(fā)游戲效率低下，維護(hù)起來更加困難，代碼越寫越亂、越寫越多。

選擇TS還有兩個(gè)原因，如下：

其一，2014年初，中國(guó)擁有近30萬的Flash開發(fā)者，其中90%是游戲相關(guān)，這是一個(gè)寶貴的開發(fā)者社區(qū)群體，他們對(duì)于Web頁游的開發(fā)和理解遠(yuǎn)遠(yuǎn)超過了任何使用其他web前端技術(shù)做網(wǎng)頁游戲的群體。白鷺使用TS，一方面是為了讓JS游戲開發(fā)人員更舒服些，另一方面是想積極爭(zhēng)取Flash AS3的開發(fā)群體。

API設(shè)計(jì)上白鷺引擎與Flash AS3對(duì)比圖

其二：白鷺引擎基于Canvas用TS來封裝Flash ActionScript3.0對(duì)游戲有幫助的部分API結(jié)構(gòu)設(shè)計(jì)。上圖，是API設(shè)計(jì)上白鷺引擎與Flash AS3的對(duì)比，可看出兩者設(shè)計(jì)幾乎一致，這便于AS3開發(fā)者可以直接上手，進(jìn)而保證HTML5游戲的開發(fā)效率。

一站式 HTML5 游戲開發(fā)工作流

如上圖，除了以上兩點(diǎn)外，白鷺時(shí)代為了進(jìn)一步提升開發(fā)者的開發(fā)效率推出了一系列輔助工具，最終打造出了全球首個(gè)HTML5完整工作流。從代碼開發(fā)、UI搭建、資源管理、粒子特效等方面提供一站式 HTML5 游戲開發(fā)工作流，大幅度提升 HTML5 游戲開發(fā)效率。

難點(diǎn)二：游戲性能方面如何讓CP滿意

游戲性能一直是CP關(guān)注的重點(diǎn)，這部分白鷺引擎引用WebGL技術(shù)的同時(shí)還自主研發(fā)了臟矩形技術(shù)。

如上圖，臟矩形渲染是一種基于顯示列表的局部刷新方法。依然是要有一個(gè)時(shí)鐘頻率，定時(shí)每秒執(zhí)行60次。但區(qū)別是每次我們并不直接清空整個(gè)屏幕，而是首先計(jì)算屏幕上發(fā)生改變的區(qū)域，這里我們叫做重繪區(qū)，然后只清空指定的重繪區(qū)，并找出跟這個(gè)區(qū)域相交的所有顯示對(duì)象重繪一遍。如果顯示列表本次并沒有發(fā)生改變，那么將直接跳過本次繪制，什么也不做沒有使用臟矩形只有24幀，使用了臟矩形后能夠達(dá)到60幀滿運(yùn)行。

如上圖，WebGL技術(shù)助力游戲性能實(shí)現(xiàn)巨大提升。早在2014年的時(shí)候白鷺時(shí)代就打算支持WebGL，但是當(dāng)時(shí)通過webglstats.com的數(shù)據(jù)統(tǒng)計(jì)發(fā)現(xiàn)當(dāng)時(shí)的WebGL支持率只有40%不到，所以當(dāng)時(shí)只能先從Canvas做起。但是我們看到截止2016年底，WebGL的支持率已經(jīng)達(dá)到了90%以上。而且得益于微信 X5 瀏覽服務(wù)，在國(guó)內(nèi)支持率基本達(dá)到100%。值得高興的是，這時(shí)候采用白鷺引擎WebGL技術(shù)的 《決戰(zhàn)沙城 H5》獲得了超1000w月流水的好成績(jī)。

如上圖，除了上述兩個(gè)技術(shù)以外， 白鷺引擎還提供名為Egret Runtimes的解決方案來提高HTML5游戲的運(yùn)行效率，在提升 HTML5 游戲運(yùn)行性能的同時(shí)還可移動(dòng)設(shè)備兼容性問題。

Egret Runtime是一個(gè)加速器組件。可實(shí)現(xiàn)游戲運(yùn)行加速，渠道接入加速。還可作為擴(kuò)展模塊無縫嵌入到移動(dòng)設(shè)備上的瀏覽器或其它應(yīng)用中。 游戲開發(fā)者能夠忽略不同操作系統(tǒng)、不同瀏覽器、和不同終端的差異，讓HTML5游戲以接近原生的表現(xiàn)在用戶手機(jī)終端中高效運(yùn)行；渠道接入商可以簡(jiǎn)化繁瑣游戲接入流程，實(shí)現(xiàn)一次 Egret Runtime 接入，HTML5 游戲隨時(shí)上架的高效游戲接入。

難點(diǎn)三：資源加載量問題

基于中國(guó)現(xiàn)有網(wǎng)絡(luò)條件下還要考慮游戲資源的加載速度。如上圖，根據(jù)中國(guó)移動(dòng)用戶數(shù)據(jù)，2014年2月4G用戶數(shù)不到1000w，用戶手機(jī)網(wǎng)絡(luò)條件太差。針對(duì)這一現(xiàn)象，白鷺引擎內(nèi)置文理集支持的同時(shí)引入了全新的資源管理框架。

白鷺引擎內(nèi)置了紋理集的支持，而且提供了配套的工具Texture Merger。在2014年的網(wǎng)絡(luò)環(huán)境下每減少1kb的資源體積就意味著用戶流失率的一點(diǎn)點(diǎn)降低。紋理集聽上去名稱高大上，實(shí)則概念非常簡(jiǎn)單。紋理集實(shí)際上就是將一些零碎的小圖放到一張大圖當(dāng)中。游戲中也經(jīng)常使用到紋理集。使用紋理集的好處很多，我們通過將大量的圖片拼合為一張圖片從而減少網(wǎng)絡(luò)請(qǐng)求，原先加載數(shù)次的圖片資源現(xiàn)在加載一次即可。 同時(shí)，在引擎渲染的時(shí)候也會(huì)較少IO讀取，從而提高性能。紋理集甚至能減少一半的資源體積。

近期發(fā)布的白鷺引擎 4.0 引入全新的資源管理框架，包含版本控制與熱更新功能，允許針對(duì)不同平臺(tái)發(fā)布資源，加載體積減少30%。

白鷺引擎的現(xiàn)狀及未來挑戰(zhàn)

白鷺最新發(fā)布的引擎4.0版本中，圍繞用戶在H5游戲開發(fā)過程中遇到的“運(yùn)行效率”、“開發(fā)效率”和“網(wǎng)絡(luò)加載效率”三大核心問題進(jìn)行升級(jí)。在H5 3D游戲方面，白鷺已經(jīng)成功邁出了第一步，但未來還有很長(zhǎng)的路要走。白鷺引擎4.0版本全新的Egret 3D，無論功能還是性能，以及配套的IDE和插件體系，都能助力CP制作重度化3D H5游戲。據(jù)白鷺首席架構(gòu)師王澤介紹，白鷺3D引擎不止可以幫助中小型研發(fā)團(tuán)隊(duì)完成2D及簡(jiǎn)單的輕型3D作品，其獨(dú)有的高質(zhì)量Lightmap烘培解決方案更是提高了3D游戲的視覺門檻，完美呈現(xiàn)大型重度的游戲體驗(yàn)。

【51CTO原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為51CTO.com】