您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 桌面和手机游戏HTML5框架,游戏引擎入门推荐

桌面和手机游戏HTML5框架,游戏引擎入门推荐

发布时间:2019-09-23 15:57编辑:1010cc时时彩客户端浏览(59)

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

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

    原文出处: 凹凸实验室   

    图片 1

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

    基于WebGL的游戏引擎PlayCanvas

    一般来讲,游戏开发与web应用完全是两码事。但先试试,游戏世界的很多工具都可以被用于在网站中增加华丽界面。PlayCanvas就是一个基于WebGL的游戏引擎,结合了物理、光影、音效等工具用于创建一个复杂的界面。 示例代码: // Create a PlayCanvas app...

    更多PlayCanvas信息

    当前HTML5游戏市场

    图片 2

    image

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

    HTML5游戏的优势:

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

    图片 3

    image

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

    2015年HTML5游戏用户规模

    图片 4

    image

    2017年HTML5游戏用户规模

    图片 5

    image

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

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

    前言

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

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

    The-Best-JS-Game-Framework

    这是一个 JavaScript 的游戏框架: 足够简单,特别适合开发微信上到处疯传的那种轻量级小游戏 极易扩展和重写 Duck-Type First 尊重每一位开发者自己的习惯, 只提供真正的"框架", 而不是试图"绑架"开发者 不做没有必要的封装 例如2D渲染部分.我一直不理解那...更多The-Best-JS-Game-Framework信息

    流行的几款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等多种渲染方案,满足全终端和性能要求
      官网地址

    图片 6

    游戏场景分类

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

    • 游戏效果呈现方式( 2D ? 3D ? VR ?)
      这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三种。
      而 2D 渲染一般也有三种:Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因,一般只适合做一些动画效果较少,交互较少的小游戏,本文主要针对 Canvas 和 WebGL 展开介绍。
      一般来说,对于 2D 小游戏来说,Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多,不足以支撑起大型游戏的性能要求,因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime 。
    • 游戏复杂度
      这与游戏引擎能够支持的功能,提供的API,性能等方面关系比较大。

    图片 7image.png图片 8image.png

    开源 2D 游戏框架Cocos2d-JS

    Cocos2d-JS 是一个开源的 2D 游戏框架,包含 Cocos2d-html5 和 Cocos2d-x 的 JavaScript Bindings,支持跨平台和基于浏览器以及原生应用。你可以完全使用 JavaScript 来编写游戏,完全兼容 Cocos2d-html5 和 Cocos2d-x JavaScript Bindings. Cocos2d-html5...更多Cocos2d-JS信息

    最近更新: Cocos2d-JS 3.2 发布,开源 2D 游戏框架 发布于 3个月前

    Egret

    图片 9

    Z3$DXP0WDJ0{~05F~PMN0C8.png

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

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

    图片 10

    image

    图片 11

    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引擎

    功能特性图

    图片 12

    image

    开发入门

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

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

    Phaser同时支持Canvas和WebGL渲染引擎,预置了完备的精灵动画、输入 管理、瓦片地图、补间动画、资源加载器、物理系统、粒子系统等特性,几乎能够 满足你开发一个2D游戏的任何需求:

    游戏引擎推荐

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

    • 引擎支持的渲染方式
    • 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这些大作就是用它开发

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

    HTML5 游戏构建工具voxel.js

    voxel.js 是一个类似于Minecraft 的 HTML5 游戏构建工具。可以在上面编程让游戏变得很好玩. 更多voxel.js信息

    HTML5游戏未来的发展前景

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

    图片 13

    Egret

    图片 14

    Egret 周边产品

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

    图片 15image

    JavaScript游戏引擎Kiwi.JS

    Kiwi.js是由来自新西兰的GameLab公司开发的一款全新的开源HTML5 JavaScript游戏引擎,主张Mobile First,在经过一年多的开发和测试之后,最新是Kiwi.js 1.0版本。 其创始人Dan Milward表示,“我们的目标是将Kiwi.js打造成为Html5游戏引擎中的WordPress,所...更多Kiwi.JS信息

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

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

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

    分布式游戏服务端引擎KBEngine

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

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

    图片 16

    Pixi.js

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

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

    2D HTML5 渲染引擎CutJS

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

    Phaser的下一个版本是3.0(刚发布),因此目前2.x版本的维护由社区继续,被称为Phaser CE —— Community Edition。

    Phaser

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

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

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

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

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

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

    CreateJS

    图片 17

    CreateJs 周边产品

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

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

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

    图片 18image

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

    图片 19image

    HTML5 游戏开发框架Egret

    Egret Framework是一款使用JavaScript(TypeScript)编写的HTML5开源免费游戏框架。Egret Framework的核心定位是开放,高效,优雅。基于它,你可以快速轻松地构建属于自己的HTML5移动游戏。 Egret框架是一个基于MIT开源协议许可的永久免费的项目!你可以在项...更多Egret信息

    最近更新: Egret —— HTML5 开源移动游戏开发框架 发布于 12个月前

    <script src="lib/phaser.js"></script>
    
    Hilo

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

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

    图片 20image

    HTML5游戏引擎Turbulenz

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

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

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:桌面和手机游戏HTML5框架,游戏引擎入门推荐

    关键词: