H5游戏开发：游戏引擎入门推荐
前言
很多刚刚接触到游戏开发，准备大展拳脚的小鲜肉们，往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐，官网上相关资料也比较少，而选择一个适合的游戏引擎是一个项目最基础，也是很核心的一部分。
试想一下，在游戏开发进行到中后期的时候，才发现项目引入的游戏引擎与需求相悖，这时候不管是重新做一些修修补补的工作或者更换游戏引擎，这都是相当耗费人力物力的一件事。为了避免这种情况的出现，在前期选择适合项目需求的游戏引擎显得尤为重要。
接下来我们来聊一聊如何去选择适合项目的 JS 游戏引擎。
游戏场景分类
在刚接到游戏需求时，我们可以从以下几个方面进行考量，分析出游戏需求场景所属，从而作为我们选择游戏引擎的依据。
- 游戏效果呈现方式（ 2D ？ 3D ？ VR ？）
这与游戏引擎能够支持的渲染方式直接挂钩。现在的 H5 游戏渲染方式一般有 2D 渲染、3D 渲染、VR 渲染三种。
而 2D 渲染一般也有三种：Dom 渲染、Canvas 渲染、WebGL 渲染。Dom 由于性能原因，一般只适合做一些动画效果较少，交互较少的小游戏，本文主要针对 Canvas 和 WebGL 展开介绍。
一般来说，对于 2D 小游戏来说，Canvas 渲染已经足够。然而 Canvas 渲染由于底层封装层次多，不足以支撑起大型游戏的性能要求，因此大型游戏最好选择 WebGL 渲染或者浏览器内嵌 Runtime 。 - 游戏复杂度
这与游戏引擎能够支持的功能，提供的API，性能等方面关系比较大。
游戏引擎推荐
笔者从业界较流行的一些框架，进行以下几个方面对比，希望能从客观数据上给大家的技术选型带来建议和参考。
- 引擎支持的渲染方式
- github上的 star 数
- 更新时间
- 文档详细度
- 周边产品
2D，3D，VR 都支持的游戏引擎
image
Egret
image
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">Egret 周边产品</figcaption>
白鹭引擎是企业级游戏引擎，有团队维护。Egret 在工作流的支持上做的是比较好的，从 Wing 的代码编写，到 ResDepot 和 TextureMerger 的资源整合，再到 Inspector 调试，最后到原生打包（支持 APP 打包），游戏开发过程中的每个环节基本都有工具支撑。官网上的示例，教程也是比较多。值得一提的是，今年5月白鹭引擎支持了 WebAssembly ，这对于性能的提升又是一大里程碑。
LayaAir
在渲染模式上，LayaAir 支持 Canvas 和 WebGL 两种方式；在工具流的支持程度上，主要是提供了 LayaAir IDE。LayaAir IDE 包括代码模式与设计模式，支持代码开发与美术设计分离，内置了 SWF 转换、图集打包、JS 压缩与加密、APP 打包、Flash 发布等实用功能。
下图是主要支持2D游戏的游戏引擎
image
Pixi.js
一般来说，WebGL 的渲染速度都会比 Canvas 快，这是由俩者的绘制路径决定的。Pixi 最大的特点在于，Pixi 具有完整的 WebGL 支持，却并不要求开发者掌握 WebGL 的相关知识，并在需要时无缝地回退到 Canvas 。相较于很多同类产品，它的渲染能力是比较强大的。然而，Pixi 也有不足的地方，Pixi 对于动画的支持是比较缺乏的，在实际开发中，常常需要引进额外的动画库，如 GSAP。
Phaser
Phaser 在渲染方面直接封装了 Pixi；架构方面，Phaser 内嵌了3个物理引擎（Arcade Physics、Ninja、p2.js），提供粒子系统、动画、预下载和设备适配方案；兼容性方面，Phaser 的焦点是放在移动端浏览器上的；API 方面，Phaser 能实现丰富的游戏功能，适合复杂度高的游戏开发。
CreateJS
image
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">CreateJS 周边产品</figcaption>
CreateJS 官方提供了 TweenJS 支持动画开发，同时通过 SoundJS 和 PreLoadJS 提供了音频和预下载的支持，对于 H5 游戏基础功能的支持是足够的。在兼容性方面，CreateJS 支持 PC 端和移动端几乎所有的浏览器。此外，CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。
Hilo
Hilo 是阿里团队推出的一个开源项目，支持模块化开发，同时提供了多种模块范式的包装版本和跨终端解决方案，适合用来开发营销小游戏。其体积也是比较轻量的，只有70kb左右。Hilo 支持 DOM 渲染，Canvas 渲染和 WebGL 渲染，同时集成了 Hilo Audio， Hilo Preload。其后推出的 Hilo 3D 也是其亮点之一。
Cocos2d-x
Cocos2d-x 是业界比较老牌的游戏引擎了，同时支持 C++ ，Lua 和 JavaScript 三种开发语言，官方用例来看更倾向于 C++ 开发，适合做一些中大型游戏开发。Cocos2d-x 提供 Cocos Creator 游戏开发工具，组件化，脚本化，数据驱动，跨平台发布。
lufylegend.js
lufylegend.js 的最新更新是在16年，不过其社区还是十分活跃的，如果遇到什么开发问题，可以很方便地在社区上找到解决的方案。lufylegend.js 可以支持基础的游戏功能，但是其可拓展性不是很强。
主要支持3D游戏的游戏引擎
image
Three.js
image
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">Three.js 官方案例</figcaption>
相信对于很多有关注 3D 游戏的开发者来说，Three.js 早已经耳熟能详了。实际上，Three.js 官方定位并不是游戏引擎，而是一个 JS 3D 库。Three.js 更倾向于展示型的视觉呈现，比较少直接拿 Three.js 来开发 H5 游戏。渲染环境上，Three.js 支持 WebGL 和 CSS3D 两种渲染模式。
PlayCanvas
从渲染支持程度来看，PlayCanvas 不仅支持 3D WebGL渲染，同时保持到 VR 的支持，拥有比较好的拓展性。在工具流的支持上，提供了在线编辑器和发布托管等服务。从官方教程上看，教程也是比较详细的。
结语
现在市场上的 H5游戏引擎很多，很难去直接定义哪个引擎的好坏，只能说每个引擎都有自己的特性，在某方面跟项目的契合程度比较高，笔者根据现在市场上比较热门的几大引擎做了几点比较，希望能给刚入门的你做技术选型的时候有一点帮助，找到适合项目的引擎，更快、更准、更高效率地完成项目需求。
感谢各位耐心读完，希望能有所收获，有考虑不足的地方欢迎留言指出。
