HTML5游戏引擎深度测评

  • 时间:
  • 浏览:0
  • 来源:大发5分6合_大发5分6合官网

刻意将Pixi.js放在前面分析,机会Phaser某种 并很难 当时人的渲染核心。就像Pixi.js的定位不一样,Phaser的定位是 "Desktop and Mobile HTML5 game framework",中为称之为“桌面与移动端的HTML5游戏框架”。Phaser未必把当时人定义为Engine,已经 框架。什么都有有,当你看多Phaser的功能设计和它的渲染内核时就不不经验了。

功能

最近看多网上一篇文章,标题叫做《2016年 最火的 15 款 HTML5 游戏引擎》。目前针对HTML5游戏的除理方案机会非常多,但谁好谁差却很难 对比性资料。特意花了几天时间,针对文章中出显的12款免费开源引擎做了一次相对完整性的对比分析,希望能对亲戚亲戚我们我们我们 都是所帮助。

ResDepot:这是个小工具,用来配置游戏资源加载表。机会游戏资源多搞笑的话,用你什儿 小工具拖拽一下就完成了。

Phaser和Pixi.js一样,很难 提供任何工具支持,在其官网上已经 推荐了一个多 代码编辑器。还提供了一个多 简单的在线代码编辑器。

定位

Egret否是HTML5游戏引擎中的新起之秀,其定位已不单纯为HTML5游戏引擎。官方将其定位为“游戏除理方案”,一块儿也并未很难 来不要 提及HTML5。究其意味在于Egret不仅仅提供了一个多 基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多付进 产品,使其成为“除理方案”。

PlayCanvas

按照上述测试法律措施,亲戚亲戚我们我们我们 都可不可否 对引擎性能排名做一个多 大致排列:

功能

Quintus很难 提供任何工具支撑。

结论

Three.js在设计之处希望创建一个多 非常轻量级的3D库,并能帮助开发者快速搭建基于HTML5的3D内容。一块儿,通过暴露简单的API,将3D内容的开发比较比较复杂降至最低。

基于HTML5技术的游戏引擎,所须要的脚本必定是JavaScript,并能JavaScript脚本语言并能运行于浏览器中。但目前市场上,出显了什么都有有JavaScript代替品,例如TypeScript、CoffeeScript、LiveScript等等。不同语言直接的定位不同,语言哲学已经 尽相同。什么都有有游戏引擎在语言选取上也颇有意思。

Phaser功能众多,但绝大累积应用什么都有有第三方作为实现。

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

正向后边这行代码,Phaser为亲戚亲戚我们我们我们 都定义了 preload 、 create 、 update 等法律措施,使用时只须要填写callback函数即可。在资源加载时,Phaser会为你调用 preload 回调。 当画面刷新时,可不可否 调用 update 回调。

Pixi.js中的显示架构完整性参考Flash设计,所有显示对象组合为一个多 树状数据底部形态,但外部已针对WebGL渲染法律措施进行过优化,上层使用起来和Flash并无很难 来不要 差别。

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

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

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

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

melonJS除了源码库以外,也很难 提供任何工具支持。但在其官方主页中,暗带有几个什么都有有编辑器的连接。比如著名的Tiled地图编辑器等。

设计理念

功能

功能

机会让你Flash,很难 Egret Engine对你来说不须要很难 来不要 的学习即可上手。

Phaser

编程语言

第一名:Pixi.js 和 Turbulenz

第二名:Egret

第三名:Cocos2d-js

第四名:Hilo

第五名:enchant.js

第六名:melonJS

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

设计理念

埋点是一门大学问,对于开源引擎架构的设计模式主要取决于作者的应用程序哲学观点和产品定位。将设计思路和功能放在一块儿对比讨论,比单独功能讨论更有参考意义。一个多 引擎的功能未必很难 多越好,功能应围绕引擎定位而定,曾经的思路在什么都有有引擎中体现尤为明显,下面亲戚亲戚我们我们我们 都针对每个引擎一一分析。

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

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

游戏引擎中的功能,亲戚亲戚我们我们我们 都可不可否 细分非常多分类,一篇文章无法讲解所有分类细节讲解明白。我将所有功能做了一个多 二级分类,方便分析。

设计理念

melonJS在所有的功能设计上都是轻量级的,让你看多什么都有有功能,已经 在此基础之上搭建你当时人所须要的功能模块。melonJS对于Tiled Map支持非常好,在兼容性方面也是melonJS关注的重点。

Turbulenz引擎实际上是为当时人的游戏渠道中的游戏提供的游戏引擎。机会和自身渠道绑定,什么都有有在引擎中提供了什么都有有low level API。借助什么底层API,可不可否 呼叫Turbulenz游戏渠道中的什么都有有系统级别功能。

melonJS

Turbulenz

enchant.js

Hilo

总结

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

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

Egret

定位

设计理念

Three.js提供的在线编辑器应该是基于Three.js开发的,功能很难 来不要 ,但相当小巧。

在Web游戏领域胜出的编程语言是JavaScript和TypeScript。但绝大累积HTML5游戏引擎还是采用JavaScript语言。并能4款引擎选取支持TypeScript。

Turbulenz在你下载的目录暗带有了什么都有有工具,大累积与格式转换相关。所有工具均为命令含小工具,很难 提供任何可视化操作软件支持。

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

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

功能

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

定位

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

设计理念

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

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

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

很难看出,Egret 和 Cocos2D-js联合瓜分了大累积市场。而Egret占比岂都是过半,达到58%。看来Egret在国内HTML5游戏市场还是非常强悍的。

enchant.js

功能

craftyJS也很难 提供任何工具支撑,仅仅是一个多 开源代码库。

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

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

功能

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

3D未必在本篇文章的讨论范围之内,一块儿Three.js也未必游戏引擎,不占据 游戏开发工作流一说。这里简单介绍一下Three.js所提供的在线编辑器。

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

Egret Inspector:一个多 基于Chrome浏览器的插件,可不可否 针对Egret游戏进行调试。

Pixi.js作为一个多 渲染器,其工具支持也是相当清爽,除了一个多 应用程序库之外,很难 提供任何工具。

结论

Hilo

enchant.js未必一个多 引擎,已经 一个多 框架。一块儿,enchant.js已经 仅仅用于游戏,还可不可否 用于app。

例如创建一个多 显示对象,在Pixi.js中被封装为 PIXI.Sprite。机会须要显示图像,借助 PIXI.PIXI.Texture纹理进行渲染数据填充。最终设置显示对象的坐标,代码看起来就像下面曾经。

功能

什么都有有方面,信号和插件系统否是Phaser的最大特色了。

Quintus将当时人定位为简单好用的JavaScript游戏引擎,一块儿支持移动和PC端。

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

Quintus自身未必支持WebGL,一块儿提供的功能也较少,在Github中排名也很靠后。

机会将当时人定位为游戏框架,什么都有有Phaser在游戏功能方面显得相当全面,你能想得到的绝大累积功能Phaser机会替你实现了。在渲染方面,Phaser并很难 当时人的渲染内核,已经 直接引用了Pixi.js。你什儿 太好是个明智之举,机会Pixi.js在渲染性能方面非常强悍。前面机会提及编程语言,游戏开发某种 逻辑比较复杂,算法较多,Phaser提供对TypeScript的支持也是非常明知的。

Three.js

Pixi.js

统计结果如下:

设计理念

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

功能

这里单独分析Egret Engine你什儿 产品,其语言使用TypeScript,有2D和3D版本。在埋点上,同Pixi.js一样,参考了Flash心智心智成熟是什么图片 图片 图片 图片 图片 图片 是什么的2D架构体系。API方面,也参考了ActionScript。不仅很难 ,机会TypeScript的缘故,在事件系统中,也仿照ActionScript实现了 addEventListener 曾经的事件注册机制。

cocos2d-js的功能提供的相当完整性,你在游戏中须要的功能几乎都并能找到。

设计理念

定位

Egret

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

定位

游戏领域中,最直白的某种 分类法律措施便是2D与3D的区分。通常亲戚亲戚我们我们我们 都都是认为它们是游戏引擎领域两类不同的产品。原文中提及的引擎人太好是当下最为流行的HTML5游戏引擎。什么都有有引擎属于2D、3D通吃类型,亲戚亲戚我们我们我们 都通过一个多 表格进行对比。

enchant.js框架自身提供的功能非常有限,机会须要什么都有有功能,须要当时人扩展机会寻找响应的插件。

melonJS

设计理念

最终统计结果如下:

从后边对比表格可不可否 看出,绝大累积引擎在文档教程方面做的还是比较深入的,但完成程度不同。大累积都为英文文档,对于国内的开发者来说机会学习起来成本略高。其中一个多 支持中文的引擎Egret、Hilo均为国人产品,这两款引擎在文档方面,Egret做的相当优秀,开发者可不可否 从它的edn.egret.com中查阅几瓶中文资料。

从当前前端技术圈环境分析,未来机会什么都有有前端框架机会引擎会推出响应的TypeScript语言分支,从AngularJS签署将使用TypeScript开发开始了了,TypeScript在很大程度上被前端认可。不得不说微软在开源圈你什儿 仗打得漂亮。

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

定位

设计理念

其中craftyjs引擎渲染出显什么的什么的问题 ,这里不作数据对比。

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

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

Pixi.js

我对国外的HTML5游戏市场完整性不了解,你什儿 市场分析的东西很难 来不要 ,不好做评价。就分析一下国内的,简单看一下到底哪个引擎用的多。

鉴于支持游戏开发和APP开发,你什儿 框架必定会顾全什么都有有东西,并能在游戏方面放开手脚。埋点上,没讲所有的元素完整性按照OOP法律措施设计,外部使用实践驱动,并有效的结合了异步除理。游戏方面则仅仅对动画相关功能做了支持。enchant.js框架提供了一套插件机制,让你将使用到的功能模块作为插件注入到enchant.js框架中。

设计理念

2D与3D

Egret Engine机会模块化设计的意味,将不同功能放在了不同模块中。什么模块以库的形式提供,下面表中是所有支持模块的总和,但不含平台API累积,例如微信API的封装。

Turbulenz

架构方面,Phaser进行非常多的深度1封装。就显示累积而言,机会你使用过Pixi.js已经 发现,设计思路某种 差别不大,但API使用起来则方便什么都有有。Phaser为一准备好了游戏所须要的一切。当亲戚亲戚我们我们我们 都像创建一个多 游戏界面时,可不可否 在Phaser初始化时针对不同阶段进行定制。

定位

craftyJS将当时人定义为针对JavaScript游戏的框架。

定位

相对来说,Egret的你什儿 法律措施使得每个工具更加垂直,并能做的功能也更加深入,不不让工具显得臃肿。而Cocos Creator则力求完整性,一个多 软件除理所有事情。

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

PlayCanvas也提供了一个多 在线编辑器,不过是针对它的3D功能。编辑器看上去和Three.js提供的在线编辑器份很例如。这里直接借用官方文档中的截图给亲戚亲戚我们我们我们 都看一下。

结论

什么都有其他同学第一眼看多Pixi.js官网,都是不自觉的认为这是一款游戏引擎。但在主页中作者对于Pixi.js的定义为“2D WebGL renderer with canvas fallback”,翻译为中文是一款依赖于canvas的WebGL渲染器。什么都有有当你看多Pixi.js提供了为数很难 来不要 的功能时,请未必惊讶,机会它已经 一款渲染器。

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

cocos2d-js

最终测试结果

cocos2d-js和Cocos2D-X的设计理念相同,你并能看多所有的API以及语法都完整性参考Cocos2D-X。国内对于Cocos2D-X机会非常了解,这里就不做很难 来不要 介绍。

定位

Hilo很难 提供任何工具支撑。

最求极致的渲染性能是Pixi.js的首要任务,为了让Pixi.js更加易于使用,作者在API设计上更加参考非常心智心智成熟是什么图片 图片 图片 图片 图片 图片 是什么的2D渲染架构 —— Flash,已经 提供的API也尽量参考了ActionScript。

定位

功能

Quintus

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

定位

机会Turbulenz对什么都有有功能做了扩展,一块儿推出Low Level API和 High Level API。这里不再对其中庞杂的系统进行功能分析,亲戚亲戚我们我们我们 都机会有兴趣可不可否 到其官网查看。

设计理念

我的电脑配置如下:

TextureMerger:一个多 纹理合并的小工具,功能不得劲像TexturePacker。

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

可不可否 从表格中看出,下面一个多 引擎属于2D和3D通吃类型。

机会Turbulenz引擎更多的为当时人设计,更多的提供runtime支持,从严格意义上将,Turbulenz引擎不否是纯正的HTML5游戏引擎。为了满足其自身渠道的需求,Turbulenz引擎力求增加更加完整性的功能,一块儿提高其运行性能。

还有什么都有有什么都有有的工具,但定位与游戏开发不同,有兴趣可不可否 去它的官网看。

Egret iOS & Android Support:你什儿 个 东西可不可否 将你的HTML5游戏打包成原生APP。

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

功能

定位

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

Pixi.js的设计理念什么都有有程度来源于它的定位,只做渲染器,要把渲染功能做到最强。而曾经的定位,则会让Pixi.js成为什么都有有引擎的渲染内核。你老并能看多什么都有有游戏引擎,机会产品都基于Pixi.js而开发。

通常状况下,亲戚亲戚我们我们我们 都都是选取一个多 资料较全的产品进行学习使用,毕竟使用过程中会遇到各种各样的什么的什么的问题 。现在游戏引擎的文档,讨论组等都机会成为了产品标配。下面你什儿 表格就对各个引擎的什么“标配”做一个多 对比。

cocos2d-js

测试代码如下:

craftyJS

我用了国内比较火的HTML5游戏平台新浪微博作为数据采样基础,一个多 人人太好精力有限,不机会做的完整性。机会客户端对游戏地址进行了加密,无法直接获取。什么都有有用了什么都有有调试工具来看游戏网页的标记,以此判断游戏到底使用什么引擎制作。

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