前端游戏框架哪一个好
随着浏览器功能愈来愈强大，在网页端实现各类小游戏已是屡见不鲜。微信小游戏出现后，游戏（特别是小型游戏）的开发已经进入了一个至关火爆的时期。那么做为一个普通的前端开发者，如何取选择一个合适的游戏开发框架来学习和提升开发效率呢？php
本场 Chat 将包含如下内容：css
- 当今国内外流行的游戏开发框架有哪些
- 每一个框架的特色以及优缺点
- 怎样去选择一个适合的框架来学习和使用
- 使用框架的注意事项
我是一名前端开发人员，目前在一家新闻网站担任前端工做。个人公司不算大，技术部门加起来也就 20 来人，算一个中小型的公司，主要作的是宣传方面的工做。因为公司主要是作宣传方面的工做，因此也是比较注重宣传的形式以及展示出来的效果。html
正因为公司的性质，我所作的可能跟不少其余的前端工做者不同。我所接触的技术，更可能是 css3 动画，canvas 动画以及 webgl；而不是 vue、react 和 angular 这一些跟数据打交道比较多的框架和类库。前端
处在这样一个环境下，让我对前端动画和小游戏有了必定程度的了解，下面我就和你们一块儿分享一下我在这方面的一些小看法。vue
- 当今国内外流行的游戏开发框架有哪些。
- 每一个框架的特色以及优缺点。
- 怎样去选择一个适合的框架来学习和使用。
- 使用框架的注意事项。
当今国内外流行的游戏开发框架有哪些
开发动画和游戏，跟咱们作数据交互不同；游戏和动画开发起来比较复杂和耗时，是比较依赖框架和工具的。那么如今都有那些框架和工具呢？下面咱们就来看一下。html5
| Name | 2D | 3D |
|---|---|---|
| Three.js | no | yes |
| Phaser | yes | no |
| Createjs | yes | no |
| Egret | yes | yes |
| Cocos2d-js | yes | no |
每一个框架的特色以及优缺点
上面表格的框架，是我总结出来，比较多同行关注而且学习使用的框架。java
Three.js
一款历史比较悠久的开源项目，准确地说它不是一个游戏引擎，是一个 JavaScript 的 3D 库。然而咱们能够用它来作各类的 3D 效果和游戏。 react
优势：
专一于三维效果的 JavaScript 实现，可以在网页端实现大部分三维效果。 css3
文档齐全，并具备搜索功能，方便快速查阅。 git
国外项目，目前仍然持续更新，不须要担忧没人维护国外。
纯 js 代码开发，引入库便可用，不须要借助其余工具，方面接入任何的系统。
缺点：
文档大部分是英文，须要具有必定英文水平才能读懂。
学习难度比较大，除了 js 代码基础，还须要具有高中的几何知识、webgl 知识、线性代数等等。
国内例子相对比较少，中文教程也很少，基本上都是看官网的例子和文档进行学习和研究。
网页 3d 效果的兼容性和性能问题，须要详细研究需求后才能使用。
Phaser
免费开源的 html5 游戏框架，支持 canvas 和 webgl 渲染，github 上 2w + star，比较不错的游戏框架。
优势：
专一于 2d 游戏的 JavaScript 实现，集合了渲染、物理引擎，可以完成大部分小游戏。
使用方法简单，容易上手。
官方网站上有大量例子，代码都不负责，基本须要使用的效果都能找到对应的例子。
纯 js 代码开发，引入库便可用，不须要借助其余工具，方面接入任何的系统。
可以在微信小游戏中使用，并支持 typescript。
缺点：
官方文档大部分是英文，而且没有搜索功能，须要按照类一层层往下搜索；假如在官方例子中找不到合适的代码，须要花时间研究文档。
目前稳定版本是 2.10，可是版本是社区维护；官方在开发新的 3.0 版本，暂时还在调整阶段。
因为纯代码编写，若是游戏逻辑复杂，代码会比较多和繁琐，须要在前期作比较好的规划。
Createjs
免费开源的 html5 游戏、动画和交互应用框架，adobe animate 软件基于该库来生成代码。
优势：
动画和交互效果小能手，众多好看和高质量的 h5 展现效果使用 createjs 制做。
可使用纯代码开发，或者使用 adobe animate 软件开发。
国内教程比较丰富，学习成本不大。
核心库分为四个，分别支持渲染、动画、预加载和音频，能够按需求加载对于库。
缺点：
例子相对较少，遇到新或者复杂的需求，基本须要查看 api，没法寻找类似例子。
没有封装好粒子系统、骨骼动画、瓦片地图等等，轻量级的库，不适合大型游戏。
动画制做通常须要大量图片，涉及图片压缩和使用精灵图方面的技术。
Egret
国内优秀的游戏制做引擎，具有一整套的开发工具和教程。
优势：
大型游戏制做能手，可以使用图形化工具制做游戏，性能优越。
使用 typescript 开发业务逻辑，代码规范。
中文文档和教程，学习方便。
同时支持 3d 和 2d，而且带有各类模块，游戏制做基本属于全能。
支持接入微信小游戏。
缺点：
须要使用工具开发，不方便接入其余业务系统。
虽然具有中文文档，当时须要熟悉各类工具，学习成本不低。
例子相对较少，制做大型游戏须要大量填坑。
Cocos2d-js
历史比较悠久的游戏开发框架，相似 egret。
优势：
2D 优秀开发引擎，一样使用图形化工具制做游戏，操做方便。
核心使用 JavaScript 编写。
中文文档和教程，学习方便，而且资料和例子丰富。
功能至关完整，游戏中须要的功能几乎都可以找到。
支持接入微信小游戏。
缺点：
须要使用工具开发，不方便接入其余业务系统。
须要熟悉各类工具，学习成本不低，这点相似 egret。
擅长 2D 游戏开发，3D 游戏开发没有其它几个游戏框架专业。
怎样去选择一个适合的框架来学习和使用
学习：
从学习上来讲，我推荐初学者挑选纯代码进行开发的框架（three.js、createjs 和 phaser）进行学习。学习这类型的框架，虽然难度比较大，花时间比较长；可是可以提升本身的代码编写水平，还能更加深入地理解游戏开发。
若是有些小伙伴比较喜欢图形化界面操做，也能够尝试 egret 和 coco2d。这两个框架都是国内比较流行的游戏框架，学习哪个都会有所帮助。
若是有小伙伴以前是作 flash 的，我推荐使用 adobe animate 软件。
这款软件其实就是之前的 flash 加上了 html5 的 canvas，它既能够生成 flash，也能够制做网页动画；制做的方法也之前的 flash 软件基本同样，只是多了 JavaScript 代码编写。
工做：
在工做中，特别是一些中小型公司，选择游戏框架就跟学习的时候不同了。
首先须要明确须要制做什么类型的游戏，是否须要接入本身公司的业务系统。
若是是一些小游戏，相似跳一跳、推箱子等等，可使用纯代码开发的框架。这样不管后面需求是否修改，是否须要接入业务系统，都可以方便进行修改。
若是游戏的形式不太清晰，可是须要接入本身业务系统，例如游戏事后要抽奖、要统计数据等等；也建议优先选择纯代码开发的框架，毕竟纯代码开发的框架，就算先后端没有彻底分离，也能够在页面上面放 php 或者 java 代码。
若是须要制做比较复杂的游戏，图形化的开发工具是第一选择。图形化界面可以大大提高游戏开发的效率，并且游戏的结构也是清晰可见，性价比比较高。
若是游戏需求比较复杂，并且须要接入本身的业务系统。这种状况，须要先测试图形化工具缩生成的代码是否可以顺利接入系统，而后再选择使用。
使用框架的注意事项
最后，给小伙伴们几个使用框架的建议，下面的都是我通过无数次踩坑总结出来的。
学习使用过程，遇到英文资料或者文档，建议不要使用翻译软件，经过例子和上下文去理解。
注意游戏的图片和模型加载，合理使用精灵图和框架的预加载功能。
开始开发以前，注意测试须要用到的框架属性，是否存在兼容性问题，特别是安卓和苹果手机的区别。
多复习一下高中的立体几何、解析几何，大学的线性代数、算法和图形图像。
跟美工打好关系，作游戏时，图片和模型的调整会很是多，没有他们的配合，很难进行。
本文首发于GitChat，未经受权不得转载，转载需与GitChat联系。
阅读全文: http://gitbook.cn/gitchat/activity/5b62c74ca120e74da6655b63
您还能够下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。
