2016年 最火的 15 款 HTML5 游戏引擎

当你开发基于HTML5的游戏时,你有很多选择。使用什么样的编辑器?是否用到Canvas
2d、WebGL?采用什么样的呈现框架和游戏引擎?这些选择大部分由开发者的个人经验和游戏将要发布的平台决定。

使用 HTML5,CSS3 和 Javascript
可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D
动画效果,Canvas,数学,颜色,声音,WebGL 等等。最明显的优势在于使用
HTML5 开发的游戏能在任何现代化流行的设备上运行。

HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年《传奇世界》更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于
2D 或者 3D
的场景。作为一名开发者,分析了当下最火爆,最热门的HTML5游戏引擎供大家参考,希望大家也能找到属于自己的那款游戏开发引擎。

幸运的是,有关HTML5游戏开发的指南现在已经有很多了。而这篇文章则是要告诉开发者在开发HTML5游戏以前应该具备的一些全局概念。你能从这篇
文章中学到什么?这里会介绍HTML5游戏开发的一些框架,你将知道如何使你设计的游戏能够在更多的平台上运行,了解如何管理在线游戏的状态,如何处理性
能问题。

某些游戏引擎仅仅是一个抽象的层次,就简单处理一些或者更多的繁杂游戏开发任务;其他只是注重
asset 加载,输入,物理效果,音频,sprite
地图和动画,而且相当多样化。还有一些引擎架构极其简单,只包括一个 2D
水平的编辑器和调试工具。

我在github上面收集了四十多款的HTML5开源游戏引擎,从里面star、fork等等参数分析其流行度,最后综合各方面元素,筛选出靠前的十五款(包含三款非开源游戏引擎)

话不多说,现在就开始介绍HTML5游戏开发的几条实用建议。

大部分的游戏引擎都能提高游戏开发的效率,即使是创建全功能型的游戏。但是,也有一些开发者为了能更好的理解游戏的每个组件,喜欢从头开始创作。现
在基于 Javascript-HTML5
的游戏引擎也不少,这是好事,同时,也是个坏事,因为事实上大多数开发出来的产品都没人维护,或者即将停止维护。所以,选择某一游戏引擎需要仔细考虑的就
是该引擎在未来几年是否会继续维护,更新,进行功能增强。

奥门新浦京官方网站 1image.png奥门新浦京官方网站 2image.png

建议1:使用框架

如果只是用HTML5编写一些小程序其实非常简单,但如果想往你的游戏中加入更丰富的功能,那么就有许多其他的事情需要处理了。

比如,如果你的游戏中有大量的图片、音效或是其他的资源,那么浏览器需要从你的游戏服务器上下载这些资源,这往往需要花费很多的时间。如果你在
编写程序的时候没有考虑这些问题,那么你也许会对最后的结果感到意外。由于图形和声音文件都是异步下载的,也许在你的资源下载好以前你的
JavaScript脚步已经开始运行了。这就是所谓的“爆音”现象(图像显示异常),而声音也可能在错误的时间播放。一个好的解决方法就是创建一个预先
下载机制,保证所有的资源下载完以后才允许脚本执行。

另一个你可能碰到的问题就是你的游戏在不同的机器甚至是浏览器中运行的速度有所不同。虽然这也许在你的控制范围以外,但你还是可以尽量使得你的动画或是动作的速度不依赖于游戏运行框架的速度。

其实,现在有许多的游戏模板代码,里面实现了大多数游戏需要的功能。这样,开发者不需要从头到尾编写一个完整的游戏程序。现在有许多框架可以帮助开发者设计游戏,开发者只用关注具体的游戏逻辑,而不用担心如何使游戏顺畅运行这些细节问题。

使用框架时唯一需要注意的一点就是如何从众多的框架中挑选一个合适的框架。像ImpactJS这样的框架功能非常强大,几乎可以在各个
方面为开发者提供帮助;而像EaselJS的框架则主要是处理图形方面的工作。最后,还是需要由开发者决定使用哪种框架更加合适。这看起来似乎很简单,但
在JavaScript的世界里面,选择一个框架时也意味着你选择了一种特定的编程风格。

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

Monster=ig.Entity.extend({eyes :
42});});ImpactJS就是一个很好的例子,它不仅提供了图像显示和音效处理的方法,还在实现中插入了自己的对象和模型。

奥门新浦京官方网站 3

Ascended Arcade三个月内发开了三款游戏,全部使用的是ImpactJS的框架

虽然现在已经有很多HTML5游戏使用了一些框架,但是还是有很多开发者不嫌麻烦地选择不依赖任何框架完全自己开发。如果你想在合理的时间内完
成任务,使用框架当然是最有效的方法。Ascended
Arcade就是一个很好的例子,在短短三个月的时间里,他们就开发出了三个游戏,全部使用了ImpactJS框架。

在这篇文章中,我们经过各种资料探寻,测试,实际应用等方法,收集了专门提供给开发者的20
款免费的 JavaScript 游戏引擎, Enjoy!

Construct
2是一个运行于Windows平台的游戏制作工具,它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台(Windows、Mac、Linux、Android、iOS等)的游戏。免费版可以将游戏导出成HTML5。收费版本分为个人版和企业版,可以导出所有平台的版本,同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元,需要升级到企业版。

奥门新浦京官方网站,建议2:将小屏幕和触屏设备考虑在内

HTML5最大的卖点之一就是它既能在桌面PC上使用,也能在笔记本电脑、平板设备甚至是智能手机上运行。(这里有IE9在Windows
Phone 7 Mango上的运行效果演示)。

HTML5与生俱来就具备了跨平台的特性,通常为开发者节省了很多工作。然而,有些事情是需要开发者考虑的…

奥门新浦京官方网站 4

SpyChase在Windows Phone 7 Mango上的运行效果

首先也是最重要的一点,不同的设备屏幕的尺寸也有所不同,屏幕的宽高比以及分辨率可能有很大的差别。如果想让你的HTML5在移动设备上拥有良
好的效果,确保它支持多种分辨率并且不超过WVGA的800×480框架大小。此外,由于大多数的移动设备无法在一个屏幕上显示所有的页面内容,他们常常
采用精确的缩放和平移技术,而这些技术通常并不适用于游戏的编写。可以在编程的时候使用viewport
meta标志禁用这些功能。下面的代码片段可以用来使你的游戏视图根据屏幕的实际水平宽度自动调节。移动浏览器上的缩放功能常常与触控游戏控制功能产生冲
突,可以将“user-scaleable”参数设置为“no”,从而禁用浏览器的缩放功能。

现在你已经能够将你的游戏视图很好地呈现在小屏幕设备上了,接下来就该考虑如何处理用户输入的问题了。大多数触屏设备都有一个虚拟键盘,但是在
玩游戏的时候显示一个虚拟键盘实在太浪费空间了。你应该开发一个有限的虚拟键盘,只提供游戏中使用到的按键(比如箭头)。当然,最好是尽可能在游戏中不需
要使用额外的元素。Spy
Chase在这方面做得很好,用户只用一个手指就能控制游戏中的汽车了。

1. Crafty

奥门新浦京官方网站 5image

建议3:自动保存用户的记录

使用 site pinning,web浏览器试图让Web
Apps可以像桌面apps一样工作。但是,让网站像Apps一样运行的想法还比较新鲜,同样的,让Web页面保存客户端的状态也尚未成熟。用户在关闭
Microsoft
Word的文档时可能会思考一下内容是否已经保存,而在关闭Web页面时往往不会这么仔细了。通常这并不会带来什么问题——大多数的Web页面是没有状态
的,或者是将用户的记录保存在了服务器上。

但如果是处理浏览器游戏,情况就完全不同了。通常在客户端执行的是JavaScript代码,HTML5游戏通常将游戏的状态缓存在内存中(RAM)。一旦关闭浏览器窗口,用户辛辛苦苦赢得的高分就永远地丢失了。

你可以要求用户小心一点,不要将正在进行的游戏窗口关闭,但是意外总是会发生的,尤其是当用户开了多个窗口或是电池没电的时候。

长话短说:在编写HTML5游戏时,最好是经常将游戏玩家的进度状态保存一下,当用户重新打开关闭的web页面时,应该让用户可以继续之前没有结束的游戏而不是重头来过。

你应该将用户的记录保存在哪里呢?过去,答案往往是服务器端的数据库或是客户端的cookie。但是这两个都不是最佳的选择。如果是在服务器
端,则会产生额外的HTTP请求开销。如果是cookie的话,则可以保存记录的空间非常有限,并且cookie的寿命取决于浏览器的配置。

一个更有效的方法是使用HTML5 DOM storage。DOM
Storage提供了一个key-value存储(或是JavaScript定义的对象)的接口,可以为每个网站保存几兆的数据。使用起来非常方便,但是
在HTML5游戏中,你可能想要记录一些更加复杂的数据结构——这些DOM
storage本身可能并不支持。幸运的是,现在的JavaScript提供了一套机制帮助开发者将一组对象压缩成一些紧凑的符号,这就是JSON机制。
使用这套机制,DOM
storage可以保存任何格式的信息。下面的两个函数展示了如何使用HTML5 DOM
storage保存游戏状态以及ECMAScript5中的JSON功能:

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

奥门新浦京官方网站 6

特点:

简单直观,入门容易,无需编程也能做游戏,长处是开发射击及动作类的平面游戏,有丰富的英文资料。

建议4:使用profiler

游戏开发中最大的挑战是在加入许多功能以后,如何保证游戏仍然具有高的帧显示频率。

好的消息是近几年来,浏览器的速度越来越快了,基于HTML5的游戏已经可以达到每秒60帧了。

这是非常了不起的。对IE9来说,这意味着开发了一个全新的JavaScript引擎,能够利用多CPU内核以及基于Direct2D的硬件渲染管道。换言之,如果你配备了高配置的游戏平台,IE9就能充分地利用这些硬件平台。

奥门新浦京官方网站 7

IE9整合了JavaScript分析器,能够发现性能瓶颈

对于简单的游戏,这意味着你不必担心它的性能问题。但由于HTML5可以运行在任何平台上,这意味着你发开的HTML5游戏应该能够运行在任何
一个设备或是浏览器上,其中有些设备或浏览器的处理能力可能并没有你希望的那么快。即使你的应用只针对高性能的PC,游戏的性能也是一个不得不考虑的问
题。

如果你要求你的游戏达到每秒60帧,这意味着每一帧的渲染时间不能超过16毫秒。也就是说,在你一眨眼的时间里面,你需要完成至少6帧的渲染工作。现在听起来可能有点难以想象…但是有些非凡的游戏确实能够做到。

幸运的是,这里有些工具可能能够帮助你。在IE9(或是IE10)上,通过按下F12按键可以打开开发工具面板。选择“Profile”选项然后选中“Start
profiling”。

现在在你觉得性能需要提升的地方停留30秒,profiler将收集相关数据,然后选择“stop
profiling”。你将看到你的游戏中的每个功能的累积执行时间。通常,你会发现某些功能占用了大部分的时间。这样你就能有针对性地优化那些特别耗时的功能了。

不要过分相信自己的直觉——有些代码可能看起来效率很低,但在某些JavaScript引擎上执行起来速度却很快。最好的办法就是时常地反复分析程序,对于修改过的代码,需要反复进行测试确保你的修改确实能够提升程序的性能。

奥门新浦京官方网站 8

游戏变得越来越社会化:Warimals是基于HTML5的游戏,用户可以与Facebook上的好友一起参与游戏

craftyJS 个轻量级的,模块化 JavaScript
游戏引擎,包括了许多组件:动画,事件管理,重新划分区域,碰撞检测,sprite
等等。它支持所有类型的浏览器,比如  IE9。不需要 dom
操作和自定义绘图程序。

优点:
  1. 支持多平台(Android,iOS,Windows)
  2. 简单易用、无需编程知识可以使用,可实时运行游戏;
  3. 提供了大量特效,支持物理效果,有开发者商城,在上面可以购买到各种开发插件和游戏素材;
  4. 强大的事件系统,可以不通过写代码来控制游戏逻辑;
  5. 提供了可编程扩展的接口,可以自己开发插件;
  6. 完整的文档以及社区支持。

建议5:要有创造性!

能够开发出在浏览器中运行的游戏是一件很棒的事情,而更酷的是可以使用HTML5在浏览器上开发游戏应用!从技术的角度看,HTML5是非常棒的,而浏览器也是非常理想的游戏平台。

想想看…各种不同的设备上都有浏览器,它们通常是时时在线的,它是人们接收邮件、聊天和社交网络的工具。浏览器游戏的开发者,可以利用自己开发的游戏将来自世界各地的人们联系在一起。

作为一个HTML5游戏开发者,你必须了解很多很酷的开发工具,在Mozilla社区中我们已经介绍了很多为Firefox开发者提供的开发工具,包
括JavaScript Debugger, Style Editor, Page Inspector, Scratchpad,
Profiler, Network Monitorand Web Console.

下面继续介绍一些HTML游戏开发的工具。

2. Quintus

缺点:
  1. 非开源,且中文教程极其匮乏;
  2. 由于网页,手机都是相对于电脑来说性能较低的硬件产品,所以需要开发者更好的运用系统资源,甚至在windows平台也是如此,因为其windows的输出格式也是利用Chrome浏览器的内核所做,也就是说本质上还是在浏览器上运行。

Canvas Debugger

在最新版本的firefox中,我们在浏览器中添加了Canvas调试。Canvas
Debugger允许你跟踪所有的canvas上下文调用,
像绘制元素和使用特定的调色器一样,它会根据具体的要求调用颜色编码。它不仅在开发基于WebGL的游戏时有用,它同时也可以用来测试基于Canvas
2D的游戏。
在下面的游戏中,你可以看到动画被分解成很多个静态图,你可以点击任意一行直接查看那一部分的响应。

奥门新浦京官方网站 9

奥门新浦京官方网站 10

点评:使用最多的HTML5商业引擎,更新快且开发者商城支持非常棒,推荐!**

Three.js 是一款运行在浏览器中的 3D
引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精采的演示。

奥门新浦京官方网站 11image

Phaser是一款专门用于桌面及移动HTML5
2D游戏开发的开源免费框架,提供JavaScript和TypeScript双重支持,内置游戏对象的物理属性,采用Pixi.js引擎以加快Canvas和WebGL渲染,基于浏览器支持可自由切换。快速、免费、易于维护,使用Phaser来开发2D小游戏的优势显而易见。一方面,开发者可以直接通过Koding平台上的VM开发系统进行代码编写及预览。另一方面,也可以在支持Canvas的浏览器中直接安装Phaser来进行游戏开发。

奥门新浦京官方网站 12image

Shader Editor

当你创建一个基于WebGL的游戏时,如果能在游戏运行时测试和修改着色器程序将是非常酷的一件事。使用Shader
Editor就可以做到这么酷的事情。你不需要重新加载界面就可以修改顶点和片段着色器,还可以查看其对输出结果的影响。

Quintus 引擎是个 HTML5 游戏引擎,模块化,轻量级,而且带有简洁的
Javascript 友好的语法。 Quintus 是一个易学,使用有趣的 JavaScript HTML5
游戏引擎,支持移动和桌面开发。包含一个模块化的引擎可轻松开发游戏,并在同一个页面上运行多个实例。 

主要特性:
  1. JavaScript、TypeScript双重支持
  2. 内置游戏对象的物理属性
  3. WebGL、Canvas渲染自由切换
  4. 完全支持Web音频
  5. 输入:多点触控、键盘、鼠标、MSPointer事件
  6. 除了IE
    9+、Firefox、Chrome、Safari及Opera等桌面浏览器之外,Phaser还支持Mobile
    Chrome(Android 2.2+)及Mobile
    Safari等移动浏览器。使用Phaser进行游戏开发没有任何语言设定,并且,在Phaser官网上,还提供了非常详细的开发指南,想要一探究竟的开发者不妨直接登陆Phaser查看。

Pixi.js是一款超快的开源HTML5
2D渲染引擎,使用带有Canvas回调功能的WebGL。作为JavaScript的2D渲染器,Pixi的目标是,可以提供一个快速且轻量级的2D库,并能兼容所有设备。此外,让开发者无需了解WebGL,就可以感受到硬件加速的力量。

奥门新浦京官方网站 13image

Web Audio Editor

在Firefox Aurora(32)版本中有一个Web Audio
Editor,这个编辑器通过图表展示了所有的音频结点和当前AudioContext的连接。你可以通过它查看每个结点的特定属性。Web
Audio
API提供了更多混音的创建,对音频的操作和处理比HTML5的Audio标签强大很多。

3. Gamequery

主要特性:
  1. 真正的跨平台:在今天,开发工具跨平台已经不是什么稀奇的事了。不过,Pixi.js则是一个可以兼容所有设备的超快HTML5
    2D渲染引擎,并且拥有canvas回调功能的WebGL,实现真正的跨平台。
  2. 交互式多点触控:Pixi不仅支持移动和平板设备,还具有完整的多点触控输入识别,让开发者可以发挥自己的能力去挖掘出它所有的潜力。
  3. WebGL过滤器:当使用WebGL时,Pixi允许你使用自己熟悉且现有的过滤器。当然,你也可以使用自己创建的独一无二的过滤器,比如自定位移和半色调效果。
  4. 着色和混合模式:对设计师来说,会很喜欢这个,Pixi.js允许用户着色和使用混合模式就像其他常见的视觉包比如Photoshop或Flash。
  5. 渲染器自动检测:这个算是Pixi的一大特色,虽然Pixi是主要作为WebGL
    2D渲染器而创建的,但仍支持非WebGL平台。其解决方案就是创建一个Canvas回调系统,只需一次编码,Pixi就可无缝管理回调。
  6. 简易API:设计直观,易于上手。
  7. 资源加载:精灵表单、图形、字体和动画数据等都可通过Pixi.js来加载和处理。
  8. 支持精灵表单(Sprite sheet)。

Egret 游戏解决方案包含了开源免费的 HTML5 游戏引擎、Egret
项目开发工具集合、动画特效制作工具、原生多平台打包工具、高效的 HTML5
游戏应用加速器、以及支持多渠道的开放平台等。开发者可以通过Egret项目开发工具快速、高效的制作及开发游戏相关各类内容,加速器将游戏效果提高到与原生游戏相媲美的效果。制作后的游戏发布到开放平台后,有着优质的渠道资源可以将游戏推荐给更多的用户,使得游戏开发、发布、推广变为一体化内容。

奥门新浦京官方网站 14image

Network Monitor

对于HTML5游戏开发者来说,需要花费昂贵的代码来对游戏进行繁琐的测试。如果游戏是在手机设备中运行,可以使用Network
Monitor直观地看到所有的网络请求,系统耗时和类型大小等属性。

奥门新浦京官方网站 15

除此之外,你还可以通过Network Monitor直观地看到游戏的性能分析。

奥门新浦京官方网站 16

奥门新浦京官方网站 17

主要特性:
  1. 基于TypeScript及JavaScript技术,支持Flash到Egret高效转换,引擎、工具、运行时完整工作流
  2. 跨平台:HTML5,iOS,Android,Windows Phone
  3. 全中文文档:文档与开发者社区齐全
  4. 开源免费,BSD开源协议、任意定制及扩展

Enchant.js 是个简单的 JavaScript 框架,可以使用 HTML5 和 JavaScript
来开发简单的游戏和应用。现在还是由 UEI 的 Akihabara
研究中心来开发和维护。在线演示

奥门新浦京官方网站 18image

Crafty是一个体积小、简单、轻量级的2D的HTML5游戏引擎,它提供了通过Canvas或DOM来绘制实体,提供了精灵Map以及SAT高级碰撞监测支持。它是由个人(Louis
Stowasser)创建,同时由Github上的一些开发者共同开发。

奥门新浦京官方网站 19image

Web IDE

开发游戏之前你必须先选择一个开发环境,同样,你有很多种选择(Sublime,Eclipse,Dreamweaver,vi等等),重要的是你肯
定已经有一款常用的开发环境了。如果你对浏览器端的开发环境感兴趣,你可以试一下Web
IDE,它已经在Firefox的最新版本中上线了。

奥门新浦京官方网站 20

Web IDE不仅提供开发者进行正常的编码,还可以远程发布、调试、框架管理等。

gameQuery  是 个易于使用的 jQuery
插件,可以通过添加相关游戏的类来帮助开发 Javascript 游戏,自从它使用 DOM
操作代替了 Canvas gameQuery
,现在可以兼容大量的浏览器,即使是比较旧的版本:Firefox, Chrome,
Internet Explorer, Safari, Safari for iOS, mobile versions of Webkit 和
Opera。
 

优点
  1. 体积小
  2. 轻量级引擎,不会受到框架的太多束缚
  3. 同时支持PC和移动平台浏览器

Turbulenz是一个开源的HTML5游戏引擎,提供了可以运行在Windows、MacOS、Linux上的SDK,允许开发人员创建高质量和硬件加速的2D、3D游戏。包括以下功能:异步资源加载、进行特效和粒子渲染、支持物理效果、碰撞检测以及动画、3D音效支持、支持网络交互以及社交网络分享、场景和资源的管理。

奥门新浦京官方网站 21image

4. GMP

优点:
  1. 功能强大,同时支持2D和3D2. 基于MIT协议的开源引擎

cocos2d-js是一款基于Cocos2d-x
API的2D开源免费HTML5游戏引擎。它目前通过canvas进行渲染,将来会支持WebGL。它由国内Cocos2d-x核心团队主导开发和维护,行业领袖、HTML5大力推动者Google为这个项目提供支持。同时,Zynga、Google等大公司的工程师也参与到它的设计工作中。

奥门新浦京官方网站 22image

奥门新浦京官方网站 23

优点:
  1. 与Cocos2d的API类似,容易上手
  2. 中文文档齐全,资料丰富
  3. 基于MIT协议的开源引擎

PlayCanvas是一个基于 WebGL游戏引擎
的企业级开源JavaScript框架,它有许多的开发工具能帮你快速创建3D游戏。PlayCanvas.js由一个专业社区创建,最初并不是开源的,但现在你可以在github上fork
PlayCanvas.js,然后在你的下一个3D游戏项目中免费使用。它还提供了能在浏览器中云心的云编辑器,开始使用PalyCanvas和导航到编辑器的URL一样容易。

奥门新浦京官方网站 24image

melonJS是一个全新、轻量级,基于精灵的2D游戏引擎。兼容所有支持HTML5览器包括:Chrome、Safari、Firefox、Opera。支持多声道。提供基本物理和碰撞机制(以确保CPU的要求低),一组基础的实体对象。支持补间动画效果。一个状态管理器(可以轻松管理加载,菜单,选项和在游戏画面状态的开关)。提供一些基本的GUI元素。一个可定制的加载器。

奥门新浦京官方网站 25image

Quintus是一款易于上手、轻量级、开源的HTML5
JavaScript游戏引擎,包含一个模块化的引擎可轻松开发游戏,并在同一个页面上运行多个实例,支持桌面及移动平台浏览器。Quintus引用面向对象的思想来进行HTML5游戏开发,同时依赖于jQuery来提供事件处理机制和元素选取操作。

奥门新浦京官方网站 26image

ImpactJS是一个基于JavaScript的HTML5游戏引擎,同时支持PC和移动平台浏览器。它是目前除了Construct2之外最受欢迎的HTML5游戏引擎,使用需要支付99美元。

奥门新浦京官方网站 27image

ImpactJS 曾经风靡一时,使用ImpactJS
开发的Z-Type该游戏被国外很多网站评选为二十款优秀游戏之一。

GMP  是个杰出的制作基于 sprite ,2D 游戏的引擎。它可以很容易就设计出最
retro 风格的街机游戏,同时也是很好的制作游戏的工具比如 sudoku 和
gogopop)。在线演示 

优点:
  1. 提供了灵活的关卡编辑器,可以快速构建游戏地图
  2. 提供了强大的调试工具
  3. 提供了Ejecta可以将JavaScript的执行结果通过OpenGL渲染出来,可以在iOS平台上获得与原生应用相近的效率
  4. 文档齐全,有两本专门介绍ImpactJS开发的书
  5. 支持物理效果
  6. 支持自己编写插件来扩展

5. lycheeJS

缺点:

1.非开源,且中文教程极其匮乏;2.更新慢,功能不够强大;

GameMaker与Construct
2类似,都是一个游戏制作工具,可以导出到各个平台运行,分为免费版、标准版、专业版和大师版。其中免费版只能导出Mac和Windows版本,导出HTML5需要大师版或者专业版(再额外支付99.99美元)。

奥门新浦京官方网站 28image奥门新浦京官方网站 29image

奥门新浦京官方网站 30

优点和缺点:

优势与Construct2类似,但性价比不如Construct2高

Hilo,一套HTML5跨终端的互动游戏解决方案开源啦!。Hilo支持了多届淘宝&天猫狂欢城等双十一大型和日常营销活动。内核极简,提供包括DOM,Canvas,Flash,WebGL等多种渲染方案,满足全终端和性能要求。

奥门新浦京官方网站 31image

lycheeJS 是个 JavaScript 游戏库,提供完整的原型解决方案和 HTML5 Canvas
部署,在 Web 浏览器或者原生环境的WebGL 或者是基于原生 OpenGL(ES)
的游戏。这个项目的开发过程优化了 Google Chrome 和它自身的开发工具。
 

主要特性:
  1. 极简内核:
    Hilo核心模块极精简,保留了2D游戏引擎最必要的模块,同时采用模块化管理。
  2. 完善接入&扩展: Hilo
    支持多种模块范式的包装版本,包括AMD,CMD,Standalone多种方式接入。另外,你可以新增和扩展需要的模块和类型。
  3. 多种渲染方式:提供DOM,Canvas,Flash,WebGL等多种渲染方案,可以做到跨全端,高性能的要求。
  4. 完善的周边工具:提供动画编辑器
    ,Yeoman脚手架及典型案例产出的辅助开发工具。
  5. 案例丰富:
    支持天猫,手淘多次大型和日常活动,如双十一,年中大促等。代表产品如狂欢城。

本文参考数据来自:1.Github2.html5gameengine

文章来自:2016年 最火的 15 款 HTML5 游戏引擎

6. Enchant.js

奥门新浦京官方网站 32

Enchant.js  是个简单的 JavaScript 框架,可以使用 HTML5 和 JavaScript
来开发简单的游戏和应用。现在还是由 UEI 的 Akihabara
研究中心来开发和维护。在线演示 

7. Starlingjs

奥门新浦京官方网站 33

Starling Starling 是在 Stage3D APIs 基础上开发的一种 ActionScript 3 2D
框架可用于 Flash Player 11 和 Adobe AIR 3的桌面)。 Starling
是为游戏开发设计的,但是你可以将它应用于很多其它的应用程序。
在不必涉及低级 Stage3D APIs 情况下,Starling 使得编写具有快速 GPU
加速功能的应用程序成为可能。 

8. The Render Engine

奥门新浦京官方网站 34

The Render Engine 是个跨浏览器的,开源游戏引擎,完全使用 JavaScript
编写。它拥有一个扩展的 API
和使用当前最新的现代浏览器特性。此款引擎旨在帮助用户使用基础的工具来开发游戏,加快游戏概念到成品的过程。

9. Akihabara

奥门新浦京官方网站 35

akihabara 是一系列的库和工具,可以预置创建 pixelated indie-style
8/16-bit era games ,使用 JavaScript , HTML5 canvas 标签和一些标准
hooks 开发。

10. JsGameSoup

奥门新浦京官方网站 36

Js Gamesoup 是个开源免费的软件框架,使用 JavaScript 和其他开放 web
技术来开发游戏:

Modular -可独立工作的 JavaScript 文件组件

使用开放的 web 技术: Canvas 和 HTML5.

支持 Firefox (Gecko), Safari/Chrome (WebKit), Internet Explorer 6+,
Android 和  iOS

HTML5,CSS3 和 Javascript
可以帮助面向对象开发者开发拥有各种特性的游戏,比如:3D
动画效果,Canvas,数学,颜色,声音,WebGL 等等。…

发表评论

电子邮件地址不会被公开。 必填项已用*标注