开发HTML5游戏的九大问题与解决方法剖析

昨天下午的北京市东城区科技寺，举办了一场主题为“HTML5游戏”技术交流沙龙。来自相关领域的技术精英进行了精彩的内容分享。本次活动从HTML5游戏研发、渠道、市场等多个角度进行了讲解。在本次活动上，91手册体验了HTML5移动游戏，了解了HTML5现状及目前大公司的布局和相关技术解决方案等。活动负责人预测：随着移动社区兴起，势必带动HTML5的革命。未来一两年内，HTML5移动游戏必将呈现大爆发趋势。

虽然沙龙内容偏技术类较多，但干货亮点依旧很足。以下是91手册整理的HTML5游戏研发、市场趋势以及渠道布局和技术解决方案的内容。希望大家能从本文中找到对HTML5游戏研发上问题答案。

推动游戏前行：Egret联合创始人马鉴分享

游戏行业三个核心体系：发行平台、软件工具、制作机构。而HTML5没有发展起来的核心原因就是缺少HTML5成熟工具开发商。这也造成在用HTML5开发游戏时会出现的很多“坑”。

移动游戏技术趋势

1.基于开放的技术，例如HTML5、WebGL；

2.多平台多设备：原生+网络。2014年全球移动设备的流量超越了PC，而在这其中，90%的收入来源原生（游戏、娱乐等），10%的浏览器却没有这个趋向，小游戏的收入很低，发展空间很大。未来重度原生手游转向APP，而中轻会进入小游戏。

3.高性能高效率：引擎+工作流。Adobe的强势在于完善的工作流。将内容复刻到PC桌面用了15年，移动端未来也会是这个样子，只是时间要短。

当下HTML5移动游戏的现状

3年前，曾经用HTML5做游戏的都遇到了很大的“坑”，做Web网站可以但做游戏不行，即使在PC端上运行一样不行。现在，多数浏览器已经支持Web GL和多点触摸，让做游戏变的更容易。

以目前移动版QQ空间为例，内有一个“玩吧”页面，在IOS版的QQ空间上是二级页面，而在安卓版则是一级页面，而且里面全部都是HTML的游戏。

WORK HARD：性能表现仍有差异（不同浏览器还存在差异）；缺少纯粹的技术产品；社区深度不足（有经验的开发人员少）；

MAKE LUCK：Cavas性能稳定 （微信支持WebGL，与原生游戏越来越接近）；OpenGL-ES原生封装调用WebGL；IOS6+具备Web Audio API；Android 4+与Windows Phone支持多点触摸；

HTML5的游戏疑问

中场休息时，91手册特意与HTML5游戏开发者社区联合创始人谭凯（白泽）先生进行了交流。他告诉91手册，HTML5游戏未来很有市场。相比于APP游戏，HTML5游戏直接扫描二维码就可以打开，不需要下载，大大缩短了进入游戏的时间，这让原本不玩游戏的人也开始玩游戏。另外还可以在移动端桌面创建小图标，用户下次进入直接点图标即可，不需要通过应用商店下载，当然HTML5游戏也可以生成APP端下载，除外HTML5游戏的跨平台优势不容小视，HTML5游戏也可以是一些浏览器和应用的变现手段。

HTML5游戏的网络与硬件要求：

1.网络：目前的3G网络已经满足中小型HTML5游戏的要求，网络上的问题不大。

2.硬件：以iphone4s配置为例，等于或高于的设备都可以顺畅运行。

《坑与填坑》 HTML5游戏开发现存问题与解决方法进行剖析：嘉宾 韩宇分享

开发HTML5游戏的九个大坑

1.网络大坑：网速慢，游戏加载是难题；网络覆盖面并不广泛；移动网络资费贵；

填坑：4G网络逐步成熟，资费下降；公共WiFi普及；游戏分步加载；

内容补充

网络问题是影响HTML5发展的很大障碍，未来的智能化城市条件之一就是全城的无线网。而目前国内很多城市正在建设WiFi，不少公共场所已经设置了WiFi。（变革伊始：线下渠道爆发前夜 WIFI与地铁入口争夺、线下渠道爆发后续：8000米高空体验 HTML游戏来了！）

支付宝也在进行全民免费WiFi计划

支付宝免费Wi-Fi计划的一期项目将在6月份正式上线。据支付宝的规划，安装了“支付宝钱包”的用户，在进入支付宝免费Wi-Fi覆盖区域之后，会自动收到一条推送消息，用户点击该消息，就能自动连接上网。

2.效率大坑：Canvas兼容多，但效率有限；WebGL效率较高，兼容有限；不同设备不同浏览器效率不同；针对JS语言特性的优化；

填坑：选择过度渠道，针对一种浏览器开发；使用效率优化产品；设备支持更加到位，甚至有Web OS设备；越来越多的浏览器支持WebGL，并且支持的很好；游戏优化方法的分享；各种框架的封装与优化；

目前国内外已经有35个框架可以支持，例如

1.Codot，开源的Unity，阿拉伯人开发，主要制作2D游戏，支持IOS、安卓、HTML5等；

2.Construct2，商业引擎，英国人开发，有优秀的可视化编辑器与丰富案例；

3.Phaser,底层使用pixi并与BBC游戏频道合作，官网有许多案例展示；

4.Coo Greate，愤怒小鸟的掌门人投资，在线编辑3D；

5.Famous，有很多惊艳效果的DEMO，看到效果的时候可以对比每一行代码，目前正在封闭测试中；

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

3.兼容大坑：设备兼容问题；浏览器间有差异；标准仍不完善；

填坑：使用Hybrid APP；框架封装与方法分享；过度渠道：兼容一种浏览器即可；移动设备兼容更给力，智能电视筹备中；浏览器对HTML5支持更一致

4.安全大坑：HTML5源码易获取；加密无标准；移动Web存在很多漏洞；

填坑：HTML5非游戏产品已做积累；各渠道会做好防范；压缩混淆方法；安全产品势必崛起；

5.渠道大坑：付费尚未完善；渠道用户量有限；更多停留在谈理想阶段；同质化渠道过多（微信）；无成功游戏带动渠道发展；

填坑：传统渠道筹备中，部分开始发力；（360极速浏览器等）；有用户量的平台转型HTML5游戏；（例如： KiK、飞信等，目前有些人也在收HTML5游戏去微信运营。）渠道的坑受其它影响更多（支付、安全）；纯HTML5游戏渠道逐步成型；（纯HTML5的游戏渠道Clay.io，但移动端未支持）过度渠道崛起；

6.打包大坑：打包后游戏效率问题；包容量问题；其它打包引起的未知问题；

填坑：直接代码转换；现有打包产品逐步完善；依靠框架或是IDE集成；

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

7.付费大坑：广告未健全；游戏内支付未成型；HTML5游戏盈利无成功案例；

填坑：各渠道已筹备付费接口；移动计费改革（云计算,节省核算成本。用户点击直接付款扣款，不同原来一步步的走环节，减少了恶意刷的行为）

8.支付大坑：各大平台行动缓慢；原市场可淘金，转型团队不多；投资、人才，舆论未对HTML5有利；某些巨头政策阻碍（苹果）；

如何填坑：巨头领军（Unity、云智联、Goo等已经在行动）；合作、沙龙进行中；Sencha和TreSensa一直在鼓舞士气（30%的渠道分成）；教程文章等资料补全中；

苹果坑爹政策

最近已经开放对支持WebGL。

苹果坑爹政策 最近已经开放对支持WebGL。

9.编码大坑：JS的特殊性不易管理；标准尚未成熟又缺少教程；开发工具的问题；

填坑：TS等产品让编码更简单易于管理；各种框架对JS的封装；ES6与JS2.0标准即将推出；各IDE功能完善中

总结:简化（IDE）、加工（Ugly）、升级（ES6、JS2.0）、包装（TS、Dart）、转换（JSB）、加速器（VS）、阅读标志（ASM）、封装（各种框架）