关于HTML5游戏引擎深度测评

最近看到网上一篇文章，标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的解决方案已经非常多，但谁好谁差却没有对比性资料。特意花了几天时间，针对文章中出现的12款免费开源引擎做了一次相对完整的对比分析，希望能对大家有所帮助。
　　针对技术类产品对比，通常有多个维度进行对比，不仅仅是技术层面，还有许多非技术层面的内容会影响我们的使用结果。本文从如下几个维度进行多重对比。
　　2D与3D编程语言设计理念&功能工作流性能学习资料商业应用
　　2D与3D、编程语言对比
　　2D与3D
　　游戏领域中，最直白的一种分类方法便是2D与3D的区分。通常我们都会认为它们是游戏引擎领域两类不同的产品。原文中提及的引擎确实是当下最为流行的HTML5游戏引擎。很多引擎属于2D、3D通吃类型，我们通过一个表格进行对比。
　　编程语言
　　基于HTML5技术的游戏引擎，所需要的脚本必定是Java，只有Java脚本语言才能运行于浏览器中。但目前市场上，出现了很多Java代替品，例如Type、Coffee、Live等等。不同语言直接的定位不同，语言哲学也不尽相同。一些游戏引擎在语言选择上也颇有意思。
　　Engine
　　2D Render
　　3D Render
　　Java
　　Type
　　Three.js NO YESYESNO
　　Phaser YESNO YESYES
　　Pixi.js YESNO YESYES
　　Egret YESYESNO YES
　　enchant.js YESNO YESNO
　　craftyJS YESNO YESNO
　　Turbulenz YESYESYESYES
　　cocos2d-js YESNO YESNO
　　PlayCanvas NO YESYESNO
　　melonJS YESNO YESNO
　　Quintus YESNO YESNO
　　Hilo YESNO YESNO
　　结论
　　可以从表格中看出，下面三个引擎属于2D和3D通吃类型。
　　EgretTurbulenzPlayCanvas
　　在Web游戏领域胜出的编程语言是Java和Type。但绝大部分HTML5游戏引擎还是采用Java语言。只有三款引擎选择支持Type。其中Egret做的最为彻底，仅支持Type，并未推出Java语言版本。
　　从当前前端技术圈环境分析，未来可能很多前端框架或者引擎会推出响应的Type语言分支，从AngularJS宣布将使用Type开发开始，Type在很大程度上被前端认可。不得不说微软在开源圈这一仗打得漂亮。
　　设计理念&功能
　　架构设计是一门大学问，对于开源引擎架构的设计模式主要取决于作者的程序哲学观点和产品定位。将设计思路和功能放在一起对比讨论，比单独功能讨论更有参考意义。一个引擎的功能并非越多越好，功能应围绕引擎定位而定，这样的思路在一些引擎中体现尤为明显，下面我们针对每个引擎一一分析。
　　Three.js
　　定位
　　Three.js项目创建时间是在2010年的4月24日，到目前位置，应该算是比较老牌的开源项目了。事实上Three.js定义并非一个游戏引擎。在Github主页中，作者很明确的定义了Three.js的定位，叫做“Java 3D library”。它仅仅是一个基于Java语言的3D库而已。当然，你可以用它来做任何事情，无论是游戏，还是炫酷的3D展示。
　　设计理念
　　Three.js在设计之处希望创建一个非常轻量级的3D库，能够帮助开发者快速搭建基于HTML5的3D内容。同时，通过暴露简单的API，将3D内容的开发复杂性降至最低。
　　渲染环境上，Three.js支持WebGL和CCS3D两种渲染模式。从当前使用量和标准普及程度来做分析看，开发者更加倾向于WebGL渲染方式。
　　功能
　　文本主要想对2D游戏引擎做深入分析，所有没有对Three.js的功能与那些流行的3D引擎加以对比。
　　Pixi.js
　　定位
　　很多人第一眼看到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也尽量参考了Action。
　　例如创建一个显示对象，在Pixi.js中被封装为 PIXI.Sprite。如果需要显示图像，借助 PIXI.PIXI.Texture纹理进行渲染数据填充。最终设置显示对象的坐标，代码看起来就像下面这样。
　　varstage = newPIXI.Container（）; vartexture = PIXI.Texture.fromImage（‘bunny.jpg’）; varbunny = newPIXI.Sprite（texture）; bunny.position.x = 80; bunny.position.y = 60; stage.addChild（bunny）;