開發(fā)HTML5游戲的九大問題與解決方法剖析

昨天下午的北京市東城區(qū)科技寺，舉辦了一場主題為“HTML5游戲”技術(shù)交流沙龍。來自相關(guān)領(lǐng)域的技術(shù)精英進(jìn)行了精彩的內(nèi)容分享。本次活動從HTML5游戲研發(fā)、渠道、市場等多個角度進(jìn)行了講解。在本次活動上，91手冊體驗了HTML5移動游戲，了解了HTML5現(xiàn)狀及目前大公司的布局和相關(guān)技術(shù)解決方案等?；顒迂?fù)責(zé)人預(yù)測：隨著移動社區(qū)興起，勢必帶動HTML5的革命。未來一兩年內(nèi)，HTML5移動游戲必將呈現(xiàn)大爆發(fā)趨勢。

雖然沙龍內(nèi)容偏技術(shù)類較多，但干貨亮點依舊很足。以下是91手冊整理的HTML5游戲研發(fā)、市場趨勢以及渠道布局和技術(shù)解決方案的內(nèi)容。希望大家能從本文中找到對HTML5游戲研發(fā)上問題答案。

推動游戲前行：Egret聯(lián)合創(chuàng)始人馬鑒分享

游戲行業(yè)三個核心體系：發(fā)行平臺、軟件工具、制作機(jī)構(gòu)。而HTML5沒有發(fā)展起來的核心原因就是缺少HTML5成熟工具開發(fā)商。這也造成在用HTML5開發(fā)游戲時會出現(xiàn)的很多“坑”。

移動游戲技術(shù)趨勢

1.基于開放的技術(shù)，例如HTML5、WebGL；

2.多平臺多設(shè)備：原生+網(wǎng)絡(luò)。2014年全球移動設(shè)備的流量超越了PC，而在這其中，90%的收入來源原生（游戲、娛樂等），10%的瀏覽器卻沒有這個趨向，小游戲的收入很低，發(fā)展空間很大。未來重度原生手游轉(zhuǎn)向APP，而中輕會進(jìn)入小游戲。

3.高性能高效率：引擎+工作流。Adobe的強(qiáng)勢在于完善的工作流。將內(nèi)容復(fù)刻到PC桌面用了15年，移動端未來也會是這個樣子，只是時間要短。

當(dāng)下HTML5移動游戲的現(xiàn)狀

3年前，曾經(jīng)用HTML5做游戲的都遇到了很大的“坑”，做Web網(wǎng)站可以但做游戲不行，即使在PC端上運行一樣不行?，F(xiàn)在，多數(shù)瀏覽器已經(jīng)支持Web GL和多點觸摸，讓做游戲變的更容易。

以目前移動版QQ空間為例，內(nèi)有一個“玩吧”頁面，在IOS版的QQ空間上是二級頁面，而在安卓版則是一級頁面，而且里面全部都是HTML的游戲。

WORK HARD：性能表現(xiàn)仍有差異（不同瀏覽器還存在差異）；缺少純粹的技術(shù)產(chǎn)品；社區(qū)深度不足（有經(jīng)驗的開發(fā)人員少）；

MAKE LUCK：Cavas性能穩(wěn)定 （微信支持WebGL，與原生游戲越來越接近）；OpenGL-ES原生封裝調(diào)用WebGL；IOS6+具備Web Audio API；Android 4+與Windows Phone支持多點觸摸；

HTML5的游戲疑問

中場休息時，91手冊特意與HTML5游戲開發(fā)者社區(qū)聯(lián)合創(chuàng)始人譚凱（白澤）先生進(jìn)行了交流。他告訴91手冊，HTML5游戲未來很有市場。相比于APP游戲，HTML5游戲直接掃描二維碼就可以打開，不需要下載，大大縮短了進(jìn)入游戲的時間，這讓原本不玩游戲的人也開始玩游戲。另外還可以在移動端桌面創(chuàng)建小圖標(biāo)，用戶下次進(jìn)入直接點圖標(biāo)即可，不需要通過應(yīng)用商店下載，當(dāng)然HTML5游戲也可以生成APP端下載，除外HTML5游戲的跨平臺優(yōu)勢不容小視，HTML5游戲也可以是一些瀏覽器和應(yīng)用的變現(xiàn)手段。

HTML5游戲的網(wǎng)絡(luò)與硬件要求：

1.網(wǎng)絡(luò)：目前的3G網(wǎng)絡(luò)已經(jīng)滿足中小型HTML5游戲的要求，網(wǎng)絡(luò)上的問題不大。

2.硬件：以iphone4s配置為例，等于或高于的設(shè)備都可以順暢運行。

《坑與填坑》 HTML5游戲開發(fā)現(xiàn)存問題與解決方法進(jìn)行剖析：嘉賓 韓宇分享

開發(fā)HTML5游戲的九個大坑

1.網(wǎng)絡(luò)大坑：網(wǎng)速慢，游戲加載是難題；網(wǎng)絡(luò)覆蓋面并不廣泛；移動網(wǎng)絡(luò)資費貴；

填坑：4G網(wǎng)絡(luò)逐步成熟，資費下降；公共WiFi普及；游戲分步加載；

內(nèi)容補(bǔ)充

網(wǎng)絡(luò)問題是影響HTML5發(fā)展的很大障礙，未來的智能化城市條件之一就是全城的無線網(wǎng)。而目前國內(nèi)很多城市正在建設(shè)WiFi，不少公共場所已經(jīng)設(shè)置了WiFi。（變革伊始：線下渠道爆發(fā)前夜 WIFI與地鐵入口爭奪、線下渠道爆發(fā)后續(xù)：8000米高空體驗 HTML游戲來了?。?/p>

支付寶也在進(jìn)行全民免費WiFi計劃

支付寶免費Wi-Fi計劃的一期項目將在6月份正式上線。據(jù)支付寶的規(guī)劃，安裝了“支付寶錢包”的用戶，在進(jìn)入支付寶免費Wi-Fi覆蓋區(qū)域之后，會自動收到一條推送消息，用戶點擊該消息，就能自動連接上網(wǎng)。

2.效率大坑：Canvas兼容多，但效率有限；WebGL效率較高，兼容有限；不同設(shè)備不同瀏覽器效率不同；針對JS語言特性的優(yōu)化；

填坑：選擇過度渠道，針對一種瀏覽器開發(fā)；使用效率優(yōu)化產(chǎn)品；設(shè)備支持更加到位，甚至有Web OS設(shè)備；越來越多的瀏覽器支持WebGL，并且支持的很好；游戲優(yōu)化方法的分享；各種框架的封裝與優(yōu)化；

目前國內(nèi)外已經(jīng)有35個框架可以支持，例如

1.Codot，開源的Unity，阿拉伯人開發(fā)，主要制作2D游戲，支持IOS、安卓、HTML5等；

2.Construct2，商業(yè)引擎，英國人開發(fā)，有優(yōu)秀的可視化編輯器與豐富案例；

3.Phaser,底層使用pixi并與BBC游戲頻道合作，官網(wǎng)有許多案例展示；

4.Coo Greate，憤怒小鳥的掌門人投資，在線編輯3D；

5.Famous，有很多驚艷效果的DEMO，看到效果的時候可以對比每一行代碼，目前正在封閉測試中；

6.SpeII JS，一個神奇的框架，JS可以直接生成Flash；

3.兼容大坑：設(shè)備兼容問題；瀏覽器間有差異；標(biāo)準(zhǔn)仍不完善；

填坑：使用Hybrid APP；框架封裝與方法分享；過度渠道：兼容一種瀏覽器即可；移動設(shè)備兼容更給力，智能電視籌備中；瀏覽器對HTML5支持更一致

4.安全大坑：HTML5源碼易獲??；加密無標(biāo)準(zhǔn)；移動Web存在很多漏洞；

填坑：HTML5非游戲產(chǎn)品已做積累；各渠道會做好防范；壓縮混淆方法；安全產(chǎn)品勢必崛起；

5.渠道大坑：付費尚未完善；渠道用戶量有限；更多停留在談理想階段；同質(zhì)化渠道過多（微信）；無成功游戲帶動渠道發(fā)展；

填坑：傳統(tǒng)渠道籌備中，部分開始發(fā)力；（360極速瀏覽器等）；有用戶量的平臺轉(zhuǎn)型HTML5游戲；（例如： KiK、飛信等，目前有些人也在收HTML5游戲去微信運營。）渠道的坑受其它影響更多（支付、安全）；純HTML5游戲渠道逐步成型；（純HTML5的游戲渠道Clay.io，但移動端未支持）過度渠道崛起；

6.打包大坑：打包后游戲效率問題；包容量問題；其它打包引起的未知問題；

填坑：直接代碼轉(zhuǎn)換；現(xiàn)有打包產(chǎn)品逐步完善；依靠框架或是IDE集成；

推薦打包工具：PhoneGap、GameClosure、JSB、V-Play、AppCan等

7.付費大坑：廣告未健全；游戲內(nèi)支付未成型；HTML5游戲盈利無成功案例；

填坑：各渠道已籌備付費接口；移動計費改革（云計算,節(jié)省核算成本。用戶點擊直接付款扣款，不同原來一步步的走環(huán)節(jié)，減少了惡意刷的行為）

8.支付大坑：各大平臺行動緩慢；原市場可淘金，轉(zhuǎn)型團(tuán)隊不多；投資、人才，輿論未對HTML5有利；某些巨頭政策阻礙（蘋果）；

如何填坑：巨頭領(lǐng)軍（Unity、云智聯(lián)、Goo等已經(jīng)在行動）；合作、沙龍進(jìn)行中；Sencha和TreSensa一直在鼓舞士氣（30%的渠道分成）；教程文章等資料補(bǔ)全中；

蘋果坑爹政策

最近已經(jīng)開放對支持WebGL。

蘋果坑爹政策 最近已經(jīng)開放對支持WebGL。

9.編碼大坑：JS的特殊性不易管理；標(biāo)準(zhǔn)尚未成熟又缺少教程；開發(fā)工具的問題；

填坑：TS等產(chǎn)品讓編碼更簡單易于管理；各種框架對JS的封裝；ES6與JS2.0標(biāo)準(zhǔn)即將推出；各IDE功能完善中

總結(jié):簡化（IDE）、加工（Ugly）、升級（ES6、JS2.0）、包裝（TS、Dart）、轉(zhuǎn)換（JSB）、加速器（VS）、閱讀標(biāo)志（ASM）、封裝（各種框架）