web游戏框架有哪些?_h5游戏开发引擎推荐

更新日期: 2018-11-24阅读: 7.5k标签: 游戏

随着浏览器功能越来越强大,在网页端实现各种小游戏已经是家常便饭。微信小游戏出现后,游戏(特别是小型游戏)的开发已经进入了一个相当火爆的时期。那么作为一个普通的前端开发者,如何取选择一个合适的游戏开发框架来学习和提高开发效率呢?  

我是一名前端开发人员,目前在一家新闻网站担任前端工作。我的公司不算大,技术部门加起来也就 20 来人,算一个中小型的公司,主要做的是宣传方面的工作。由于公司主要是做宣传方面的工作,所以也是比较注重宣传的形式以及展现出来的效果。

正由于公司的性质,我所做的可能跟很多其他的前端工作者不一样。我所接触的技术,更多是 css3 动画,canvas 动画以及 webgl;而不是 vuereactangular 这一些跟数据打交道比较多的框架和类库。

处在这样一个环境下,让我对前端动画和小游戏有了一定程度的了解,下面我就和大家一起分享一下我在这方面的一些小见解。

  • 当今国内外流行的游戏开发框架有哪些。
  • 每个框架的特点以及优缺点。
  • 怎样去选择一个适合的框架来学习和使用。
  • 使用框架的注意事项。


当今国内外流行的游戏开发框架有哪些

开发动画和游戏,跟我们做数据交互不一样;游戏和动画开发起来比较复杂和耗时,是比较依赖框架和工具的。那么现在都有那些框架和工具呢?下面我们就来看一下。

Name2D3D
Three.jsnoyes
Phaseryesno
Createjsyesno
Egretyesyes
Cocos2d-jsyesno

每个框架的特点以及优缺点

上面表格的框架,是我总结出来,比较多同行关注并且学习使用的框架。


Three.js

一款历史比较悠久的开源项目,准确地说它不是一个游戏引擎,是一个 JavaScript 的 3D 库。然而我们可以用它来做各种的 3D 效果和游戏。

优点:
  1. 专注于三维效果的 JavaScript 实现,能够在网页端实现大部分三维效果。

  2. 文档齐全,并具有搜索功能,方便快速查阅。

  3. 国外项目,目前仍然持续更新,不需要担心没人维护国外。

  4. 纯 js 代码开发,引入库即可用,不需要借助其他工具,方面接入任何的系统。

缺点:
  1. 文档大部分是英文,需要具备一定英文水平才能读懂。

  2. 学习难度比较大,除了 js 代码基础,还需要具备高中的几何知识、webgl 知识、线性代数等等。

  3. 国内例子相对比较少,中文教程也不多,基本上都是看官网的例子和文档进行学习和研究。

  4. 网页 3d 效果的兼容性和性能问题,需要详细研究需求后才能使用。


Phaser

免费开源的 html5 游戏框架,支持 canvas 和 webgl 渲染,github 上 2w + star,比较不错的游戏框架。

优点:
  1. 专注于 2d 游戏的 JavaScript 实现,集合了渲染、物理引擎,能够完成大部分小游戏。

  2. 使用方法简单,容易上手。

  3. 官方网站上有大量例子,代码都不负责,基本需要使用的效果都能找到对应的例子。

  4. 纯 js 代码开发,引入库即可用,不需要借助其他工具,方面接入任何的系统。

  5. 能够在微信小游戏中使用,并支持 typescript。

缺点:
  1. 官方文档大部分是英文,并且没有搜索功能,需要按照类一层层往下搜索;假如在官方例子中找不到合适的代码,需要花时间研究文档。

  2. 目前稳定版本是 2.10,但是版本是社区维护;官方在开发新的 3.0 版本,暂时还在调整阶段。

  3. 由于纯代码编写,如果游戏逻辑复杂,代码会比较多和繁琐,需要在前期做比较好的规划。


Createjs

免费开源的 html5 游戏、动画和交互应用框架,adobe animate 软件基于该库来生成代码。

优点:
  1. 动画和交互效果小能手,众多好看和高质量的 h5 展示效果使用 createjs 制作。

  2. 可以使用纯代码开发,或者使用 adobe animate 软件开发。

  3. 国内教程比较丰富,学习成本不大。

  4. 核心库分为四个,分别支持渲染、动画、预加载和音频,可以按需求加载对于库。

缺点:
  1. 例子相对较少,遇到新或者复杂的需求,基本需要查看 api,无法寻找相似例子。

  2. 没有封装好粒子系统、骨骼动画、瓦片地图等等,轻量级的库,不适合大型游戏。

  3. 动画制作一般需要大量图片,涉及图片压缩和使用精灵图方面的技术。


Egret

国内优秀的游戏制作引擎,具备一整套的开发工具和教程。

优点:
  1. 大型游戏制作能手,能够使用图形化工具制作游戏,性能优越。

  2. 使用 typescript 开发业务逻辑,代码规范。

  3. 中文文档和教程,学习方便。

  4. 同时支持 3d 和 2d,并且带有各种模块,游戏制作基本属于全能。

  5. 支持接入微信小游戏。

缺点:
  1. 需要使用工具开发,不方便接入其他业务系统。

  2. 虽然具备中文文档,当时需要熟悉各种工具,学习成本不低。

  3. 例子相对较少,制作大型游戏需要大量填坑。


Cocos2d-js

历史比较悠久的游戏开发框架,类似 egret。

优点:
  1. 2D 优秀开发引擎,同样使用图形化工具制作游戏,操作方便。

  2. 核心使用 JavaScript 编写。

  3. 中文文档和教程,学习方便,并且资料和例子丰富。

  4. 功能相当完整,游戏中需要的功能几乎都能够找到。

  5. 支持接入微信小游戏。

缺点:
  1. 需要使用工具开发,不方便接入其他业务系统。

  2. 需要熟悉各种工具,学习成本不低,这点类似 egret。

  3. 擅长 2D 游戏开发,3D 游戏开发没有其它几个游戏框架专业。


怎样去选择一个适合的框架来学习和使用

学习:

从学习上来说,我推荐初学者挑选纯代码进行开发的框架(three.js、createjs 和 phaser)进行学习。学习这类型的框架,虽然难度比较大,花时间比较长;但是能够提高自己的代码编写水平,还能更加深刻地理解游戏开发。

如果有些小伙伴比较喜欢图形化界面操作,也可以尝试 egret 和 coco2d。这两个框架都是国内比较流行的游戏框架,学习哪一个都会有所帮助。

如果有小伙伴之前是做 flash 的,我推荐使用 adobe animate 软件。

这款软件其实就是以前的 flash 加上了 html5 的 canvas,它既可以生成 flash,也可以制作网页动画;制作的方法也以前的 flash 软件基本一样,只是多了 JavaScript 代码编写。

工作:

在工作中,特别是一些中小型公司,选择游戏框架就跟学习的时候不一样了。

首先需要明确需要制作什么类型的游戏,是否需要接入自己公司的业务系统。

  • 如果是一些小游戏,类似跳一跳、推箱子等等,可以使用纯代码开发的框架。这样无论后面需求是否修改,是否需要接入业务系统,都能够方便进行修改。

  • 如果游戏的形式不太清晰,但是需要接入自己业务系统,例如游戏过后要抽奖、要统计数据等等;也建议优先选择纯代码开发的框架,毕竟纯代码开发的框架,就算前后端没有完全分离,也可以在页面上面放 php 或者 java 代码。

  • 如果需要制作比较复杂的游戏,图形化的开发工具是第一选择。图形化界面能够大大提升游戏开发的效率,而且游戏的结构也是清晰可见,性价比比较高。

  • 如果游戏需求比较复杂,而且需要接入自己的业务系统。这种情况,需要先测试图形化工具缩生成的代码是否能够顺利接入系统,然后再选择使用。


使用框架的注意事项

最后,给小伙伴们几个使用框架的建议,下面的都是我经过无数次踩坑总结出来的。

  1. 学习使用过程,遇到英文资料或者文档,建议不要使用翻译软件,通过例子和上下文去理解。

  2. 注意游戏的图片和模型加载,合理使用精灵图和框架的预加载功能。

  3. 开始开发之前,注意测试需要用到的框架属性,是否存在兼容性问题,特别是安卓和苹果手机的区别。

  4. 多复习一下高中的立体几何、解析几何,大学的线性代数、算法和图形图像。

  5. 跟美工打好关系,做游戏时,图片和模型的调整会非常多,没有他们的配合,很难进行。



链接: https://www.fly63.com/article/detial/1412

如何使用SVG动画来制作游戏

在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏

three.js中物体旋转实践之房门的打开与关闭

看这篇博客,默认你已经知道了3D模型实现三维空间内旋转的实现方式(矩阵、欧拉角、四元数)。ok,下面正式切入主题,房门的打开和关闭,先上图:

js实现贪吃蛇小游戏

需要用到html、css、javascript 和 DOM 这些知识点就可以了。主要是js,其他只是一些基本的知识。js貌似也不是很难。但是问题就在这里,即使知识点都会了,但是还是无法综合运用把东西做出来

JS实现贪吃蛇

贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长。下面使用js来实现贪吃蛇的游戏

JS实现俄罗斯方块

《俄罗斯方块》的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分。 下面使用js来实现俄罗斯方块

HTML5+Js实现拼图小游戏

当时初学游戏开发,经验浅薄,所以没有好好专研游戏里的算法和代码的缺陷,导致游戏出现了很多bug,甚至拼图打乱后很可能无法复原。最近经常有朋友问起这个游戏,希望我能把代码里的bug改一下方便初学者学习

html5游戏引擎有哪些?如何选择

如果您是游戏开发人员,并且正在寻找JavaScript和HTML5无缝协作的游戏引擎。 虽然市场上有很多免费和付费的游戏引擎,但一款让专业游戏开发者满意的游戏引擎,必须包含独特的东西

原生JavaScript实现贪吃蛇游戏

创建JavaScript贪吃蛇游戏需要使用 HTML 制作结构,使用 CSS 制作样式,使用 JavaScript 制作游戏逻辑。下面是一个简单的贪吃蛇游戏示例:

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!