HTML5游戲開發難點之效率、性能和加載量
原創【51CTO.com原創稿件】隨著國內的引擎開發技術的進步，2D游戲技術已經成為市場主流，并正式拉開了3D游戲的序幕。白鷺時代CEO陳書藝表示，白鷺時代自2014年成立起，就致力于提升HTML5游戲性能，增強游戲的體驗。但HTML5游戲如果沒有統一的技術標準就開始做內容創作很難成功，所以開發引擎是必然。白鷺引擎從1.0到4.0，一路走來，為HTML5游戲開發所面臨的開發效率、運行性能和資源加載量等難點做了很多貢獻。
難點一、 如何提升開發效率快速上線
對于開發商來說游戲開發效率是最重要的一個環節，有時候游戲晚推出一個月就會錯過最好的窗口期，而快速上線能夠留給自己更多的時間調整游戲。為提升開發效率，白鷺引擎API選擇Canvas、開發語言選擇Typescript。
為什么采用Canvas？游戲發展需要非常豐富細膩的動畫效果，DOM完全做不了這是白鷺引擎選擇Canvas的原因所在。Canvas是HTML5新API，還可以實現更多的復雜交互的效果。
為什么放棄Dart、AS3、JavaScript，最終選擇了TypeScript（后續簡稱TS）作為白鷺引擎的開發語言呢？TS是一個嚴格意義上JavaScript超集，而且它的語言設計非常符合JavaScrip的最新標準ES6。據白鷺引擎架構師王澤介紹說：TS本身具有開源屬性，這意味著開發者可以自有更改其源代碼，同時，TS的架構設計非常優秀，為開發者的進一步擴展提供了充分的API接口，比如實現編譯器、自定義語法檢查以及自定義輸出結構等。
不采用Dart、AS3、JavaScript作為開發語言原因如下：
1. 首先，Dart 的形式針對很多會使用 JS 或 AS3 的開發者而言（尤其是初學者這個最大的群體），學習的成本曲線較陡，而谷歌又是一個在技術上“太過”創新的公司，跟隨一個有可能“朝令夕改”的技術去制作一款產品，而且將整個白鷺的工具和服務的體系都懸于它之上，有一定的風險。
2. AS3 首先是一個封閉的語言，而且 Flash 團隊已經放棄 AS3 到 AS4，AVM2 到 AVM3 的項目，所以用不了全新的 ES6 新特性，雖然很遺憾，但是最終還是沒有選擇 AS3。
3. JavaScript是弱類型，會導致開發游戲效率低下，維護起來更加困難，代碼越寫越亂、越寫越多。
選擇TS還有兩個原因，如下：
其一，2014年初，中國擁有近30萬的Flash開發者，其中90%是游戲相關，這是一個寶貴的開發者社區群體，他們對于Web頁游的開發和理解遠遠超過了任何使用其他web前端技術做網頁游戲的群體。白鷺使用TS，一方面是為了讓JS游戲開發人員更舒服些，另一方面是想積極爭取Flash AS3的開發群體。
API設計上白鷺引擎與Flash AS3對比圖
其二：白鷺引擎基于Canvas用TS來封裝Flash ActionScript3.0對游戲有幫助的部分API結構設計。上圖，是API設計上白鷺引擎與Flash AS3的對比，可看出兩者設計幾乎一致，這便于AS3開發者可以直接上手，進而保證HTML5游戲的開發效率。
一站式 HTML5 游戲開發工作流
如上圖，除了以上兩點外，白鷺時代為了進一步提升開發者的開發效率推出了一系列輔助工具，最終打造出了全球首個HTML5完整工作流。從代碼開發、UI搭建、資源管理、粒子特效等方面提供一站式 HTML5 游戲開發工作流，大幅度提升 HTML5 游戲開發效率。
難點二：游戲性能方面如何讓CP滿意
游戲性能一直是CP關注的重點，這部分白鷺引擎引用WebGL技術的同時還自主研發了臟矩形技術。
如上圖，臟矩形渲染是一種基于顯示列表的局部刷新方法。依然是要有一個時鐘頻率，定時每秒執行60次。但區別是每次我們并不直接清空整個屏幕，而是首先計算屏幕上發生改變的區域，這里我們叫做重繪區，然后只清空指定的重繪區，并找出跟這個區域相交的所有顯示對象重繪一遍。如果顯示列表本次并沒有發生改變，那么將直接跳過本次繪制，什么也不做沒有使用臟矩形只有24幀，使用了臟矩形后能夠達到60幀滿運行。
如上圖，WebGL技術助力游戲性能實現巨大提升。早在2014年的時候白鷺時代就打算支持WebGL，但是當時通過webglstats.com的數據統計發現當時的WebGL支持率只有40%不到，所以當時只能先從Canvas做起。但是我們看到截止2016年底，WebGL的支持率已經達到了90%以上。而且得益于微信 X5 瀏覽服務，在國內支持率基本達到100%。值得高興的是，這時候采用白鷺引擎WebGL技術的 《決戰沙城 H5》獲得了超1000w月流水的好成績。
如上圖，除了上述兩個技術以外， 白鷺引擎還提供名為Egret Runtimes的解決方案來提高HTML5游戲的運行效率，在提升 HTML5 游戲運行性能的同時還可移動設備兼容性問題。
Egret Runtime是一個加速器組件?？蓪崿F游戲運行加速，渠道接入加速。還可作為擴展模塊無縫嵌入到移動設備上的瀏覽器或其它應用中。 游戲開發者能夠忽略不同操作系統、不同瀏覽器、和不同終端的差異，讓HTML5游戲以接近原生的表現在用戶手機終端中高效運行；渠道接入商可以簡化繁瑣游戲接入流程，實現一次 Egret Runtime 接入，HTML5 游戲隨時上架的高效游戲接入。
難點三：資源加載量問題
基于中國現有網絡條件下還要考慮游戲資源的加載速度。如上圖，根據中國移動用戶數據，2014年2月4G用戶數不到1000w，用戶手機網絡條件太差。針對這一現象，白鷺引擎內置文理集支持的同時引入了全新的資源管理框架。
白鷺引擎內置了紋理集的支持，而且提供了配套的工具Texture Merger。在2014年的網絡環境下每減少1kb的資源體積就意味著用戶流失率的一點點降低。紋理集聽上去名稱高大上，實則概念非常簡單。紋理集實際上就是將一些零碎的小圖放到一張大圖當中。游戲中也經常使用到紋理集。使用紋理集的好處很多，我們通過將大量的圖片拼合為一張圖片從而減少網絡請求，原先加載數次的圖片資源現在加載一次即可。 同時，在引擎渲染的時候也會較少IO讀取，從而提高性能。紋理集甚至能減少一半的資源體積。
近期發布的白鷺引擎 4.0 引入全新的資源管理框架，包含版本控制與熱更新功能，允許針對不同平臺發布資源，加載體積減少30%。
白鷺引擎的現狀及未來挑戰
白鷺最新發布的引擎4.0版本中，圍繞用戶在H5游戲開發過程中遇到的“運行效率”、“開發效率”和“網絡加載效率”三大核心問題進行升級。在H5 3D游戲方面，白鷺已經成功邁出了第一步，但未來還有很長的路要走。白鷺引擎4.0版本全新的Egret 3D，無論功能還是性能，以及配套的IDE和插件體系，都能助力CP制作重度化3D H5游戲。據白鷺首席架構師王澤介紹，白鷺3D引擎不止可以幫助中小型研發團隊完成2D及簡單的輕型3D作品，其獨有的高質量Lightmap烘培解決方案更是提高了3D游戲的視覺門檻，完美呈現大型重度的游戲體驗。
【51CTO原創稿件，合作站點轉載請注明原文作者和出處為51CTO.com】
