整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
生手游市场已是红海，腾讯、网易等寡头独霸天下，H5游戏市场或将成为下一个风口。据笔者所知，很多H5游戏开发团队由于选择引擎不慎导致项目甚 至团队夭折。如何选择适合团队和项目的引擎，笔者通过学习和项目实践，总结微薄经验，供大家参考，非技术人员也可以将本篇内容作为引擎选择的重要关注点。
选择H5游戏引擎的思考维度
1、开发语言的支持
2、2D、3D、VR的支持
3、性能
4、引擎的应用广度
5、设计理念
6、工作流支持力度
7、商业化成熟案例
8、学习资源与技术支持能力
首先，我们要知道，当前主流的游戏引擎有哪些。由于H5引擎有很多，笔者在这里进行了精心的筛选，过滤掉不支持webGL的引擎，以及封装了第三方渲染内核的JS框架，和不能直接在浏览器中运行的JS引擎。
为什么要过滤掉这几种呢，首先，没有自己的渲染内核，仅仅是基于第三方的内核作的API封装，笔者很担心可持续的性能优化和维护能力。另外，不能在 浏览器中直接运行的JS引擎，将限制H5游戏跨平台的交互能力。还有， 笔者非常看好webGL模式，认为webGL模式才是H5引擎的未来。原因有几 点：
第一、性能，webGL模式远超Canvas数倍。DOM模式就不适合用于真正的游戏开发，更不用提。
第二、3D方向，webGL模式理论上可以制作2D和3D游戏，Canvas和DOM模式下只能制作2D游戏。
第三、普及率，webGL的普及率已经非常高了，尤其是支持webGL的腾讯TBS-Blink内核已在4月19日发布，并逐步在微信、QQ空间、QQ浏览器、手机QQ等APP中采用静默安装方式全面升级。这个普及率在国内带来的影响，;你懂的……
1、选择H5游戏开发语言
拥有广泛开发者的H5游戏开发语言共有三种，分别为Flash AS3、TypeScript、JavaScript。其中Flash AS3、 TypeScript均属于面向对象的高级脚本语言，通过编译器将原项目代码编译成JavaScript代码文件运行于浏览器之中，面向对象的高级语言无 论是项目开发管理，还是项目开发的工具环境的成熟度都明显优于JavaScript脚本语言，尤其是中大型项目方面，AS3等高级语言的效率会更高。
从上图看出，支持JavaScript语言的引擎更多，由于AS3语言的编译器为Layabox引擎推出的，因此采用AS3作为开发语言的仅有 Layabox引擎。笔者建议在开发中大型游戏项目的时候，采用TypeScript或者是Flash AS3语言进行开发。如果是小型游戏，任选其一即 可。
2、引擎的未来延续能力
选择一个引擎，并不是简单的认为，满足眼前够用就可以了，引擎的未来延续能力也是很重要的，这个项目是2D，下个项目想开发3D，如果引擎不支持怎 么办？去换个引擎？如果VR的机会来了，再想发布VR版本，这个引擎不支持，需要重新开发吗？等等问题，作为开发者尽可能要提前想好。
通过上图，可以看出，即便是在支持webGL的H5引擎里，有只面向2D游戏的，也有只面向3D游戏的，同时支持2D、3D、VR的H5引擎，从目前看只有Layabox与Egret引擎。
3、性能是核心需求
性能是H5游戏面临的核心门槛，也是很多H5游戏不被专业玩家认可的重要原因之一。游戏卡顿，不流畅，这样的产品体验很难在激烈竞争中生存下来。
H5产业早期的普及阶段即将过去，游戏品质在迅速提高，品质中包括精细的美术和炫酷的动画等。在复杂的游戏项目面前，上述种种元素，其流畅体验度对游戏引擎是极大的考验。所以选择性能优秀的引擎是保证品质的最重要基础，一定要谨慎。
在游戏项目研发开始时，一定要先对复杂的模块做DEMO测试，特别是带背景滚动的游戏。比如横屏卷轴游戏，对帧数稳定性要求极高，如果满足不了性能上的需求，可能会带来眩晕、眼花、疲倦等不良体验。
在webGL的2D渲染性能方面，pixi.js的性能处于当前的顶级。在webGL的3D渲染性能方面，Three.js非常优秀。在 runtime方面Cocos2d-js也有着原生级的表现，经过对比，笔者认为Layabox性能的综合实力最强，在各个渲染领域都保持在HTML5引 擎的顶级水平。当然，上图仅作为参考，对于任何号称某个引擎性能最牛的论调，一定要亲自进行性能DEMO的测试对比，而不要轻易采信。
由于性能是游戏最核心的需求，笔者这里再多说一句，大型项目在系统复杂度、UI复杂度、动画显示数量和种类等方面与小型游戏项目完全不在一个量级。 会涉及到比小游戏更复杂的性能优化、内存管理、资源管理等需求，如果选择了小马拉大车的低性能引擎，项目夭折可能性非常大，除非最后项目开发者花大量时间 自己优化引擎。所以性能差一点，就会导致结果差很多，不可主观想象。
4、与引擎的应用广度
随着H5游戏品质提升，在其他领域也具备一定的竞争力和价值，一次开发可发行各个领域版本，已成为日渐明确的需求，这里面包括发行原生APP手游和 PC的flash页游需求，大统一的引擎时代即将来领。目前最火爆的H5游戏《传奇世界H5》据说有40%的收入来自PC网页。
发布PC页游时，由于PC浏览器目前对HTML5兼容性不足70%，用户损耗很大，页游联运平台可能会拒绝或放量很少，只有采用能同时发布Flash版本的引擎，才能解决这个问题。
5、设计理念与定位
设计理念是个比较大的话题，也是个很重要的引擎选择因素，比如引擎是要专注移动端，还是要面向全平台多端游戏市场。是注重性能，还是注重工具链等等。深入了解不同引擎的理念与定位，才能更好的与游戏产品进行结合。
上图内容仅作参考，详情建议去各引擎官网深入了解。
6、工作流支持力度
作为商业级开源引擎，工具链的提供与支持也是一种选择考量要素，比如UI编辑器、粒子编辑器、骨骼编辑器、场景编辑器等等，如果引擎方直接提供或支持，那么将会较大的提升研发效率。本文中提到的7个引擎，只有Egret、Layabox、Cocos2d-JS这三个引擎，在工具链方面提供足够全面的支撑。
7、是否有成熟的商业案例
怎么证明引擎是成熟的？一定要有成熟的商业案例，一般引擎的官网上都会有游戏案例介绍，我们在选择引擎之前要进行深入体验，包括：商业案例的数量、 商业案例的种类、稳定性、流畅度（要在低端机里体验）、项目复杂度、项目相似度等。如果有一些大型成功案例背书会相对安全可靠些。从目前的行业案例来看，Layabox引擎的MMORPG《醉西游》、重度动作游戏《猎刃2》、大型模拟经营游戏《梦幻家园》等无疑是H5引擎技术的最高 水准代表作。但是从卡牌、挂机等类型的付费游戏总体数量来看，Egret引擎明显占优，充分说明该引擎的市场宣传力度更胜一筹。
8、学习资源与技术支持能力
能提供什么样的学习资源，以及技术支持，对于开发者也是重要因素，如果你是技术大牛，只想使用轻量的第三方渲染内核。那么2D游戏，pixi.js 无疑是首选。3D游戏，笔者推荐Three.js。但是这两种引擎的学习资料都比较稀少。笔者认为学习资料的完善，以及在学习过程中的技术支持力度，将会 很大的帮助你解决引擎使用中的问题。所以，API完善，DEMO完善，文档完善，社区的响应速度，交流氛围，以及QQ技术支持等，都可以作为你选择引擎的 因素考量之一。
9、页游移植产品的引擎选择
目前像《醉西游》等优秀H5产品是Flash页游或手游移植而成，移植类的产品在选用引擎时要注意，代码是否可以直接移植？如果可以，那将节省大量 的开发成本。比如Flash AS3开发的2D或3D页游或手游，可以把逻辑与算法代码直接拷贝移植到Layabox引擎项目中，开发速度提高数倍。
写在最后：最后提醒一下，千万不要相信某些引擎的单方宣传，一定要花一点时间去研究实践，亲自制作DEMO去作一作对比，动手体验到的才是真理。
针对DEMO测试笔者有几点建议：
1、采用一个复杂的UI，特别是复杂列表，比如说没有分页的背包列表，背包里放上不同的道具图片，测试滑动时的流畅度，这块比较考验性能，元素越复杂，数据越多，尤其能对比出来性能上的差异。
2、包含最复杂战斗部分，不要写战斗逻辑代码，不然会花的时间太长，只需要把战斗相关的动画和复杂的元素放在场景中模拟即可，因为H5游戏性能瓶颈通常在于画面的显示。
3、 测试主要目的是看项目在引擎中性能，这是最至关重要的，所以，硬件上，我们要选择低端安卓手机（比如红米）进行测试。软件环境建议使用微信环境测试，首 先，因为微信公众号是H5的主要渠道之一，其次，微信当前的H5性能低于chrome浏览器，在恶劣的环境下更能测试引擎的优劣。
HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。
HTML5是构建Web内容的一种语言描述方式，HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息，HTML5在从前HTML4.01的基础上进行了一定的改进。
由于HTML5只是在HTML的基础上进行了新增或者废弃一些标签或者特性，本文默认均为HTML5语法，被废弃的部分就不再提起，HTML一般用于描述网页的结构，所以一些样式和脚本方面的标签和属性以及关于JavaScript部分的特性也不再提及，重点在于梳理常用标签体系。
现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐、谷歌、Safari和Opera等等，通过对这些主流web浏览器的发展策略调查，发现它们都支持HTML5上采取了措施。
（1）IE浏览器
2010年3月16日，微软MIX10技术大会上宣布其推出的IE9浏览器已经支持HTML5。同时还声称，随后将会更多的支持HTML新标准和CSS3新特性。
（2）FireFox浏览器
2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版，该版本中Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多的HTML5语法分析器，以及支持更多的HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频，在线音频在内的多种应用都已经在版本中实现。
（3）Google浏览器
2010年2月19日，谷歌Gears项目经理通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。据费特表示，目前在谷歌看来，Gears应用用于HTML5的诸多创新非常相似，并且谷歌一直积极发展HTML5项目。因此只要谷歌不断以加强网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是谷歌做出吊证的重要原因。
（4）Safari浏览器
2010年6月7日，苹果在开发者发布会公布Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera浏览器
2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3，将会是全球互联网发展的未来趋势，包括目前Opera在内的诸多浏览器厂商，纷纷研发HTML5的相关产品，web未来属于HTML5。
综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。
●Notepad++
●Visual Studio Code
●HBuilderX
●Dreamweaver
●Sublime Text
●Webstorm
Webstorm为本文使用的工具，请自行购买激活，也可以使用以上的免费工具，安装步骤都较为简单，在此省略！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
单标签：
<标签名 [属性名=属性值,...]>
成对标签：
<标签名 [属性名=属性值,...]></标签名>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>这是一个段落</p>
使用示例：
<a href="百度一下，你就知道">打开百度，你就知道！</a>
常见属性：
属
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
<th>表头四</th>
</tr>
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
<td>单元格四</td>
</tr>
</table>
无序列表：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
有序列表：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
自定义列表：
<dl>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
<dt>+</dt><dd>列表项</dd>
</dl>
<div>具体内容</div>
<span>具体内容</span>
常见标签：
基本布局：
常见标签：
案例演示：
1、form、input、label演示
<form action="" method="get">
<p>
<label for="username">账户：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password">
</p>
<p><input type="submit"></p>
</form>
2、textarea演示
<form action="" method="post">
<textarea name="mycontext" cols="30" rows="10"></textarea>
<input type="submit">
</form>
3、fieldset、legend、select、optgroup、option演示
<form action="" method="post">
<fieldset>
<legend>请选择你的爱好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="运动">
<option value="篮球">篮球</option>
<option value="足球">足球</option>
</optgroup>
<optgroup label="电子">
<option value="看电影">看电影</option>
<option value="看电视">看电视</option>
</optgroup>
</select>
</fieldset>
</form>
4、datalist演示
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
5、单选框演示
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">female</label>
</form>
6、复选框演示
<form action="" method="post">
<input type="checkbox" name="vehicle" id="bike" value="bike">
<label for="bike">I have a bike</label>
<input type="checkbox" name="vehicle" id="car" value="car">
<label for="car">I have a car</label>
</form>
<iframe src="百度一下，你就知道" frameborder="0" width="500px" height="500px"></iframe>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 Audio 标签。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 Video 标签。
</video>
水平线：<hr>
换行：<br>
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>缩写词或者首字母缩略词</abbr>
<address>联系信息</address>
<bdo>文字方向</bdo>
<blockquote>从另一个源引用的部分</blockquote>
<cite>工作的名称</cite>
<del>删除的文本</del>
<ins>插入的文本</ins>
<sub>下标文本</sub>
<sup>上标文本</sup>
HTML标签可以设置属性，属性总是以名称/值对的形式出现，比如：name=“value”，它的主要作用是控制或修饰标签。
HTML事件可以触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
由窗口触发该事件 (同样适用于 <body> 标签)：
表单事件在HTML表单中触发 (适用于所有 HTML 元素，但该HTML元素需在form表单内)：
通过键盘触发事件，类似用户的行为：
通过鼠标触发事件，类似用户的行为：
通过视频（videos），图像（images）或音频（audio） 触发该事件，多应用于HTML媒体元素比如：<embed>，<object>，<img>，<audio>和<video>。
课件资料?腾讯文档
月4日，由9秒社区和腾讯玩吧合作主办的HTML5游戏开发者大会在京召开，各路游戏精英相聚一堂，会上嘉宾就H5游戏的现状和未来发展进行了接地气、有干货的分享。
如果不是制作精良的，或者有着很好IP的产品，在现在的移动游戏市场中是难以存活的。近年来羽翼渐满的H5游戏则是一个新的市场延伸，并且有着越来越多的像白鹭、腾讯玩吧这样投入自身资源支持H5游戏开发者的公司出现，用自己的平台的资源，去助力推动这个行业的发展。
龙图游戏CEO杨圣辉表示，在自己不久前的日本之行中观察到，日本的H5游戏市场十分活跃，以H5游戏产品上市，或者成为核心业务板块的公司并不稀奇，并且收入规模非常之大，营收达到了上亿美金。H5游戏首先是一款游戏，所以核心玩法才是玩家的诉求。开发者需要思考的是如何在玩法上做出较大创新。而技术上的差别会为H5游戏带来更新的特色，对游戏本身有深刻理解、对核心玩法有深入研究的团体未来在该领域会有很大的作为。杨圣辉称，H5游戏更适合轻玩法，即使是重度玩家也需要有碎片化或者轻量的游戏，只有针对玩家诉求去做产品才是有效的途径。
QQ空间技术副总经理石玉磊在会上表示，今年4月腾讯玩吧的单款H5游戏已经超过200万月流水，虽然与传统手游相比在一定程度上还有些微不足道，但已经让很多人打消了H5游戏没有盈利的看法。这其中核心的数据每个月都会有20%以上的增涨，并且4个月就会翻倍。相比之下现在的传统手游市场，已是一片红海，“增长率不用说每个月增长20%，一年增长都不会有那么高，由此可以看出H5的确是一个蓝海。”
在综合了近年平台中的游戏数据后，腾讯玩吧发现了H5游戏的四大趋势：游戏品质逐步提升；游戏类型在多元化的发展；女性玩家市场巨大；社交渠道帮助拉新。并且梳理了游戏类型的数据变化，数据显示养成、对战、学习、休闲这四个游戏类型或将会是未来的爆款类型，石玉磊也表示腾讯玩吧将会加大对这四种类型游戏的扶持。
对于H5游戏开发者而言，社交渠道成为了获取用户的重要来源，所以H5游戏必须满足社交性，社交性是原生文化做到的能获取用户最大化的有效手段。
很多游戏需要通过广告来获得用户，但成本较高。相比之下社交渠道则是一个高质量低成本的好选择，“如果有一个好友在和你玩同一款游戏，那么通过QQ或微信给他发送游戏的情况，会起到较好的拉动作用，充分利用这样的渠道，对开发者来说将是一个高质量的低成本的，拉动新用户的好渠道。”石玉磊表示，为了提升次留存率和提升率，腾讯平台将向开发者开放包括登录体系、关系链数据、支付体系，以实现H5游戏的社交化，以此刺激玩家去支付，这个也是微信对关系链的一个很大的支持。
在会上DataEye的CEO汪祥斌还公布了《HTML5游戏Q2数据报告》报告中显示，2014年到2015年，移动游戏市场的整体收入规模增速在放缓，增速保持在10%至20%之间。数据表明，APP游戏的成本越来越高，未来的渠道也趋于饱和，已有达到天花板之势。而在移动用户增长方面，缘于H5本身具备入口宽泛、易推广等特征，未来H5游戏将是一个爆发点，2015年H5游戏用户将达到1.71亿。
在H5游戏Q2数据情况方面， Q2跟Q1相比整体数值差额不大。次日留存上，Q2为12.14%，比Q1的10.01%提高2.13个百分点。七日留存走势上，HQ2七日留存平均为4%左右，比Q1的3.02%的增加1.69个百分点。跳出率稳定在40%左右，40%就是比之前在2014年监测到就明显的好转，当时跳出率非常高，说明整个内容方面对玩家的吸引是相当不够的。ARPPU走势上，Q1约13.27元，Q2约14.11元，略有提升，但相对来说仍有提升空间。
对于此组数据，汪祥斌认为H5游戏首要解决的问题是高付费，“现有的H5游戏整体的付费情况是达不到要求的，高付费才能带来渠道对H5的一些推动，高付费是首先要解决的问题。”目前H5游戏的付费率相对偏低，Q1平均付费率大概1.35%，Q2为1.61%，数据相差不大。其中三个品类游戏在APP游戏里面属于高吸费的品类：角色扮演、棋牌以及模拟经营。模拟经营类游戏可以在最大限度发挥社交性，棋牌类游戏无论在原生还是H5，都是长期话题、受众广，“这三个品类值得H5游戏制作团队去关注。”
目前的H5还有着很大的掘金空间，但同时也面临着一些挑战。传统手游也好H5游戏也罢，只有对在游戏模式上超强的创新能力和以不断迈向精细化为目标，才可以成功。而这也正是如今游戏行业中所面临的最大的挑战，任何行业在发展过程中都存在机遇与巧战，在激烈的市场竞争中狭路相逢，只有“智”者才能生存。
*请认真填写需求信息，我们会在24小时内与您取得联系。
