和传统前端开发的差异

开发链路和角色
为什么要用游戏引擎
前端开发过渡到游戏开发

开发链路和角色

游戏开发的团队分工

组建一个最小但最完整的游戏开发团队只需要3个人︰策划、程序、美术。当然,能力足够强的话可以作为独立开发者。

游戏团队
- 策划
  - 数值-内容
- 美术
  - 原画-2D/3D-音效/动效
- 程序
  - 前端-后端
- 其他支持
  - QA-运营-运维-市场

游戏还发基本链路

为什么要用游戏引擎

游戏引擎最大的游戏︰渲染

引擎的诞生就是因为一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎。如果不使用引擎，你可以做复杂的动效渲染和交互吗﹖当然可以。方便吗?不一定。

所以游戏引擎更像是一套解决方案，让你在制作某一类型的产品的时候能够提高你的开发效率。

你要做多平台移植? React Native、Weex、Cordova等方案也可以做到。

你要做物理效果? MatterJS、ammo.js等物理引擎可以用。

你要做动画? CSS实现又不是不行。复杂点?封装一个动画库。

那为什么要用游戏引擎呢?

因为你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。

它提供游戏开发时需要的常见功能︰引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能。

游戏引擎通常会包含渲染器，2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。

前端开发过渡到游戏开发

需要先有一个明确的认知︰前端开发和游戏开发不是相斥的。

现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。

其原因可能在于︰

1.接触前端开发的研发数量远大于接触游戏开发的数量(招聘成本高)

2.2d游戏引擎的上手门槛已经足够低（易上手)

3.活动H5中的游戏玩法的实现方式比较模糊(开发界限模糊)

现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力，也是游戏开发向web前端开发靠拢的一种表现。

因此，以web前端开发的视角看2d游戏引擎，无非是一套框架、一套解决方案而已。但是开发理念上还是有差别的︰游戏开发更关注内容。

游戏引擎

市面上常见游戏引擎
2D游戏引擎的技术架构
Web游戏引擎的渲染原理

市面上常见的游戏引擎

我们暂且不讨论一些端游的引擎，比如

Unreal(虚幻引擎，代表作《PUBG》)

Source(起源引擎，代表作《CS》、《Dota2》)、

Frostbite Engine(寒霜引擎,代表作《战地》、《极品飞车18》)

UnitrsD(代表作《炉石传说》、《王者荣耀》)

路要一步一步走，我们先看看我们作为前端开发最容易上手的引擎。

特定类型的客户端游戏引擎

The NVL Maker-文字冒险游戏制作器

No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。(基于Kirikiri/KAG开发,无数日厂GAL使用的引擎)

当然,由于缺乏迭代和运营，该游戏引擎算是比较小众的。evin 085也有一个活)工命5疏写，该游戏引擎算是比较小众的

Web游戏引擎

利用Canvas和 WebGL为底层技术抽象的图像绘制库（(往往还附带一些其他的功能)

Web游戏引擎的通用能力∶

预加载∶游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。
展示与图层、组合系统︰对于Web游戏编程而言，往往选择Canvas 或 WebGL作为渲染方式(大家可以想想为什么不用DOM作为渲染方式?)。而 Canvas和 WebGL作为底层的API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。
动画系统︰动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生JS中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。
音效和声音系统︰游戏相较于普通的Web前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。

Cocos

优势

平台支持能力好
完善的游戏功能支持
生态较好

缺点

3D能力仍在建设中
版本迭代快

Laya

优势

3D能力比较成熟，号称市场占有率90%
支持JS、TS、AS
引擎体积小

缺点

界面能力不友好
生态很差

Egret

优势

工具链比较完善
第三方库支持好
企业定制能力强

缺点

更新迭代遭瓶颈
生态较差

CreateJs & Phaser

这两个游戏引擎没有可视化界面。

以CreateJS为例︰

它是多个库的集合，EASELS(控制素材展示与组合)、TWEENJS(控制素材缓动动画)、SOUNDJS(控制声音)、PRELOADJS(控制加载)，通过预加载后的素材展示、动画、声音构成游戏。

Phaser游戏引擎，除了CreateJS为基础的展示、声音、动画、加载系统，还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。

功能引擎

大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。

功能引擎是专注某个方向能力的引擎，其特点是体积小、功能完善。特别是Pixijs和Three.js这两个渲染引擎，通常被误以为是一个完整的游戏引擎，但它们是专注渲染能力的渲染引擎。

下面介绍几种可能会经常接触的功能引擎∶

引擎名称	功能特点	应用场景
Pixi.js 2d渲染引擎	2d渲染能力强（尤其是WebGL) 轻量化使用	需要复杂的动画系统需要使用Canvas操作但是不想自己造轮子需要制作自己的2d游戏引擎
Three.js 3d渲染引擎	3d渲染能力强 API简介明了支持WebGL和CSS3D两种渲染模式	3D演示 3D类的H5游戏/小游戏 WebVR
Box2D.js 2d物理引擎	接口简单友好物理刚体仿真效果很强	物理仿真扩展游戏引擎能力

2D游戏引擎的技术架构

以Cocos的引擎架构为例子

Web游戏引擎的渲染原理

以Pixi的渲染流程为例子大致流程如下

1.创建一个Renderer渲染器，获取它的view (一个canvas对象)，添加到Dom Tree中。(或者指定Dom Tree中已经存在的canvas对象作为view)

2在MainLoop(主循环)中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。

3.从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)

4.WebGL的render方法执行过程

5.Canvas的render方法执行过程

游戏开发的技能树

PixiJS+Web开发

Pixi简介
在web项目中加载—个游戏玩法

Pixi简介

官网乍一看很像一个游戏引擎，但是上面也明确说了∶“用最快、最灵活的2DWebGL渲染器创建精美的数字内容”（谷歌机翻)。

因此它本质上还是一个渲染引擎，而且自称做得最好。

它不仅仅能做游戏，还能使用这个技术去创建任何交互式内容，比如APP，还能够在它的基础上做自己的游戏引擎。(AVG.js和 Phaser.js 的渲染引擎就是Pixi)

前置技术栈

Web前端开发基础
用过JSON文件，知道是用来干什么的
解过Canvas的绘图API

Web项目中加载一个游戏玩法

1.安装和引入

npm安装或者通过script标签引入

2.创建Pixi应用和舞台(Stage)

3.显示一张图片

首先理解一个概念:Sprite(精灵) 学习CSS的时候可能有听过精灵图/雪碧图的概念，但是Pixi或者更多游戏引擎中Sprite的概念是一个用于承载图像的对象，你能够控制它的大小、位置等属性来产生交互、动画。创建和控制Sprite是学习Pixi很重要的部分，而创建一个Sprite需要了解图片怎么加载到Pixi中。

这里就有一个概念︰纹理缓存（指可以被GPU处理的图像)。 Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。现在有一个"images/cat.png"，我们就可以使用PIXl.utils.TextureCache["images/cat.png"]来在纹理缓存找到它。

使用前当然要先把它转化成纹理存储在纹理缓存中，这时候可以使用PIXILloader加载进来。