孩子被绑在父亲腰间，骑摩托车400多公里跋涉回家。
得知儿子即将与她团聚，老人感动的泣不成声。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　原生手游市场已是红海，腾讯、网易等寡头独霸天下，H5游戏市场成为下一个风口。据笔者所知，很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。
　　如何选择适合团队和项目的引擎，笔者通过学习和项目实践，总结微薄经验，供大家参考，非技术人员也可以将本篇内容作为引擎选择的重要关注点。
　　选择H5游戏引擎的主体步骤
　　1、阅读笔者本篇文章
　　2、深入了解文中所提引擎及相关资料
　　3、查看和体验引擎的商业案例
　　4、复杂DEMO的制作与性能对比测试
　　选择H5游戏引擎的思考维度
　　1、开发语言的支持
　　引擎的应用广度
　　设计理念
　　工作流支持力度
　　商业化成熟案例
　　学习资源与技术支持能力
　　性能，webGL模式远超Canvas数倍。DOM模式就不适合用于真正的游戏开发，更不用提。
　　3D方向，webGL模式理论上可以制作2D和3D游戏，Canvas和DOM模式下只能制作2D游戏。
　　1、选择H5游戏开发语言
　　拥有广泛开发者的H5游戏开发语言共有三种，分别为Flash AS3、Type、Java。其中Flash AS3、Type均属于面向对象的高级脚本语言，通过编译器将原项目代码编译成Java代码文件运行于浏览器之中，面向对象的高级语言无论是项目开发管理，还是项目开发的工具环境的成熟度都明显优于Java脚本语言，尤其是中大型项目方面，AS3等高级语言的效率会更高。
　　（图1）
　　2、引擎的未来延续能力
　　选择一个引擎，并不是简单的认为，满足眼前够用就可以了，引擎的未来延续能力也是很重要的，这个项目是2D，下个项目想开发3D，如果引擎不支持怎么办？去换个引擎？如果VR的机会来了，再想发布VR版本，这个引擎不支持，需要重新开发吗？等等问题，作为开发者尽可能要提前想好。
　　（图2）
　　通过上图，可以看出，即便是在支持webGL的H5引擎里，有只面向2D游戏的，也有只面向3D游戏的，同时支持2D、3D、VR的H5引擎，从目前看只有Layabox与Egret引擎。
　　3、性能是核心需求
　　性能是H5游戏面临的核心门槛，也是很多H5游戏不被专业玩家认可的重要原因之一。游戏卡顿，不流畅，这样的产品体验很难在激烈竞争中生存下来。
　　H5产业早期的普及阶段即将过去，游戏品质在迅速提高，品质中包括精细的美术和炫酷的动画等。在复杂的游戏项目面前，上述种种元素，其流畅体验度对游戏引擎是极大的考验。所以选择性能优秀的引擎是保证品质的最重要基础，一定要谨慎。
　　在游戏项目研发开始时，一定要先对复杂的模块做DEMO测试，特别是带背景滚动的游戏。比如横屏卷轴游戏，对帧数稳定性要求极高，如果满足不了性能上的需求，可能会带来眩晕、眼花、疲倦等不良体验。
　　（图3）
　　由于性能是游戏最核心的需求，笔者这里再多说一句，大型项目在系统复杂度、 UI复杂度、动画显示数量和种类等方面与小型游戏项目完全不在一个量级。会涉及到比小游戏更复杂的性能优化、内存管理、资源管理等需求，如果选择了小马拉大车的低性能引擎，项目夭折可能性非常大，除非最后项目开发者花大量时间自己优化引擎。所以性能差一点，就会导致结果差很多，不可主观想象。
　　与引擎的应用广度
　　随着H5游戏品质提升，在其他领域也具备一定的竞争力和价值，一次开发可发行各个领域版本，已成为日渐明确的需求，这里面包括发行原生APP手游和PC的flash页游需求，大统一的引擎时代即将来领。目前最火爆的H5游戏《传奇世界H5》据说有40%的收入来自PC网页。
　　发布PC页游时，由于PC浏览器目前对HTML5兼容性不足70%，用户损耗很大，页游联运平台可能会拒绝或放量很少，只有采用能同时发布Flash版本的引擎，才能解决这个问题。
　　（图4）
　　设计理念与定位
　　设计理念是个比较大的话题，也是个很重要的引擎选择因素，比如引擎是要专注移动端，还是要面向全平台多端游戏市场。是注重性能，还是注重工具链等等。深入了解不同引擎的理念与定位，才能更好的与游戏产品进行结合。
　　上图内容仅作参考，详情建议去各引擎官网深入了解。
　　工作流支持力度
　　作为商业级开源引擎，工具链的提供与支持也是一种选择考量要素，比如UI编辑器、粒子编辑器、骨骼编辑器、场景编辑器等等，如果引擎方直接提供或支持，那么将会较大的提升研发效率。
　　本文中提到的7个引擎，只有Egret、Layabox、Cocos2d-JS这三个引擎，在工具链方面提供足够全面的支撑。
　　是否有成熟的商业案例
　　怎么证明引擎是成熟的？一定要有成熟的商业案例，一般引擎的官网上都会有游戏案例介绍，我们在选择引擎之前要进行深入体验，包括：商业案例的数量、商业案例的种类、稳定性、流畅度（要在低端机里体验）、项目复杂度、项目相似度等。如果有一些大型成功案例背书会相对安全可靠些。
　　从目前的行业案例来看，Layabox引擎的MMORPG《醉西游》、重度动作游戏《猎刃2》、大型模拟经营游戏《梦幻家园》等无疑是H5引擎技术的最高水准代表作。但是从卡牌、挂机等类型的付费游戏总体数量来看，Egret引擎明显占优，充分说明该引擎的市场宣传力度更胜一筹。
　　学习资源与技术支持能力
　　页游移植产品的引擎选择
　　目前像《醉西游》等优秀H5产品是Flash页游或手游移植而成，移植类的产品在选用引擎时要注意，代码是否可以直接移植？如果可以，那将节省大量的开发成本。比如Flash AS3开发的2D或3D页游或手游，可以把逻辑与算法代码直接拷贝移植到Layabox引擎项目中，开发速度提高数倍。
　　写在最后
　　最后提醒一下，千万不要相信某些引擎的单方宣传，单纯滴笔者曾被坑的很伤~~ 所以，一定要花一点时间去研究实践，亲自制作DEMO去作一作对比，动手体验到的才是真理。
　　针对DEMO测试笔者有几点建议：
　　1、采用一个复杂的UI，特别是复杂列表，比如说没有分页的背包列表，背包里放上不同的道具图片，测试滑动时的流畅度，这块比较考验性能，元素越复杂，数据越多，尤其能对比出来性能上的差异。
　　2、包含最复杂战斗部分，不要写战斗逻辑代码，不然会花的时间太长，只需要把战斗相关的动画和复杂的元素放在场景中模拟即可，因为H5游戏性能瓶颈通常在于画面的显示。
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
CCTIME飞象网
1816文章数
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：『 不要让任何事情成为你不去学习的理由！』
【Cocos2d-HTML5 开发之一】新建HTML5项目及简单阐述与cocos2d/x引擎关系
本站文章均为
原创,转载务必在明显处注明：
转载自【黑米GameDev街区】 原文链接:
真的是有一段时间没写博了，这段时间呢，发生的事情真的挺多，另外自己呢也闲来做了一些自己的喜欢的东西，主要做的还是基于Mac系统的Cocoa框架的各种编辑器吧。（对了，今年初也出了自己第二本书）
废话少扯，最近又研究了下Cocos2d-HTML5相关引擎，其实说起HTML5，3、4年前Himi就接触过了，那时候的HTML5 Canvas
对我印象很深，但是不论当时还是现在对于HTML5绝大部分公司仍旧处于观望状态，我也不例外，无疑观望期间也不断的有引擎基于HTML5，例当前的Cocos2d-HTML5,还有以后基于Untiy3D的HTML5，这早晚的事情。总体来说，HTML5是个趋势，只是个时间的问题。
那么本篇呢，简单的叙述下Cocos2d-HTML5新创建一个项目过程以及与cocos2d/x之间的关系。
第一步：首先下载Cocos2d-html5的引擎，下载地址：
当前Himi下载的是最新的2.1.5 version.
第二步：解压引擎包，然后目录如下：
第三步：简单以 HelloHTML5World 项目为例，我们可以直接使用浏览器打开HelloHTML5World文件夹中的 index.html，即可运行此示例项目。
运行到浏览器中的效果如下:
运行效果如上，其实这是个错误效果图，先不要着急。（原因只是资源准备失败的原因，后续说明）
我们先不管这个问题，先看下整个的项目结构：(Himi使用的 TextMate 打开的)
简单叙述：
资源存放目录
js脚本存放目录(我们自己的项目源码目录)
3. build.xml : 对cocos2d引擎进行编译成js脚本形式所用文件
4. cocos2d.js: 对cocos2d引擎进行参数设置的配置文件
5. index.html: 对当前视图的配置文件
6. main.js : 主程序入口
那么很多读者疑惑如何下手？
其实很简单，大家可以理解，cocos2d-html5 引擎只是将cocos2d 引擎框架直接映射成应html5 api实现的过程，我们通过js语言书写cocos2d引擎代码的形式，完成cocos2d引擎形式代码掌管整个HTML5项目。大家直接按照写cocos2d/x的代码形式进行书写即可，但是语言要求js格式。
那么如何创建一个新的HTML5项目:
第一步：将cocos2d-html5 引擎目录下的HelloHTML5World 文件夹直接copy一份出来，然后文件名可自定义。
第二步：将引擎目录下的lib文件夹下的 Cocos2d-html5-v2.1.5.min.js 文件copy 到你第一步的项目文件夹下即可。
Cocos2d-html5-v2.1.5.min.js 文件的作用:将cocos2d引擎以HTML5 api形式映射的js库，供我们项目使用，如果你不copy这个项目到你的项目中，你无法运行。
大家疑惑为什么引擎下的 HelloHTML5World 项目下为什么不需要 ？ 其实这个示例项目采用的是相对引擎目录路径下的每个引擎类映射js来使用。如下图：
而这个Cocos2d-html5-v2.1.5.min.js 文件为什么有个min? 这个其实就是以前的Cocos2d-html5-v2.1.5.jsb.js ，简单理解就是将js代码进行一个压缩，将代码中的table 空格等都去除，节省其文件大小的一种形式。
第三步：直接使用浏览器运行项目下的index.html 即可。
当然这时候运行的效果如 HelloHTML5World 项目运行效果相同，此原因主要是由于资源加载收到浏览器限制，因此导致项目无法正常启动。
这个问题其实是浏览器防止被钓鱼、对AJAX的一种防护，而cocos2d-html5 引擎请求图片的方式则采用的就是AJAX.
因此我们解决此问题可以有两种方式：
本地安装web服务器， apache 等，将项目发布在web服务器上即可。
直接使用火狐浏览器进行调试，火狐浏览器是没有限制的。
如下是火狐浏览器运行的结果：
ok，一切正常，剩余的就交给大家了。
? 【Unreal Engine 】 ? 【React Native】 ? 【Cocos Creator】? 【Cocos2dx】? 【C2dx-Lua】
Himi’s Book
小广告先森
小广告先森HTML5游戏开发，为什么要选择cocos引擎？ - 新闻中心 - 电玩巴士
| | | | | | | | | | | |
HTML5游戏开发，为什么要选择cocos引擎？
作者：ad 来源：ad发布时间： 11:00:16
&&& HTML5热度持续飙升：相关数据显示，2014年，中国HTML5手游用户规模已经达到1.08亿人，今年，这一数据将变为1.59亿。而开发HTML5游戏，cocos引擎是开发者的第一选择，为什么这样讲呢？我们先从HTML5游戏大热的原因谈起。
娱乐需求碎片化
&&& 玩家为什么如此青睐HTML5游戏？主要原因是在移动互联网时代，玩家的娱乐需求更加碎片化，而HTML5游戏更符合这种娱乐趋势。以HTML5游戏《打飞机》为例，玩家的操作方式简单方便，为划屏控制，在攻击炮弹输出、爆炸特效、大技能效果等各方面都表现出色。点击“马上玩”在短短几秒就可跳转到游戏界面，准入门槛相当低。
&&& 玩家对HTML5游戏接受度非常之高，与此同时，手游的开发成本、营销成本居高不下，3D超重度游戏竞争非常惨烈，HTML5游戏则为开发者提供了一个发展出位的新思路。于是HTML5游戏占领玩家屏幕、获得开发者重视也不足为怪。
提前布局掌握主动
&&& Cocos引擎开发团队在移动互联网刚兴起之时，就准确预见到玩家习惯的改变，并深入分析开发者的现实需求，因此提前布局HTML5，掌握HTML5引擎发展的主动权。
&&& 早在2012年，Cocos引擎开发团队就在Google的赞助下开启HTML5分支，推出了Cocos?2d-HTML5版本，支持web游戏开发。在2013年初，Cocos引擎开发团队整合了Cocos?2d-HTML5和Cocos2d-x?JSB（JS脚本绑定方案）为统一产品线Cocos?2d-JS，提供跨全平台的能力，实现一次编码，全部平台发布。
&&& 4年沉淀带来的惊喜是，cocos可以为HTML5游戏开发提供一站式解决方案，拥抱最全的市场机遇。&&&& Cocos团队提供了完备的HTML5游戏开发工具，以支持开发者完成所有类型的HTML5游戏制作。开发者使用cocos游戏引擎，能够获得包括开源引擎、工具链、运行平台，以及渠道接入、测试分析、收付费在内的全方位服务，全新的All in One游戏开发模式清晰流畅，重新定义了无缝工作流，使开发者获得“一次开发，全平台运行”的高效游戏开发体验。
&&& 不仅降低开发成本，还能享受“一次开发，全平台运行”的开发体验， cocos引擎是HTML5游戏开发者值得依赖的好伙伴。
提升HTML5游戏开发价值
&&& Cocos团队一直关注开发者的盈利问题，在这个思路指导之下，不断提升引擎性能，同时积极与海内外巨头合作，帮助开发者更轻松更容易地实现游戏价值变现。
&&& 目前，基于Cocos研发的Cocos Play手机页游解决方案，支持HTML5游戏硬件加速，达到100%原始性能体验和品质，并已经与腾讯浏览器内核X5、百度浏览器内核T5，傲游浏览器等主流浏览器和超级App合作， 实现了打通用户、统计、支付、分享等环节的服务方式，切实拓宽了游戏流量入口，为开发者拓展了HTML5游戏的发布渠道，将盈利数额提升至最大化。
&&& 使用cocos引擎开发的HTML5游戏可无缝发布到原生游戏市场，并已经有月收入超过千万级别的作品，比如《变形金刚：崛起》、《航海王：启航》、《Big Fish Casino》、《仙侠道》、《三国杀传奇》等。
&&& 一年一度的China Joy即将在黄浦江畔拉开帷幕，面目一新的cocos引擎也将在BtoB馆与开发者见面，届时，开发者将实地了解cocos引擎在HTML5游戏开发方面的不俗表现。
责任编辑：胡博飞
太棒了！我要分享：2013年10月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
2013年10月 Web 开发大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。HTML5游戏引擎深度测评 - 简书
HTML5游戏引擎深度测评
最近看到网上一篇文章，标题叫做《》。目前针对HTML5游戏的解决方案已经非常多，但谁好谁差却没有对比性资料。特意花了几天时间，针对文章中出现的12款免费开源引擎做了一次相对完整的对比分析，希望能对大家有所帮助。
针对技术类产品对比，通常有多个维度进行对比，不仅仅是技术层面，还有许多非技术层面的内容会影响我们的使用结果。本文从如下几个维度进行多重对比。
设计理念&功能
2D与3D、编程语言对比
游戏领域中，最直白的一种分类方法便是2D与3D的区分。通常我们都会认为它们是游戏引擎领域两类不同的产品。原文中提及的引擎确实是当下最为流行的HTML5游戏引擎。很多引擎属于2D、3D通吃类型，我们通过一个表格进行对比。
基于HTML5技术的游戏引擎，所需要的脚本必定是JavaScript，只有JavaScript脚本语言才能运行于浏览器中。但目前市场上，出现了很多JavaScript代替品，例如TypeScript、CoffeeScript、LiveScript等等。不同语言直接的定位不同，语言哲学也不尽相同。一些游戏引擎在语言选择上也颇有意思。
JavaScript
TypeScript
enchant.js
cocos2d-js
PlayCanvas
可以从表格中看出，下面三个引擎属于2D和3D通吃类型。
PlayCanvas
在Web游戏领域胜出的编程语言是JavaScript和TypeScript。但绝大部分HTML5游戏引擎还是采用JavaScript语言。只有4款引擎选择支持TypeScript。
从当前前端技术圈环境分析，未来可能很多前端框架或者引擎会推出响应的TypeScript语言分支，从AngularJS宣布将使用TypeScript开发开始，TypeScript在很大程度上被前端认可。不得不说微软在开源圈这一仗打得漂亮。
设计理念&功能
架构设计是一门大学问，对于开源引擎架构的设计模式主要取决于作者的程序哲学观点和产品定位。将设计思路和功能放在一起对比讨论，比单独功能讨论更有参考意义。一个引擎的功能并非越多越好，功能应围绕引擎定位而定，这样的思路在一些引擎中体现尤为明显，下面我们针对每个引擎一一分析。
Three.js项目创建时间是在2010年的4月24日，到目前位置，应该算是比较老牌的开源项目了。事实上Three.js定义并非一个游戏引擎。在Github主页中，作者很明确的定义了Three.js的定位，叫做“JavaScript 3D library”。它仅仅是一个基于JavaScript语言的3D库而已。当然，你可以用它来做任何事情，无论是游戏，还是炫酷的3D展示。
Three.js在设计之处希望创建一个非常轻量级的3D库，能够帮助开发者快速搭建基于HTML5的3D内容。同时，通过暴露简单的API，将3D内容的开发复杂性降至最低。
渲染环境上，Three.js支持WebGL和CCS3D两种渲染模式。从当前使用量和标准普及程度来做分析看，开发者更加倾向于WebGL渲染方式。
文本主要想对2D游戏引擎做深入分析，所有没有对Three.js的功能与那些流行的3D引擎加以对比。
很多人第一眼看到Pixi.js官网，都会不自觉的认为这是一款游戏引擎。但在主页中作者对于Pixi.js的定义为“2D WebGL renderer with canvas fallback”，翻译为中文是一款依赖于canvas的WebGL渲染器。所以当你看到Pixi.js提供了为数不多的功能时，请不要惊讶，因为它只是一款渲染器。
Pixi.js的设计理念很多程度来源于它的定位，只做渲染器，要把渲染功能做到最强。而这样的定位，则会让Pixi.js成为其他引擎的渲染内核。你经常能看到一些游戏引擎，或者产品都基于Pixi.js而开发。
最求极致的渲染性能是Pixi.js的首要任务，为了让Pixi.js更加易于使用，作者在API设计上更加参考非常成熟的2D渲染架构 —— Flash，并且提供的API也尽量参考了ActionScript。
例如创建一个显示对象，在Pixi.js中被封装为 PIXI.Sprite。如果需要显示图像，借助 PIXI.PIXI.Texture纹理进行渲染数据填充。最终设置显示对象的坐标，代码看起来就像下面这样。
var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('bunny.jpg');
var bunny = new PIXI.Sprite(texture);
bunny.position.x = 80;
bunny.position.y = 60;
stage.addChild(bunny);
Pixi.js中的显示架构完全参考Flash设计，所有显示对象组合为一个树状数据结构，但内部已针对WebGL渲染方式进行过优化，上层使用起来和Flash并无太大差别。
游戏引擎中的功能，我们可以细分非常多分类，一篇文章无法讲解所有分类细节讲解明白。我将所有功能做了一个二级分类，方便分析。
刻意将Pixi.js放在前面分析，因为Phaser本身并没有自己的渲染核心。就像Pixi.js的定位不一样，Phaser的定位是 "Desktop and Mobile HTML5 game framework"，中为称之为“桌面与移动端的HTML5游戏框架”。Phaser并不把自己定义为Engine，而是框架。所以，当你看到Phaser的功能设计和它的渲染内核时就不会经验了。
因为将自己定位为游戏框架，所以Phaser在游戏功能方面显得相当全面，你能想得到的绝大部分功能Phaser已经替你实现了。在渲染方面，Phaser并没有自己的渲染内核，而是直接引用了Pixi.js。这确实是个明智之举，因为Pixi.js在渲染性能方面非常强悍。前面已经提及编程语言，游戏开发本身逻辑复杂，算法较多，Phaser提供对TypeScript的支持也是非常明知的。
架构方面，Phaser进行非常多的高度封装。就显示部分而言，如果你使用过Pixi.js就是发现，设计思路本身差别不大，但API使用起来则方便很多。Phaser为一准备好了游戏所需要的一切。当我们像创建一个游戏界面时，可以在Phaser初始化时针对不同阶段进行定制。
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
正向上面这行代码，Phaser为我们定义了 preload 、 create 、 update 等方法，使用时只需要填写callback函数即可。在资源加载时，Phaser会为你调用 preload 回调。 当画面刷新时，可以调用 update 回调。
其他方面，信号和插件系统算是Phaser的最大特色了。
Phaser功能众多，但绝大部分应用其他第三方作为实现。
Egret算是HTML5游戏引擎中的新起之秀，其定位已不单纯为HTML5游戏引擎。官方将其定位为“游戏解决方案”，同时也并未过多提及HTML5。究其原因在于Egret不仅仅提供了一个基于HTML5技术的游戏引擎，更是提供了原生打包工具和众多周边产品，使其成为“解决方案”。
这里单独分析Egret Engine这个产品，其语言使用TypeScript，有2D和3D版本。在架构设计上，同Pixi.js一样，参考了Flash成熟的2D架构体系。API方面，也参考了ActionScript。不仅如此，由于TypeScript的缘故，在事件系统中，也仿照ActionScript实现了 addEventListener 这样的事件注册机制。
内核方面，Egret Engine采用了模块化的设计。这样可以将不同的功能进行解耦。更加有趣的是，Flash中引以为傲的自动脏矩形技术在Egret Engine中也被实现。在canvas模式下，脏矩形会是渲染性能得到提升，比其他引擎更加有优势。
如果你会Flash，那么Egret Engine对你来说不需要过多的学习即可上手。
Egret Engine由于模块化设计的原因，将不同功能放到了不同模块中。这些模块以库的形式提供，下面表中是所有支持模块的总和，但不含平台API部分，例如微信API的封装。
enchant.js
enchant.js并非一个引擎，而是一个框架。同时，enchant.js也不仅仅用于游戏，还可以用于app。
鉴于支持游戏开发和APP开发，这个框架必定会顾全一些东西，不能在游戏方面放开手脚。架构设计上，没讲所有的元素全部按照OOP方式设计，内部使用实践驱动，并有效的结合了异步处理。游戏方面则仅仅对动画相关功能做了支持。enchant.js框架提供了一套插件机制，你可以将使用到的功能模块作为插件注入到enchant.js框架中。
enchant.js还特意提供了一个在线的图像库，方便开发者免费使用其中的素材。当从游戏效果来看，以小游戏居多。
enchant.js框架自身提供的功能非常有限，如果需要其他功能，必须自己扩展或者寻找响应的插件。
craftyJS将自己定义为针对JavaScript游戏的框架。
由于框架的定位，craftyJS在设计上提供了一些系统级别支持，例如将canvas和Dom两种渲染方式封装为同一套API，尽量小的文件体积，实体组件系统，显示对象封装，碰撞检测，事件系统，还有很多功能组件模块。所有的模块都依赖于实体组件系统的设计。
在实际测试中，craftyJS在API上的设计思路也是使用起来最为不舒服的一个。
Turbulenz引擎实际上是为自己的游戏渠道中的游戏提供的游戏引擎。因为和自身渠道绑定，所以在引擎中提供了很多low level API。借助这些底层API，可以呼叫Turbulenz游戏渠道中的一些系统级别功能。
由于Turbulenz引擎更多的为自己设计，更多的提供runtime支持，从严格意义上将，Turbulenz引擎不算是纯正的HTML5游戏引擎。为了满足其自身渠道的需求，Turbulenz引擎力求增加更加完整的功能，同时提高其运行性能。
由于Turbulenz对很多功能做了扩展，同时推出Low Level API和 High Level API。这里不再对其中庞杂的系统进行功能分析，大家如果有兴趣可以到其官网查看。
cocos2d-js
cocos2d-js是喊着Cocos2D-X的金钥匙出身的，它仅仅是Cocos2D-X的一个HTML5实现的分支。
cocos2d-js和Cocos2D-X的设计理念相同，你能够看到所有的API以及语法都完全参考Cocos2D-X。国内对于Cocos2D-X已经非常了解，这里就不做过多介绍。
cocos2d-js的功能提供的相当完整，你在游戏中需要的功能几乎都能够找到。
PlayCanvas
PlayCanvas主要用于3D渲染，本文还是以2D讨论为主，对PlayCanvas的分析就不做过多分析。
melonJS是一个轻量级的HTML5游戏框架，并且通过插件机制扩展其功能。
melonJS在所有的功能设计上都是轻量级的，你可以看到很多功能，并且在此基础之上搭建你自己所需要的功能模块。melonJS对于Tiled Map支持非常好，在兼容性方面也是melonJS关注的重点。
Quintus将自己定位为简单好用的JavaScript游戏引擎，同时支持移动和PC端。
Quintus设计为模块化和轻量化，尽量使用简洁友好的JavaScript语法。在JavaScript的API结构设计中，尽量使用标准的OOP模式。Quintus还借助了jQuery，并通过jQuery插件实现事件和一个选择器的语法。语言设计层面上Quintus没有设计限制使用传统的继承，这使得其中得组件模型更加容易被复用。
Quintus自身并不支持WebGL，同时提供的功能也较少，在Github中排名也很靠后。
Hilo这个引擎来源于阿里前端团队，从官网的主页上看，这个引擎的定位比较模糊。Hilo作为一个跨终端的互动小游戏解决方案，同时有称综合解决方案。从它的演变来看，Hilo属于阿里前端在实践总总结出来的一套工具库。整体引擎并非最初有计划设计构想。
从Hilo支持的特性上看，Hilo的设计思路更加偏向与前端开发者，而非游戏开发者。Hilo提供了多种模块范式的包装版本，实际上在满足不同前端开发者习惯。这些特性完全是前端工程师所偏好的内容，对于游戏来讲，这些内容可能优先级并非最高，作为阿里内部团队的常用引擎，对于阿里来说应该非常合适，应用场景做简单营销互动小游戏足以。
Hilo功能相对比较简单，对于游戏开发来说，缺失功能较多。
对团队开发来讲，工作流搭建是非常重要的，我个人比较看重这点。如果是小型团队或者个人开发者可能对此需求并不大。当项目规模变大时，一个好的工作流会事半功倍。
因为引擎的功能不同，所以涉及的工具也会有所差异，这里就不再做表对比了。
3D并不在本篇文章的讨论范围之内，同时Three.js也并非游戏引擎，不存在游戏开发工作流一说。这里简单介绍一下Three.js所提供的在线编辑器。
Three.js提供的在线编辑器应该是基于Three.js开发的，功能不多，但相当小巧。
Pixi.js作为一个渲染器，其工具支持也是相当清爽，除了一个程序库之外，没有提供任何工具。
Phaser和Pixi.js一样，没有提供任何工具支持，在其官网上只是推荐了两个代码编辑器。还提供了一个简单的在线代码编辑器。
Egret提供的工具非常多，也复合其解决方案的定位。在Egret整个体系下你可以看到如下工具支撑。
Egret Wing：Egret出品的一个IDE编辑器。在提供代码编辑功能的同时，还内置可视化的UI编辑器。与Egret Engine中的GUI、EUI框架配合使用。
ResDepot：这是个小工具，用来配置游戏资源加载表。如果游戏资源多的话，用这个小工具拖拽一下就完成了。
TextureMerger：一个纹理合并的小工具，功能有点像TexturePacker。
DragonBones Pro：针对Egret中骨骼动画解决方案提供的DragonBones动画编辑器。
Egret Inspector：一个基于Chrome浏览器的插件，可以针对Egret游戏进行调试。
Egret iOS & Android Support：这两个东西可以将你的HTML5游戏打包成原生APP。
还有一些其他的工具，但定位与游戏开发不同，有兴趣可以去它的官网看。
从上面的分析看出，Egret在工作流的支持上做的还是非常完成的，从Wing的代码编写，到ResDepot和TextureMerger的资源整合，再到Inspector调试，和原生打包。游戏开发过程中的每个环节基本都有工具支撑。
enchant.js
enchant.js 没有提供任何工具支撑，在官网中也没有任何相关支持工具的介绍。
craftyJS也没有提供任何工具支撑，仅仅是一个开源代码库。
Turbulenz在你下载的目录中包含了很多工具，大部分与格式转换相关。所有工具均为命令含小工具，没有提供任何可视化操作软件支持。
cocos2d-js
Cocos2d-js近年来变化很大，但对于JS这个分支的支持却少之又少。前一段时间新出了一个工具叫做Cocos Creator。我没有具体使用过，但看截图仿佛有Unity3D的影子。从介绍中看，应该对游戏支持还是不错的，编辑方面目前还欠缺。
PlayCanvas
PlayCanvas也提供了一个在线编辑器，不过是针对它的3D功能。编辑器看上去和Three.js提供的在线编辑器份很相似。这里直接借用官方文档中的截图给大家看一下。
melonJS除了源码库以外，也没有提供任何工具支持。但在其官方主页中，包含几个其他编辑器的连接。比如著名的Tiled地图编辑器等。
Quintus没有提供任何工具支撑。
Hilo没有提供任何工具支撑。
结果并不出乎意料，对于开源游戏引擎来讲，维护库就是耗费作者很大一部分精力，更何况去制作编辑器之类的软件产品。很多引擎都会依赖一些比较流行的第三方工具，例如Tiled、TexturePacker等等。虽然可以实现功能，但整个工作流搭配起来还是多多少少会有一些问题。只有Egret和Cocos2D-js提供了相关可视化编辑工具。而这两对于工作流的理解则完全不同。从产品中不难看出，Cocos2D-JS更像Unity3D，提供一个大而全的软件给开发者用。Egret则是什么角色用什么工具，将产品按照角色划分，针对不同角色和开发流程中的各个环节进行产品设计。
相对来说，Egret的这种方式使得每个工具更加垂直，能够做的功能也更加深入，不会让工具显得臃肿。而Cocos Creator则力求完整，一个软件解决所有事情。
性能测试上，我只针对2D游戏引擎做了一个渲染压力测试。
测试内容为同屏渲染对象数量相同的情况下进行帧频数据对比，为了保证测试的公平性，我使用同一台电脑，相同版本的Chrome浏览器进行测试，游戏场景尺寸均为800*600，显示的图片也为同一张。每个引擎进行同屏、20000个显示对象渲染。
其中craftyjs引擎渲染出现问题，这里不作数据对比。Quintus引擎不支持WebGL渲染模式，因此这里页不作数据对比。Phaser渲染内核使用Pixi.js，因此Phaser渲染数据参考Pixi.js结果。
所有引擎编写的代码大致相同，开始做for循环，创建定量显示对象，然后在循环中对每个显示对象做旋转操作。
测试代码如下：
var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('bunny.jpg');
var tnum = 5000;
console.log("render Object Number:",tnum);
var bunnys = [];
for(var i=0;i&i++)
var bunny = new PIXI.Sprite(texture);
bunny.position.x = Math.random()*800;
bunny.position.y = Math.random()*600;
stage.addChild(bunny);
bunnys.push(bunny);
animate();
function animate() {
requestAnimationFrame(animate);
for(var i=0;i&i++)
bunnys[i].rotation += 0.1;
renderer.render(stage);
class Main extends egret.DisplayObjectContainer {
public constructor() {
this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
private tnum:number = 100000;
private bunnys:egret.Bitmap[] = [];
private onAddToStage(event:egret.Event)
console.log("render Object Number:",this.tnum);
this.stage.dirtyRegionPolicy = egret.DirtyRegionPolicy.OFF;
RES.getResByUrl('resource/bunny.jpg',this.onComplete,this,RES.ResourceItem.TYPE_IMAGE);
private onComplete(event:any)
var img:egret.Texture = &egret.Texture&
for(var i:number=0;i&this.i++)
var bunny = new egret.Bitmap(img);
bunny.x = Math.random()*800;
bunny.y = Math.random()*600;
this.addChild(bunny);
this.bunnys.push(bunny);
this.addEventListener(egret.Event.ENTER_FRAME, this.animate,this);
private animate(evt:egret.Event)
for(var i:number=0;i&this.i++)
this.bunnys[i].rotation += 1;
enchant.js
enchant();
window.onload = function () {
var game = new Game(800, 600);
game.fps = 60;
game.preload('bunny.jpg');
game.onload = function() {
var tnum = 100000;
console.log("render Object Number:",tnum);
var bunnys = [];
var scene = new Scene();
game.pushScene(scene);
for(var i=0;i&i++)
var sprite = new Sprite(50, 50);
sprite.image = game.assets['bunny.jpg'];
sprite.x = Math.random()*800;
sprite.y = Math.random()*600;
scene.addChild(sprite);
bunnys.push(sprite);
game.addEventListener('enterframe', function() {
for(var i=0;i&i++)
bunnys[i].rotation += 1;
game.start();
TurbulenzEngine = WebGLTurbulenzEngine.create({
canvas: document.getElementById("canvas")
var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});
var draw2D = Draw2D.create({
graphicsDevice: graphicsDevice
var bgColor = [1.0, 1.0, 0.0, 1.0];
var tnum = 50000;
console.log("render Object Number:", tnum);
var bunnys = [];
for (var i = 0; i & i++) {
var sprite = Draw2DSprite.create({
width: 50,
height: 50,
x: Math.random() * 800,
y: Math.random() * 600,
color: [1.0, 1.0, 1.0, 1.0],
rotation: Math.PI / 4
bunnys.push(sprite);
var texture = graphicsDevice.createTexture({
src: "bunny2.jpg",
mipmaps: true,
onload: function (texture) {
if (texture) {
for (var i = 0; i & i++) {
var sprite = bunnys[i];
sprite.setTexture(texture);
sprite.setTextureRectangle([0, 0, texture.width, texture.height]);
var PI2 = Math.PI * 2;
var rotateAngle = PI2 / 360; // 1 deg per frame
function update() {
if (graphicsDevice.beginFrame()) {
graphicsDevice.clear(bgColor, 1.0);
draw2D.begin();
for (var i = 0; i & i++) {
var sprite = bunnys[i];
sprite.rotation += rotateA
sprite.rotation %= PI2; // Wrap rotation at PI * 2
draw2D.drawSprite(sprite);
draw2D.end();
graphicsDevice.endFrame();
function render() {
var tnum = 5000;
console.log("render Object Number:", tnum);
for (var i = 0; i & i++) {
sprite.position.x = Math.random() * 800;
sprite.position.y = Math.random() * 600;
cocos2d-js
window.onload = function(){
cc.game.onStart = function(){
//load resources
cc.LoaderScene.preload(["bunny.jpg"], function () {
var tnum = 100000;
console.log("render Object Number:",tnum);
var bunnys = [];
var MyScene = cc.Scene.extend({
onEnter:function () {
this._super();
var batchNode = cc.SpriteBatchNode.create("bunny.jpg");
this.addChild(batchNode);
for(var i=0;i&i++)
var sprite = cc.Sprite.create("bunny.jpg");
sprite.setPosition((Math.random()*800), (Math.random()*600));
batchNode.addChild(sprite);
bunnys.push(sprite);
this.scheduleUpdate();
update:function () {
for(var i=0;i&i++)
bunnys[i].setRotation(bunnys[i].getRotation()+1);
this.scheduleUpdate();
cc.director.runScene(new MyScene());
cc.game.run("gameCanvas");
var PlayScreen = me.ScreenObject.extend( {
onResetEvent: function() {
me.game.world.addChild(new me.ColorLayer("background", "#5E3F66", 0), 0);
for (var i = 0; i & 5000; i++) {
me.game.world.addChild(new Smilie(i), 3);
var Smilie = me.Sprite.extend({
init : function (i) {
this._super(
me.Sprite,
(-15).random(800),
(-15).random(600),
image: me.loader.getImage(game.assets[0].name)
,width : 50
,height : 50
this.rotation = 0;
this.alwaysUpdate =
update : function () {
this.rotation += 3/180*Math.PI;
this.angle = this.
function init(){
var stage = new Hilo.Stage({
renderType:'canvas',
container: gameContainer,
width: 800,
height: 600
var sum = 5000;
var bitmaps = [];
var ticker = new Hilo.Ticker();
ticker.addTick(stage);
ticker.start(true);
for(var i = 0; i & i++) {
var bmp = new Hilo.Bitmap({
image: 'images/hero.jpg',
rect: [0, 0, 50, 50],
x: Math.random()*800,
y: Math.random()*600
}).addTo(stage);
bitmaps.push(bmp);
function animate() {
requestAnimationFrame(animate);
for(var i = 0; i & i++) {
bitmaps[i].rotation += 0.1;
animate();
我的电脑配置如下：
最终测试结果
5000 Display
10000 Display
20000 Display
enchant.js
cocos2d-js
按照上述测试方法，我们可以对引擎性能排名做一个大致排列：
第一名：Pixi.js 和 Turbulenz第二名：Egret第三名：Cocos2d-js第四名：Hilo第五名：enchant.js第六名：melonJS
最后放出一张测试时效果图
通常情况下，我们都会选择一个资料较全的产品进行学习使用，毕竟使用过程中会遇到各种各样的问题。现在游戏引擎的文档，讨论组等都已经成为了产品标配。下面这个表格就对各个引擎的这些“标配”做一个对比。
API Document
enchant.js
cocos2d-js
PlayCanvas
从上面对比表格可以看出，绝大部分引擎在文档教程方面做的还是比较深入的，但完成程度不同。大部分都为英文文档，对于国内的开发者来说可能学习起来成本略高。其中两个支持中文的引擎Egret、Hilo均为国人产品，这两款引擎在文档方面，Egret做的相当优秀，开发者可以从它的中查阅大量中文资料。
在学习难度上，Egret算是最为简单的，无论从完整度还是中文普及度上。
这部分对比是在商业产品应用中的占比情况。一个引擎被商业产品应用广泛的情况下，足以证明此引擎具备商业产品使用价值。通俗的讲，别人能用这玩意做出游戏，你也能。所以针对这两方面进行一下粗略的分析。
我对国外的HTML5游戏市场完全不了解，这个市场分析的东西太大，不好做评价。就分析一下国内的，简单看一下到底哪个引擎用的多。
我用了国内比较火的HTML5游戏平台新浪微博作为数据采样基础，一个人实在精力有限，不可能做的完整。由于客户端对游戏地址进行了加密，无法直接获取。所以用了一些调试工具来看游戏网页的标记，以此判断游戏到底使用什么引擎制作。
最终统计结果如下：
CEO养成计划
边锋斗地主
上吧主公（萌喵闯三国）
呆呆忍者村
全民穿越之宫
召唤师学院
我欲封天H5
全民魔魔哒
我们的萌萌
全员加速中
悟空归来 – 西游神传
深海保卫战
大大大掌门
泡泡奥特曼
德州扑克H5
暴走大乱斗
经典玛丽h5
小鸟情人OL
少年，好功夫
秘密魔法花园
少女H计划2
一共找了50款游戏，如上面表格。50款引擎，使用纯HTML5开发的6款，使用Egret开发的30款，Cocos2d-js的14款，laya的1款，createjs的1款。
统计结果如下：
不难看出，Egret 和 Cocos2D-js联合瓜分了大部分市场。而Egret占比居然过半，达到58%。看来Egret在国内HTML5游戏市场还是非常强悍的。
Three.js：作为老牌的3D库，它已经有众多案例，在PC多网页3D中是目前不错的选择。
Phaser：文档教程，和案例方面都很不错，功能也算的上丰富。非常适合独立游戏开发和小团队使用。
Pixi.js：作为渲染器，其渲染性能绝对是非常优秀的，游戏功能方面支持很差，适合极客程序员把玩。
Egret：性能不错，在工作流方面支持非常优秀，适应中度和重度HTML5游戏开发，有较多商业项目验证，非常适合商业团队使用。
enchant.js：性能偏差，不太推荐。
craftyJS：文档教程等方面不太完善，很难找到对应技术支持，不推荐。
Turbulenz：性能极佳，但捆绑其自身业务，不太适合国内市场。
cocos2d-js：老牌引擎，其性能在排名中居中，工作流支持相对完整，推荐。
PlayCanvas：重度3D游戏开发引擎，本文不对3D做推荐。
melonJS：性能不理想，不推荐。
Quintus：不支持WebGL模式，性能较差，不推荐。
Hilo：阿里前端团队作品，偏向于前端开发工程师，与游戏专业开发距离较大，推荐做HTML5营销小交互的使用。