>

我在github上面收集了四十多款的HTML5开源游戏引擎

- 编辑:澳门博发娱乐官网 -

我在github上面收集了四十多款的HTML5开源游戏引擎

Egret

澳门博发娱乐官网 1

Egret 周边产品

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

主要特性:
  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,就可以感受到硬件加速的力量。

澳门博发娱乐官网 2image

3D游戏界面开发平台Famo.us

Famo.us本质上就是一个JavaScript游戏引擎,帮助编程者开发高性能并可在原生和浏览器环境下运行的应用。它提供一个强有力的JavaScript框架和大量的开发者工具,这些框架和工具其设计目的是用来构建功能丰富、反应快速的Web应用程序。 Famo.us采用一种独特的...更多Famo.us信息

最近更新: HTML5大提速,Famo.us 消灭浏览器原罪 发布于 11个月前

HTML5游戏未来的发展前景

我个人对H5游戏领域的未来发展前景保持非常积极乐观的态度,最近几年的H5游戏技术发展迅速,许多概念得到实现,游戏性能上也有了巨大的进步,从最初的DOM模式到基于canvas模式的游戏技术再过度到基于WebGL的游戏模式,从性能上说,WebGL帮助HTML5游戏整体性能提高了数倍,为HTML5开发大型功能复杂的游戏提供了可能。
任何一项技术的出现和完善都是为了解决问题,解决问题就是要满足需求,创造商业价值,从文章开头对目前html5游戏市场的分析来看,潜在的商业价值是非常巨大的。
目前整个软件行业技术发展迅速,用户也越来越追求高质量的服务体验,对于传统游戏行业,一些必须考虑的因素、瓶颈包括,游戏本身对硬件配置的要求、跨平台开发的高成本、游戏体积等一系列问题在HTML5游戏模式中都可以得到基本或者完美的解决,未来的游戏市场的要求应该是: 高服务高质量、轻容量、易接收、易推广、跨平台。
PC游戏、主机游戏、HTML5游戏、云游戏是目前主要的游戏模式,其中PC游戏、主机游戏市场已经相对成熟,HTML5游戏前面我们已经讨论了很多,云游戏也不是什么新概念了,目前国内也有比较成功的商业尝试比如格来云游戏,个人尝试体验过在移动平台通过格来云游戏畅玩PC端3A级大作,未来HTML游戏与云游戏概念的结合,是一个非常有潜力的市场方向
总结: 依据上述分析的未来游戏市场要求,HTML5游戏与云游戏概念的结合,在未来应该具备非常广泛的市场空间

new  Phaser.Game(700,300,Phaser.AUTO,'')。
Pixi.js

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

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

分布式游戏服务端引擎KBEngine

KBEngine是一款开源mmog服务端引擎, 使用统一协议能够轻松与前端对接,能轻松使用unity3d、 ogre、 cocos2d、 html5等作为前端表现。 底层框架由c++编写, 逻辑层使用python(支持热更新), 开发者无需重复实现一些通用的底层服务端技术, 使开发者能够真正...更多KBEngine信息

最近更新: KBEngine v0.4.20 发布,开源分布式游戏服务端引擎 发布于 2周前

当前HTML5游戏市场

澳门博发娱乐官网 3

image

HTML5游戏已经不是一个新话题,随着H5技术的快速发展完善,依赖其天生的跨平台优势,开发人员对其技术在游戏领域的应用寄予厚望。
到2017年为止,行业内已经进行了很多的技术尝试、创新和市场的探索,目前已经基本进入一个稳步发展阶段。

HTML5游戏的优势:

  • 基于网页,能够打通PC、手机、IPad,具备天然的跨平台优势
  • 易推广易爆发,即用即走
  • 开发成本低

澳门博发娱乐官网 4

image

市场分析:
HTML5游戏自15年火爆至今整个游戏市场增长依然迅猛,游戏的h5游戏成功案例层出不穷,从概念火爆进入到务实落地发展阶段。主要市场依然是轻量级页游,跨平台端游,目前也有向大型网络游戏探索、创新的尝试。

2015年HTML5游戏用户规模

澳门博发娱乐官网 5

image

2017年HTML5游戏用户规模

澳门博发娱乐官网 6

image

从图表数据来看,近几年来,H5用户规模增长迅猛,就意味着这一领域里巨大的市场需求,市场需求决定了商业价值的规模,进一步对同技术发展、资本入局、IP推进,HTML5市场必将继续向好发展

√ 指定渲染器

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

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

原文出处: 凹凸实验室   

澳门博发娱乐官网 7

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

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

澳门博发娱乐官网 8image

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

澳门博发娱乐官网 9image

2D HTML5 渲染引擎CutJS

CutJS 是一个轻量级的、快速的、可交互的 2D HTML5 渲染引擎,用于跨平台的游戏开发。可用来开发 Web 游戏、iOS 和 Android 等游戏。CutJS 是一个开源的 Canvas 库。 示例代码: // Create new appCut(function(root, container) {  // Subscri...更多CutJS信息

流行的几款H5游戏引擎

国内外相对成熟的H5游戏引擎有很多,这里做一个简单枚举:

  • egret

    国内h5游戏公司白鹭时代开发的一款使用TypeScript语言构建的开源免费的移动游戏引擎
    官网地址

  • cocos2d-js

    Cocos2d-JS是跨全平台的游戏引擎,采用原生JavaScript语言,跨平台,引擎基于MIT开源协议,完全开源,免费,易学易用,拥有活跃的社区支持

    官网地址

  • LayaAir

    LayaAir是Layabox旗下第二代HTML5开源引擎,全球唯一支持ActionScript3、JavaScript、TypeScript三种开发语言
    官网地址

  • lufylegend
    lufylegend是一个HTML5开源引擎,它实现了利用仿ActionScript3.0的语法进行HTML5的开发
    官网地址

  • Hilo
    由阿里开源的一套HTML5跨终端的互动游戏解决方案,内核极简,提供包括DOM,Canvas,Flash,WebGL等多种渲染方案,满足全终端和性能要求
    官网地址

Phaser是一个流行的2D开源游戏框架,可以用来开发桌面或手机浏览器HTML5游戏,适合侧视或顶视风格:

结语

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

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

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

2 赞 3 收藏 1 评论

澳门博发娱乐官网 10

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

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

澳门博发娱乐官网 11image

网页Galgame引擎Reitsuki

基于HTML5的纯JS的,网页Galgame引擎 可以让你利用浏览器这个平台,制作出各种精美,而且跨平台的Galgame 

更多Reitsuki信息

Egret

澳门博发娱乐官网 12

Z3$DXP0WDJ0{~05F~PMN0C8.png

评价一个游戏引擎的好坏需要思考的几个维度:引擎体积、渲染性能、学习开发成本、功能特性、开发入门、辅助开发工具、社区支持、商业应用、设计思想

egret游戏引擎由于其免费、开源、功能强大的特点成为目前国内应用最为广泛的HTML5游戏引擎

澳门博发娱乐官网 13

image

澳门博发娱乐官网 14

image

体积

Egret引擎基于开源2D骨骼动画解决方案DragonBones来实现骨骼动画,但整个引擎体积相对其他引擎来说并不算轻量

功能特性

Egret是一整套游戏开发的解决方案,包括游戏开发框架、开发辅助工具,生态环境相对完善。

  • 基于TypeScript进行开发,支持Flash到Egret的高效转换
  • 跨平台支持,可打包为HTML5,以及iOS 和Android、Windows Phone(wp基本已经没市场了)平台原生app,极大提高游戏性能。
  • 接入Egret Runtime,可彻底解决HTML5游戏在WebView中的卡顿问题
  • 提供核心UI扩展库EUI,EUI用 EXML 来开发应用界面,可基于已有组件进行组合或扩展
  • 同时支持2D、3D、VR的H5引擎

功能特性图

澳门博发娱乐官网 15

image

开发入门

  • 构建工具:
    EgretWing&命令行
  • 可扩展模块:
    Game、Tween、WebSocket、p2、ParticleSystem
  • 开发语言:
    TypeScript
  • 入门成本较高
  • 具备较完善的辅助系统生态

目前来说,egret的生态系统越来完善,技术也逐渐成熟,市场上的成功案例也很多,是一个非常值得选择和进行构建中大型HTML5游戏的引擎

Phaser采用经过修改的Pixi库作为底层渲染实现,因此可以支持canvas 和webgl。在默认情况下,Phaser将自动进行选择,不过我们可以在启动 框架时指定期望采用的渲染引擎。例如,下面的代码启用了Canvas渲染器:

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缓动类等

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

JS游戏引擎CraftyJS

Crafty JS 是一个跨浏览器支持的 JavaScript 游戏引擎。 在线演示:http://craftyjs.com/demos.php更多CraftyJS信息

Phaser框架的绝大部分功能,都打包在单一phaser.js文件中。我们只需要 在宿主HTML文件中引入这个框架文件,就可以开始使用Phaser:

Phaser

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

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

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

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

HTML5游戏框架QuarkJS

Quark JS (quark.js) 是一个全新的 javascript 的 HTML5 游戏开发框架,目前由@flashlizi负责维护,有@大城小胖 @真阿当 @06wj @Bobby_casperCBY @裕波 @米粽my @寒冬winter等一起参与完善。...更多QuarkJS信息

例如,下面的代码将在属性id为ezgame的DOM元素中创建游戏画布:

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. 功能强大,同时支持2D和3D2. 基于MIT协议的开源引擎

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

澳门博发娱乐官网 16image

Chrome 游戏开发框架Aroma

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

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

写了个phaser的教程,***/course,学习页面的截图如下所示,对刚玩游戏的朋友应该有些帮助:

Three.js

澳门博发娱乐官网 17

Three.js 示例案例

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

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

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

澳门博发娱乐官网 18image

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

澳门博发娱乐官网 19image

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

澳门博发娱乐官网 20image

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

澳门博发娱乐官网 21image

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

Web游戏技术平台Paladin

Paladin 是 Mozilla 社区推出的一个开源的 Web 游戏引擎技术。 Paladin sits at the intersection of 3D gaming, JavaScript framework and library development, and the browser. We're tied into the bits of the web that are up-and-coming, and are ...更多Paladin信息

最近更新: Mozilla开发Gladius 3D游戏引擎发布于 3年前

几乎所有的框架API,都定义在Phaser命名空间之下。例如,我们通过实例化Phaser.Game类来启动框架:

CreateJS

澳门博发娱乐官网 22

CreateJs 周边产品

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

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

HTML5游戏引擎Turbulenz

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

Phaser最值得称道的是它的插件机制,以及由此而衍生出的Phaser生态 社区。例如,借助于isometric插件,你可以开发出具有(伪)3D效果的游戏:

前言

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

缺点:

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

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

澳门博发娱乐官网 23image澳门博发娱乐官网 24image

katajs

katajs 是一个 JavaScript 库用于3D渲染和连接到 sirikata。使用Web Sockets技术进行连接,显示基于WebGL,并为独立的应用程序提供一个本地的演示服务器。更多katajs信息

默认情况下,Phaser会将创建的canvas元素插入到文档的body元素尾部。 不过我们可以显式地指定其父元素。

本文由胜博发-前端发布,转载请注明来源:我在github上面收集了四十多款的HTML5开源游戏引擎