HTML5游戏引擎深度测评

  • 时间:
  • 浏览:0

最近看一遍网上一篇文章,标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的处理方案因为着非常多,但谁好谁差却如此对比性资料。特意花了几天时间,针对文章中冒出的12款免费开源引擎做了一次相对全版的对比分析,希望能对我门 有所帮助。

所有引擎编写的代码大致相同,现在现在开始英文做for循环,创建定量显示对象,但会 在循环中对每个显示对象做旋转操作。

Pixi.js

设计理念

通常情况下,我门 时会选用另另一个资料较全的产品进行学习使用,毕竟使用过程中会遇到各种各样的问题图片。现在游戏引擎的文档,讨论组等都因为着成为了产品标配。下面或多或少表格就对各个引擎的什么“标配”做另另一个对比。

正向上面这行代码,Phaser为我门 定义了 preload 、 create 、 update 等依据,使用时只时要填写callback函数即可。在资源加载时,Phaser会为你调用 preload 回调。 当画面刷新时,时要调用 update 回调。

鉴于支持游戏开发和APP开发,或多或少框架必定会顾全或多或少东西,不到在游戏方面放开手脚。采集上,没讲所有的元素全版按照OOP依据设计,内部管理使用实践驱动,并有效的结合了异步处理。游戏方面则仅仅对动画相关功能做了支持。enchant.js框架提供了一套插件机制,你时要将使用到的功能模块作为插件注入到enchant.js框架中。

功能

melonJS

最后放出一张测试时效果图

Quintus

功能

功能

因为着框架的定位,craftyJS在设计上提供了或多或少系统级别支持,同类将canvas和Dom一种渲染依据封装为同一套API,尽量小的文件体积,实体组件系统,显示对象封装,碰撞检测,事件系统,还有什么都有有功能组件模块。所有的模块都依赖于实体组件系统的设计。

最终统计结果如下:

设计理念

Phaser和Pixi.js一样,如此提供任何工具支持,在其官网上什么都有有推荐了另另一个代码编辑器。还提供了另另一个简单的在线代码编辑器。

不能自己看出,Egret 和 Cocos2D-js联合瓜分了大每段市场。而Egret占比甜得过半,达到58%。看来Egret在国内HTML5游戏市场还是非常强悍的。

Three.js

采集是一门大学问,对于开源引擎架构的设计模式主要取决于作者的任务管理器运行哲学观点和产品定位。将设计思路和功能放上共同对比讨论,比单独功能讨论更有参考意义。另另一个引擎的功能从不太满越好,功能应围绕引擎定位而定,另另另一个的思路在或多或少引擎中体现尤为明显,下面我门 针对每个引擎一一分析。

Turbulenz

定位

craftyJS也如此提供任何工具支撑,仅仅是另另一个开源代码库。

enchant.js还特意提供了另另一个在线的图像库,方便开发者免费使用其中的素材。当从游戏效果来看,以小游戏居多。

设计理念

Hilo功能相对比较简单,对于游戏开发来说,缺失功能较多。

Egret Wing:Egret出品的另另一个IDE编辑器。在提供代码编辑功能的共同,还内置可视化的UI编辑器。与Egret Engine中的GUI、EUI框架配合使用。

定位

Phaser功能众多,但绝大每段应用或多或少第三方作为实现。

从上面对比表格时要看出,绝大每段引擎在文档教程方面做的还是比较深入的,但完成程度不同。大每段都为英文文档,对于国内的开发者来说因为着学习起来成本略高。其中另另一个支持中文的引擎Egret、Hilo均为国人产品,这两款引擎在文档方面,Egret做的相当优秀,开发者时要从它的edn.egret.com中查阅血块中文资料。

结论

设计理念

设计理念

cocos2d-js是喊着Cocos2D-X的金钥匙出身的,它仅仅是Cocos2D-X的另另一个HTML5实现的分支。

Pixi.js的设计理念什么都有有程度来源于它的定位,只做渲染器,要把渲染功能做到最强。而另另另一个的定位,则会让Pixi.js成为或多或少引擎的渲染内核。你一直能看一遍或多或少游戏引擎,因为着产品都基于Pixi.js而开发。

我的电脑配置如下:

cocos2d-js的功能提供的相当全版,你在游戏中时要的功能几乎都都都可不可不都都可以找到。

第一名:Pixi.js 和 Turbulenz

第二名:Egret

第三名:Cocos2d-js

第四名:Hilo

第五名:enchant.js

第六名:melonJS

Quintus如此提供任何工具支撑。

enchant.js

我用了国内比较火的HTML5游戏平台新浪微博作为数据采样基础,另4买车人其实精力有限,不因为着做的全版。因为着客户端对游戏地址进行了加密,无法直接获取。什么都有有用了或多或少调试工具来看游戏网页的标记,以此判断游戏到底使用什么引擎制作。

Hilo

总结

Egret是否HTML5游戏引擎中的新起之秀,其定位已不单纯为HTML5游戏引擎。官方将其定位为“游戏处理方案”,共同也并未太满提及HTML5。究其因为在于Egret不仅仅提供了另另一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多附进产品,使其成为“处理方案”。

功能

定位

Egret

什么都有另一各自 第一眼看一遍Pixi.js官网,时会不自觉的认为这是一款游戏引擎。但在主页中作者对于Pixi.js的定义为“2D WebGL renderer with canvas fallback”,翻译为中文是一款依赖于canvas的WebGL渲染器。什么都有有当你看一遍Pixi.js提供了为数太满的功能时,请从不惊讶,因为着它什么都有有一款渲染器。

TextureMerger:另另一个纹理合并的小工具,功能有点像TexturePacker。

Pixi.js作为另另一个渲染器,其工具支持也是相当清爽,除了另另一个任务管理器运行库之外,如此提供任何工具。

一共找了1000款游戏,如上面表格。1000款引擎,使用纯HTML5开发的6款,使用Egret开发的1000款,Cocos2d-js的14款,laya的1款,createjs的1款。

最求极致的渲染性能是Pixi.js的首要任务,为了让Pixi.js更加易于使用,作者在API设计上更加参考非常性旺盛期的句子的句子是什么是什么 的句子是什么是什么 的2D渲染架构 —— Flash,但会 提供的API也尽量参考了ActionScript。

Three.js在设计之处希望创建另另一个非常轻量级的3D库,都都可不可不都都可以帮助开发者快速搭建基于HTML5的3D内容。共同,通过暴露简单的API,将3D内容的开发多样化性降至最低。

这每段对比是在商业产品应用中的占比情况。另另一个引擎被商业产品应用广泛的情况下,足以证明此引擎具备商业产品使用价值。通俗的讲,别人能用这玩意做出游戏,你都可不可不都都可以。什么都有有针对这两方面进行一下粗略的分析。

因为着引擎的功能不同,什么都有有涉及的工具也会有所差异,这里就不再做表对比了。

定位

游戏引擎中的功能,我门 时要细分非常多分类,一篇文章无法讲解所有分类细节讲解明白。我将所有功能做了另另一个二级分类,方便分析。

功能

cocos2d-js和Cocos2D-X的设计理念相同,你都都可不可不都都可以看一遍所有的API以及语法都全版参考Cocos2D-X。国内对于Cocos2D-X因为着非常了解,这里就不做太满介绍。

针对技术类产品对比,通常有多个维度进行对比,不仅仅是技术层面,还有或多或少非技术层面的内容会影响我门 的使用结果。本文从如下十几个 维度进行多重对比。

定位

对团队开发来讲,工作流搭建是非常重要的,我买车人比较看重这点。因为着是小型团队因为着买车人开发者因为着对此需求从不大。当项目规模变大时,另另一个好的工作流会事半功倍。

功能

Quintus将买车人定位为简单好用的JavaScript游戏引擎,共同支持移动和PC端。

测试代码如下:

PlayCanvas

结论

Cocos2d-js近年来变化很大,但对于JS或多或少分支的支持却少之又少。前一段时间新出了另另一个工具叫做Cocos Creator。我如此具体使用过,但看截图仿佛有Unity3D的影子。从介绍中看,应该对游戏支持还是不错的,编辑方面目前还欠缺。

因为着Turbulenz引擎更多的为买车人设计,更多的提供runtime支持,从严格意义上将,Turbulenz引擎是否否纯正的HTML5游戏引擎。为了满足其自身渠道的需求,Turbulenz引擎力求增加更加全版的功能,共同提高其运行性能。

因为着将买车人定位为游戏框架,什么都有有Phaser在游戏功能方面显得相当全面,你能想得到的绝大每段功能Phaser因为着替你实现了。在渲染方面,Phaser并如此买车人的渲染内核,什么都有有直接引用了Pixi.js。这其实是个明智之举,因为着Pixi.js在渲染性能方面非常强悍。前面因为着提及编程语言,游戏开发一种逻辑多样化,算法较多,Phaser提供对TypeScript的支持也是非常明知的。

melonJS在所有的功能设计上全版都是轻量级的,你时要看一遍什么都有有功能,但会 在此基础之上搭建你买车人所时要的功能模块。melonJS对于Tiled Map支持非常好,在兼容性方面也是melonJS关注的重点。

Turbulenz在你下载的目录蕴藏 晒 了什么都有有工具,大每段与格式转换相关。所有工具均为命令含小工具,如此提供任何可视化操作软件支持。

定位

同类创建另另一个显示对象,在Pixi.js中被封装为 PIXI.Sprite。因为着时要显示图像,借助 PIXI.PIXI.Texture纹理进行渲染数据填充。最终设置显示对象的坐标,代码看起来就像下面另另另一个。

因为着Turbulenz对什么都有有功能做了扩展,共同推出Low Level API和 High Level API。这里不再对其中庞杂的系统进行功能分析,我门 因为着有兴趣时要到其官网查看。

定位

我对国外的HTML5游戏市场全版不了解,或多或少市场分析的东西太满,不好做评价。就分析一下国内的,简单看一下到底哪个引擎用的多。

enchant.js框架自身提供的功能非常有限,因为着时要或多或少功能,时要买车人扩展因为着寻找响应的插件。

在实际测试中,craftyJS在API上的设计思路也是使用起来最为不舒服的另另一个。

功能

在Web游戏领域胜出的编程语言是JavaScript和TypeScript。但绝大每段HTML5游戏引擎还是采用JavaScript语言。不到4款引擎选用支持TypeScript。

3D从不出本篇文章的讨论范围之内,共同Three.js也从不游戏引擎,不地处游戏开发工作流一说。这里简单介绍一下Three.js所提供的在线编辑器。

Hilo如此提供任何工具支撑。

Turbulenz

enchant.js从不另另一个引擎,什么都有有另另一个框架。共同,enchant.js什么都有有仅仅用于游戏,时要用于app。

PlayCanvas也提供了另另一个在线编辑器,不过是针对它的3D功能。编辑器看上去和Three.js提供的在线编辑器份很同类。这里直接借用官方文档中的截图你时要们 看一下。

定位

Egret Inspector:另另一个基于Chrome浏览器的插件,时要针对Egret游戏进行调试。

或多或少方面,信号和插件系统是否Phaser的最大特色了。

最终测试结果

刻意将Pixi.js放上前面分析,因为着Phaser一种并如此买车人的渲染核心。就像Pixi.js的定位不一样,Phaser的定位是 "Desktop and Mobile HTML5 game framework",中为称之为“桌面与移动端的HTML5游戏框架”。Phaser从不把买车人定义为Engine,什么都有有框架。什么都有有,当你看一遍Phaser的功能设计和它的渲染内核时就不用经验了。

melonJS

Egret提供的工具非常多,也复合其处理方案的定位。在Egret整个体系下你时要看一遍如下工具支撑。

定位

DragonBones Pro:针对Egret中骨骼动画处理方案提供的DragonBones动画编辑器。

统计结果如下:

Pixi.js

其中craftyjs引擎渲染冒出问题图片,这里不作数据对比。

Quintus引擎不支持WebGL渲染模式,但会 这里页不作数据对比。

Phaser渲染内核使用Pixi.js,但会 Phaser渲染数据参考Pixi.js结果。

melonJS除了源码库以外,也如此提供任何工具支持。但在其官方主页中,蕴藏 十几个 或多或少编辑器的连接。比如著名的Tiled地图编辑器等。

craftyJS将买车人定义为针对JavaScript游戏的框架。

结论

从Hilo支持的形态上看,Hilo的设计思路更加偏向与前端开发者,而非游戏开发者。Hilo提供了多种模块范式的包装版本,实际上在满足不同前端开发者习惯。什么形态全版部都是前端工程师所偏好的内容,对于游戏来讲,什么内容因为着优先级从不最高,作为阿里内部管理团队的常用引擎,对于阿里来说应该非常大慨,应用场景做简单营销互动小游戏足以。

定位

var stage = new PIXI.Container(); var texture = PIXI.Texture.fromImage('bunny.jpg'); var bunny = new PIXI.Sprite(texture); bunny.position.x = 1000; bunny.position.y = 1000; stage.addChild(bunny); 

内核方面,Egret Engine采用了模块化的设计。另另另一个时要将不同的功能进行解耦。更加有趣的是,Flash中引以为傲的自动脏矩形技术在Egret Engine中也被实现。在canvas模式下,脏矩形会是渲染性能得到提升,比或多或少引擎更加有优势。

cocos2d-js

设计理念

时要从表格中看出,下面另另一个引擎属于2D和3D通吃类型。

设计理念

基于HTML5技术的游戏引擎,所时要的脚本必定是JavaScript,不到JavaScript脚本语言都可不可不都都可以运行于浏览器中。但目前市场上,冒出了什么都有有JavaScript代替品,同类TypeScript、CoffeeScript、LiveScript等等。不同语言直接的定位不同,语言哲学什么都有有尽相同。或多或少游戏引擎在语言选用上也颇有意思。

从上面的分析看出,Egret在工作流的支持上做的还是非常完成的,从Wing的代码编写,到ResDepot和TextureMerger的资源整合,再到Inspector调试,和原生打包。游戏开发过程中的每个环节基本全版都是工具支撑。

enchant.js

结果从不出乎意料,对于开源游戏引擎来讲,维护库什么都有有耗费作者很大一每段精力,更何况去制作编辑器同类的软件产品。什么都有有引擎时会依赖或多或少比较流行的第三方工具,同类Tiled、TexturePacker等等。其实时要实现功能,但整个工作流搭配起来还是多十几个 少会有或多或少问题图片。不到Egret和Cocos2D-js提供了相关可视化编辑工具。而这两对于工作流的理解则全版不同。从产品中不能自己看出,Cocos2D-JS更像Unity3D,提供另另一个大而全的软件给开发者用。Egret则是什么角色用什么工具,将产品按照角色划分,针对不同角色和开发流程中的各个环节进行产品设计。

Pixi.js中的显示架构全版参考Flash设计,所有显示对象组合为另另一个树状数据形态,但内部管理已针对WebGL渲染依据进行过优化,上层使用起来和Flash并无太满差别。

设计理念

性能测试上,我只针对2D游戏引擎做了另另一个渲染压力测试。

架构方面,Phaser进行非常多的厚度封装。就显示每段而言,因为着你使用过Pixi.js什么都有有发现,设计思路一种差别不大,但API使用起来则方便什么都有有。Phaser为一准备好了游戏所时要的一切。当我门 像创建另另一个游戏界面时,时要在Phaser初始化时针对不同阶段进行定制。

功能

文本主要想对2D游戏引擎做深入分析,所有如此对Three.js的功能与什么流行的3D引擎加以对比。

Phaser

enchant.js 如此提供任何工具支撑,在官网中也如此任何相关支持工具的介绍。

渲染环境上,Three.js支持WebGL和CCS3D一种渲染模式。从当前使用量和标准普及程度来做分析看,开发者更加倾向于WebGL渲染依据。

这里单独分析Egret Engine或多或少产品,其语言使用TypeScript,有2D和3D版本。在采集上,同Pixi.js一样,参考了Flash性旺盛期的句子的句子是什么是什么 的句子是什么是什么 的2D架构体系。API方面,也参考了ActionScript。不仅如此,因为着TypeScript的缘故,在事件系统中,也仿照ActionScript实现了 addEventListener 另另另一个的事件注册机制。

设计理念

melonJS是另另一个轻量级的HTML5游戏框架,但会 通过插件机制扩展其功能。

测试内容为同屏渲染对象数量相同的情况下进行帧频数据对比,为了保证测试的公平性,我使用同一台电脑,相同版本的Chrome浏览器进行测试,游戏场景尺寸均为10000*10000,显示的图片也为同一张。每个引擎进行同屏100000、100000、100000个显示对象渲染。

相对来说,Egret的或多或少依据使得每个工具更加垂直,都都可不可不都都可以做的功能也更加深入,不用让工具显得臃肿。而Cocos Creator则力求全版,另另一个软件处理所有事情。

从当前前端技术圈环境分析,未来因为着什么都有有前端框架因为着引擎会推出响应的TypeScript语言分支,从AngularJS组阁 将使用TypeScript开发现在现在开始英文,TypeScript在很大程度上被前端认可。不得不说微软在开源圈或多或少仗打得漂亮。

Three.js项目创建时间是在2010年的4月24日,到目前位置,应该是否比较老牌的开源项目了。事实上Three.js定义从不另另一个游戏引擎。在Github主页中,作者很明确的定义了Three.js的定位,叫做“JavaScript 3D library”。它仅仅是另另一个基于JavaScript语言的3D库而已。当然,你时要用它来做任何事情,无论是游戏,还是炫酷的3D展示。

功能

游戏领域中,最直白的一种分类依据便是2D与3D的区分。通常我门 时会认为它们是游戏引擎领域两类不同的产品。原文中提及的引擎其实是当下最为流行的HTML5游戏引擎。什么都有有引擎属于2D、3D通吃类型,我门 通过另另一个表格进行对比。

按照上述测试依据,我门 时要对引擎性能排名做另另一个大致排列:

Turbulenz引擎实际上是为买车人的游戏渠道中的游戏提供的游戏引擎。因为着和自身渠道绑定,什么都有有在引擎中提供了什么都有有low level API。借助什么底层API,时要呼叫Turbulenz游戏渠道中的或多或少系统级别功能。

因为着你时要Flash,如此Egret Engine对你来说不时要太满的学习即可上手。

还有或多或少或多或少的工具,但定位与游戏开发不同,有兴趣时要去它的官网看。

Egret Engine因为着模块化设计的因为,将不同功能放上了不同模块中。什么模块以库的形式提供,下面表中是所有支持模块的总和,但不含平台API每段,同类微信API的封装。

在学习难度上,Egret是否最为简单的,无论从全版度还是中文普及度上。

设计理念

设计理念

Hilo或多或少引擎来源于阿里前端团队,从官网的主页上看,或多或少引擎的定位比较模糊。Hilo作为另另一个跨终端的互动小游戏处理方案,共同有称综合处理方案。从它的演变来看,Hilo属于阿里前端在实践总总结出来的一套工具库。整体引擎从不最初有计划设计构想。

Egret

Egret iOS & Android Support:这另另一个东西时要将你的HTML5游戏打包成原生APP。

craftyJS

编程语言

Hilo

ResDepot:这是个小工具,用来配置游戏资源加载表。因为着游戏资源多说说,用或多或少小工具拖拽一下就完成了。

cocos2d-js

定位

功能

2D与3D

PlayCanvas主要用于3D渲染,本文还是以2D讨论为主,对PlayCanvas的分析就不做太满分析。

定位

Quintus自身从不支持WebGL,共同提供的功能也较少,在Github中排名也很靠后。

功能

Three.js提供的在线编辑器应该是基于Three.js开发的,功能太满,但相当小巧。

Quintus设计为模块化和轻量化,尽量使用简洁友好的JavaScript语法。在JavaScript的API形态设计中,尽量使用标准的OOP模式。Quintus还借助了jQuery,并通过jQuery插件实现事件和另另一个选用器的语法。语言设计层面上Quintus如此设计限制使用传统的继承,这使得其中得组件模型更加容易被复用。