木木彡blog

您现在的位置是：首页 > 学无止境

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

木木彡82 2017-12-30 12:31:23 共563人围观

前言

很多刚刚接触到游戏开发，准备大展拳脚的小鲜肉们，往往在技术选型这第一关就栽了跟头。毕竟网络上的游戏引擎良莠不齐，官网上相关资料也比较少，而选择一个适合的游戏引擎是一个项目最基础，也是很核心的一部分。
试想一下，在游戏开发进行到中后期的时候，才发现项目引入的游戏引擎与需求相悖，这时...

前言

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

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这些大作就是用它开发

Egret

Egret 周边产品

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

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

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

CreateJs 周边产品

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游戏的游戏引擎

name	2D渲染（Canvas）	2D渲染(WebGL)	3D渲染（WebGL）	VR	github star 数	文档详细程度	周边产品	备注
Three.js	NO	NO	YES（倾向）	NO	37.6k（最新更新2017.12）	▪ 英文文档 ▪ 例子充足 ▪ 英文社区	无	默认Ammo.js为默认物理引擎，基于JavaScript语言的3D库，耗性能，加载慢，效果一般
PlayCanvas	NO	NO	YES	YES	3k（最新更新2017.12）	▪ 英文文档 ▪ 例子充足 ▪ 英文社区	提供了在线编辑器，发布托管等	教程较为详细，入门快

Three.js

Three.js 示例案例

相信对于很多有关注 3D 游戏的开发者来说，Three.js 早已经耳熟能详了。实际上，Three.js 官方定位并不是游戏引擎，而是一个 JS 3D 库。Three.js 更倾向于展示型的视觉呈现，比较少直接拿 Three.js 来开发 H5 游戏。渲染环境上，Three.js 支持 WebGL 和 CSS3D 两种渲染模式。