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

结语

现在市场上的
H5游戏引擎很多,很难去直接定义哪个引擎的好坏,只能说每个引擎都有自己的特性,在某方面跟项目的契合程度比较高,笔者根据现在市场上比较热门的几大引擎做了几点比较,希望能给刚入门的你做技术选型的时候有一点帮助,找到适合项目的引擎,更快、更准、更高效率地完成项目需求。

感谢各位耐心读完,希望能有所收获,有考虑不足的地方欢迎留言指出。

如果对「H5游戏开发」感兴趣,欢迎关注我们的专栏。

2 赞 3 收藏 1
评论

图片 1

缺点:

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

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

图片 2image图片 3image

Cocos2d-html5

我们很高兴地宣布,Cocos2d HTML5 Alpha 发布了! 效果:http://cocos2d-x.org/cocos2d-html5/tests/index.html 这是第一个版本的Cocos2d-HTML5。 Cocos2d-X的功能和测试用例,大多数都在cocos2d HTML5实现。 Cocos2d-HTML5目前,利用画布渲染,API是Cocos…更多Cocos2d-html5信息

最近更新: Cocos2d-html5 2.0 发布 发布于 3年前

游戏场景分类

在刚接到游戏需求时,我们可以从以下几个方面进行考量,分析出游戏需求场景所属,从而作为我们选择游戏引擎的依据。

  • 游戏效果呈现方式( 2D ? 3D ? VR ?)
    这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有
    2D 渲染、3D 渲染、VR 渲染三种。
    而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom
    由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对
    Canvas 和 WebGL 展开介绍。
    一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas
    渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择
    WebGL 渲染或者浏览器内嵌 Runtime 。
  • 游戏复杂度
    这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。
主要特性:
  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项目开发工具快速、高效的制作及开发游戏相关各类内容,加速器将游戏效果提高到与原生游戏相媲美的效果。制作后的游戏发布到开放平台后,有着优质的渠道资源可以将游戏推荐给更多的用户,使得游戏开发、发布、推广变为一体化内容。

图片 4image

JavaScript 动画和游戏库Collie

Collie 是一个 JavaScript 库可以帮你使用 HTML5 创建高度优化的动画和游戏,Collie 支持 PC 和移动设备,使用 HTML5 Canvas 和 DOM。更多Collie信息

最近更新: Collie —— JavaScript 动画和游戏库 发布于 2年前

PlayCanvas

从渲染支持程度来看,PlayCanvas 不仅支持 3D WebGL渲染,同时保持到 VR
的支持,拥有比较好的拓展性。在工具流的支持上,提供了在线编辑器和发布托管等服务。从官方教程上看,教程也是比较详细的。

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

HTML5 游戏框架EntityJS

Entity 是一个全新的 JavaScript 游戏引擎,特点是灵活、可重用以及稳定,支持所有主流浏览器,同时很快将支持移动浏览器。 在线演示:http://entityjs.com/games更多EntityJS信息

前言

很多刚刚接触到游戏开发,准备大展拳脚的小鲜肉们,往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐,官网上相关资料也比较少,而选择一个适合的游戏引擎是一个项目最基础,也是很核心的一部分。
试想一下,在游戏开发进行到中后期的时候,才发现项目引入的游戏引擎与需求相悖,这时候不管是重新做一些修修补补的工作或者更换游戏引擎,这都是相当耗费人力物力的一件事。为了避免这种情况的出现,在前期选择适合项目需求的游戏引擎显得尤为重要。
接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。

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

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

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

Cocos2d-javascript

Cocos2d-javascript 是基于cocos2d-iphone 的 2D 的游戏/图形引擎。 在线演示:http://cocos2d-javascript.org/demo?demo=mario更多Cocos2d-javascript信息

Hilo

Hilo
是阿里团队推出的一个开源项目,支持模块化开发,同时提供了多种模块范式的包装版本和跨终端解决方案,适合用来开发营销小游戏。其体积也是比较轻量的,只有70kb左右。Hilo
支持 DOM 渲染,Canvas 渲染和 WebGL 渲染,同时集成了 Hilo Audio, Hilo
Preload。其后推出的 Hilo 3D 也是其亮点之一。

图片 5image

HTML5游戏引擎gibdo

Gibdo 是一个至上而下的 2D 的 HTML5 Canvas 游戏引擎,采用 CoffeeScript 编写,主要特性包括: A scrolling view window that tracks the player across the game world. View limit detection to allow the player to move off the centre of the scree…更多gibdo信息

Egret

图片 6

Egret 周边产品

白鹭引擎是企业级游戏引擎,有团队维护。Egret
在工作流的支持上做的是比较好的,从 Wing 的代码编写,到 ResDepot 和
TextureMerger 的资源整合,再到 Inspector 调试,最后到原生打包(支持 APP
打包),游戏开发过程中的每个环节基本都有工具支撑。官网上的示例,教程也是比较多。值得一提的是,今年5月白鹭引擎支持了
WebAssembly ,这对于性能的提升又是一大里程碑。

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

HTML5 游戏开发框架Phaser

Phaser 是一个开源的桌面和移动 HTML5 2D 游戏开发框架,支持 JavaScript 和 TypeScript。 更多Phaser信息

最近更新: 65 行 JavaScript 代码实现 Flappy Bird 游戏 发布于 1年前

Phaser

Phaser 在渲染方面直接封装了 Pixi;架构方面,Phaser
内嵌了3个物理引擎(Arcade
Physics、Ninja、p2.js),提供粒子系统、动画、预下载和设备适配方案;兼容性方面,Phaser
的焦点是放在移动端浏览器上的;API 方面,Phaser
能实现丰富的游戏功能,适合复杂度高的游戏开发。

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

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

图片 7image

HTML5游戏引擎Turbulenz

Turbulenz 是开源 HTML5游戏引擎,该项目基于MIT许可证。Turbulenz允许所有构建基块的开发人员创建高质量和硬件加速的2D、3D游戏,该项目可适用于多个平台包括手机、平板及Web;提供给了易于安装的SDK,支持Windows、Mac OS X、GNU/Linux等系统。…更多Turbulenz信息

LayaAir

在渲染模式上,LayaAir 支持 Canvas 和 WebGL
两种方式;在工具流的支持程度上,主要是提供了 LayaAir IDE。LayaAir IDE
包括代码模式与设计模式,支持代码开发与美术设计分离,内置了 SWF
转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。

下图是主要支持2D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Pixi.js YES YES NO NO 16.8k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
依赖于canvas的WebGL渲染器
Phaser YES YES NO NO 16.9k(最新更2017.07)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供在线编辑器Phaser Sandbox
CreateJs YES YES NO NO 6.5k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 有博客
官方推荐TweenJS,SoundJS,PreloadJS配合使用
Hilo YES YES YES(Hilo3D) NO 4.2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
提供资源下载和管理工具 阿里巴巴集团推出,适合开发营销小游戏,以Chipmunk为2D物理引擎,与主流物理引擎兼容
Cocos2d-x YES YES NO NO 11.2k(最新更新2017.12)
▪ 有中文文档
▪ js例子不多,c++例子较多
▪ 社区活跃
Cocos Creator编辑器,打包工具等 提供的功能相当完整
lufylegend.js YES NO NO NO 0.4k(最新更新2016.03)
▪ 有中文文档
▪ 社区活跃
仿ActionScript3.0的语法,支持Google Chrome,Firefox,Opera,IE9,IOS,Android等多种热门环境,可以配合Box2dWeb制作物理游戏,内置了LTweenLite缓动类等
特点:

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

动画引擎平台GreenSock Animation Platform

Flash业界久负盛名的动画引擎(TweenLite等)GreenSock推出了新一代动画引擎平台GreenSock Animation Platform,最棒的是包括JS版本!      //JS版本  <script type="text/javascript" src="js/TweenMax.min.js"></script>  var photo = document.ge…更多GreenSock Animation Platform信息

Pixi.js

一般来说,WebGL 的渲染速度都会比 Canvas
快,这是由俩者的绘制路径决定的。Pixi 最大的特点在于,Pixi 具有完整的
WebGL 支持,却并不要求开发者掌握 WebGL
的相关知识,并在需要时无缝地回退到 Canvas
。相较于很多同类产品,它的渲染能力是比较强大的。然而,Pixi
也有不足的地方,Pixi
对于动画的支持是比较缺乏的,在实际开发中,常常需要引进额外的动画库,如
GSAP。

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

轻量级的HTML5游戏引擎melonJS

melonJS 是我们过去实验的结果,是一个开放、自由而且使用简单的HTML网页游戏开发包。虽然还有一个大工作正在进行中,melonJS已经可以轻松地创建一些不错的游戏。 melonJS 集成了流行的砖块地图格式,可使用 Tiled map editor 所编辑的地图,你只需要把精力…更多melonJS信息

Three.js

图片 8

Three.js 示例案例

相信对于很多有关注 3D 游戏的开发者来说,Three.js
早已经耳熟能详了。实际上,Three.js 官方定位并不是游戏引擎,而是一个 JS
3D 库。Three.js 更倾向于展示型的视觉呈现,比较少直接拿 Three.js 来开发
H5 游戏。渲染环境上,Three.js 支持 WebGL 和 CSS3D 两种渲染模式。

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

HTML5 游戏引擎Quintus

Quintus 是一个易学,使用有趣的 JavaScript HTML5 游戏引擎,支持移动和桌面开发。包含一个模块化的引擎可轻松开发游戏,并在同一个页面上运行多个实例。更多Quintus信息

CreateJS

图片 9

CreateJs 周边产品

CreateJS 官方提供了 TweenJS 支持动画开发,同时通过 SoundJS 和 PreLoadJS
提供了音频和预下载的支持,对于 H5
游戏基础功能的支持是足够的。在兼容性方面,CreateJS 支持 PC
端和移动端几乎所有的浏览器。此外,CreateJS 还支持用 flash CC 开发导出由
CreateJS 渲染的 H5 游戏。

优点和缺点:

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

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

图片 10image

JavaScript 游戏引擎LycheeJS

LycheeJS 是一个环境无关的 JavaScript 游戏引擎,理论上只要支持 JavaScript 就可以使用该引擎。当然主要还是为支持 HTML5 的浏览器而生。更多LycheeJS信息

lufylegend.js

lufylegend.js
的最新更新是在16年,不过其社区还是十分活跃的,如果遇到什么开发问题,可以很方便地在社区上找到解决的方案。lufylegend.js
可以支持基础的游戏功能,但是其可拓展性不是很强。

主要支持3D游戏的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Three.js NO NO YES(倾向) NO 37.6k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
默认Ammo.js为默认物理引擎,基于JavaScript语言的3D库,耗性能,加载慢,效果一般
PlayCanvas NO NO YES YES 3k(最新更新2017.12)
▪ 英文文档
▪ 例子充足
▪ 英文社区
提供了在线编辑器,发布托管等 教程较为详细,入门快
优点
  1. 体积小
  2. 轻量级引擎,不会受到框架的太多束缚
  3. 同时支持PC和移动平台浏览器

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

图片 11image

jQuery游戏引擎gameQuery

一提起“游戏引擎”这个词,我们可能会很快想到Irrlicht、Panda3D、jME (爪哇猴子引擎)等等,但是今天我要给大家介绍一个基于jQuery的游戏引擎 — GameQuery。什么?jQuery还能开发游戏?是的,不过注意GameQuery不是一个具体的游戏,他是一个开源游戏引…更多gameQuery信息

转载来源:


Cocos2d-x

Cocos2d-x 是业界比较老牌的游戏引擎了,同时支持 C++ ,Lua 和 JavaScript
三种开发语言,官方用例来看更倾向于 C++
开发,适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator
游戏开发工具,组件化,脚本化,数据驱动,跨平台发布。

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

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

图片 12image

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

图片 13image

JavaScript 寻路游戏Easystar.js

Easystar.js 是一个使用 JavaScript 实现的异步的寻路游戏。 主要特效: 异步计算以实现更好的性能 简单 API 体积小 ~5kb. 框架无关,可与已有的任意 JS 框架结合使用更多Easystar.js信息

最近更新: Easystar.js —— 异步的 JavaScript 寻路游戏 发布于 1年前

游戏引擎推荐

笔者从业界较流行的一些框架,进行以下几个方面对比,希望能从客观数据上给大家的技术选型带来建议和参考。

  • 引擎支持的渲染方式
  • github上的 star 数
  • 更新时间
  • 文档详细度
  • 周边产品

2D,3D,VR 都支持的游戏引擎

name 2D渲染(Canvas) 2D渲染(WebGL) 3D渲染(WebGL) VR github star 数 文档详细程度 周边产品 备注
Egret YES YES YES YES 2k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
游戏开发过程中的每个环节基本都有工具支撑。 不仅仅提供了一个基于HTML5技术的游戏引擎,更是提供了原生打包工具和众多周边产品
LayaAir YES YES(优先) YES YES 0.7k(最新更新2017.12)
▪ 有中文文档
▪ 例子充足
▪ 社区活跃
提供开发工具和可视化编辑器 支持2D、3D、VR,能开发超大游戏,forgame的醉西游,腾讯的QQ农场,乐动卓越的浪漫h5这些大作就是用它开发
主要特性:
  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,就可以感受到硬件加速的力量。

图片 14image

手机游戏引擎Cocos2d-x

Cocos2D-X是全球知名的开源跨平台游戏引擎,易学易用,目前已经支持iOS、Android、Windows桌面、Mac OSX、Linux、BlackBerry、Windows Phone等平台。Cocos2d-JS统一了使用JS进行开发的开发体验,将HTML5引擎与JSB的API高度统一起来。捕鱼达人HTML5版本基于…更多Cocos2d-x信息

最近更新: Cocos2d-x v3.4 Final 发布,支持 Frustum Culling 发布于
2个月前

H5 游戏开发:游戏引擎入门推荐

2017/12/28 · HTML5 · 1
评论 ·
游戏引擎

原文出处:
凹凸实验室   

图片 15

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

JavaScript 游戏开发框架boxbox

boxbox 是一个有趣但简单的游戏开发框架,基于 box2d 物理引擎开发。 演示: Don’t Look At Me Platformer Demo Joints Demo更多boxbox信息

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

Chrome 游戏开发框架Aroma

Aroma 是基于 Chrome’s Native Client 的游戏开发框架,你可以使用 Lua 编程语言来编写游戏,并通过 Chrome Web Store 进行发布。更多Aroma信息

最近更新: 使用 Lua 编写基于 Chrome 的 Web 游戏 发布于 3年前

发表评论

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