H5小游戏框架总结推荐

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

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

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

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

Name	2D	3D
Three.js	no	yes
Phaser	yes	no
Createjs	yes	no
Egret	yes	yes
Cocos2d-js	yes	no

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

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

Three.js

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

优点：

专注于三维效果的 JavaScript 实现，能够在网页端实现大部分三维效果。
文档齐全，并具有搜索功能，方便快速查阅。
国外项目，目前仍然持续更新，不需要担心没人维护国外。
纯 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 代码。
如果需要制作比较复杂的游戏，图形化的开发工具是第一选择。图形化界面能够大大提升游戏开发的效率，而且游戏的结构也是清晰可见，性价比比较高。
如果游戏需求比较复杂，而且需要接入自己的业务系统。这种情况，需要先测试图形化工具缩生成的代码是否能够顺利接入系统，然后再选择使用。

摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html

使用框架的注意事项

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

学习使用过程，遇到英文资料或者文档，建议不要使用翻译软件，通过例子和上下文去理解。
注意游戏的图片和模型加载，合理使用精灵图和框架的预加载功能。
开始开发之前，注意测试需要用到的框架属性，是否存在兼容性问题，特别是安卓和苹果手机的区别。
多复习一下高中的立体几何、解析几何，大学的线性代数、算法和图形图像。
跟美工打好关系，做游戏时，图片和模型的调整会非常多，没有他们的配合，很难进行。