这是我参与「第四届青训营 」笔记创作活动的的第15天
游戏发展历史
广泛意义上的游戏
一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的在英语中，体育比赛（Game）也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。
狭义上的游戏
狭义上的游戏即通过游戏引擎制作的电子游戏
游戏的分类：根据玩法进行大类分，再经过小类细化
现在的游戏可能是多个分类的重合，但是会有一个主标签那么，一个小问题 前几年比较热门的MOBA属于哪类游戏呢？
多人在线战术竞技游戏 （编出來的），即时战略游戏(RTS)的一个子类。
前端场景下的游戏开发
开发链路
游戏开发的团队分工
组建一个最小但最完整的游戏开发团队只需要3个人：策划、程序、美术。当然，能力足够强的话可以作为独立开发者。
游戏开发的基本链路
游戏引擎
为什么要用游戏引擎
游戏引擎最大的游戏：渲染 引擎的诞生就是因为一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎。如果不使用引擎，你可以做复杂的动效渲染和交互吗？当然可以。方便吗？不一定。所以游戏引擎更像是一套解决方案，让你在制作某一类型的产品的时候能够提高你的开发效率。
- 你要做多平台移植？React Native、 Weex、Cordova等方案也可以做到。
- 你要做物理效果？Matter JS、ammo.js等物理引擎可以用。
- 你要做动画？CSS实现又不是不行。复杂点？封装一个动画库。
那为什么要用游戏引擎呢？ 因为你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。它提供游戏开发时需要的常见功能：引|擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开 发变得更简单：专业引擎通常会能比自制引擎表现出更好的性能。游戏引擎通常会包含渲染器，2D/3D 图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。
从前端开发过度到游戏开发
需要先有一个明确的认知：前端开发和游戏开发不是相斥的。 现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。 其原因可能在于：
- 接触前端开发的研发数量远大于接触游戏开发的数量（招聘成本高）
- 2d游戏引擎的上手门槛已经足够低（易上手）
- 活动H5中的游戏玩法的实现方式比较模糊（开发界限模糊）
现在很多主流的2d游戏引擎都支持使用 Javascripi进行开发同时使用相关的工程化能力，也是游戏开发向web前端开发靠拢的一种表现。 因此，以web前端开发的视角看2d游戏引擎，无非是一套框架、一套解决方案而已。但是开发理念上还是有差别的：游戏开发更关注内容。
游戏引擎
市面上常见的游戏引擎
我们暂且不讨论一些端游的引擎，比如
- Unreal （虚幻引擎，代表作《PUBG》、《GTA5》）
- Source（起源引擎，代表作《CS》 《Dota2)
- Frostbite Engine（寒霜引擎，代表作《战地》、《极品飞车18》：
- Unity3D (代表作《炉石传说》、《王者荣耀》）。
路要一步一步走，我们先看看我们作为前端开发最容易上手的引擎
Web 游戏引擎
利用 Canvas 和 WebGL 为底层技术抽象的图像绘制库（往往还附带一些其他的功能） Web游戏引擎的通用能力：
- 预加载：游戏中往往存在大量的静态素材，包括场景、元素．声音、动画、模型、贴图等，如果以原生 JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。
- 展示与图层、组合系统：对手 Web游戏编程而言，往往选择 Canvas 或 WebGL 作为渲染方式（大家可以想想为什么不用 DOM 作为渲染方式？）。而 Canvas 和 WebaL 作为底层的API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。
- 动画系统：动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生 JS中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。
- 音效和声音系统：游戏相较于普通的 Web 前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。
Cocos
优势
- 平台支持能力好
- 完善的游戏功能支持
- 生态较好
缺点
- 3D能力仍在建设中
- 版本迭代过快
Laya
优势
- 3D能力比较成熟，号称市场占有率90%
- 支持JS、 TS、AS
- 引擎体积小
缺点
- 界面能力不友好
- 生态很差
Egret
优势
- 工具链比较完善
- 第三方库支持好
- 企业定制能力强
缺点
- 更新迭代遭瓶颈
- 生态较差
CreateJS & Phaser
这两个游戏引擎没有可视化界面。
以Create JS为例：
它是多个库的集合，EASELJS（控制素材展示与组合）、TWEENJS（控制素材缓动动画）、SOUNDJS (控制声音）、PRELOADJS（控制加载)，通过预加载后的素材展示、动画、声音构成游戏。
Phaser 游戏引|擎，除了 Create JS 为基础的展示、声音、动画、加载系统，还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。
功能引擎
大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、UI 系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。
功能引擎是专注某个方向能力的引1擎，其特点是体积小、功能完善。特别是Pixi.js和Three. js这两个渲染引擎，通常被误以为是一个完整的游戏引擎，但它们是专注渲染能力的渲染引擎。
下面介绍几种可能会经常接触的功能引擎：
2D 引擎的技术架构
以Cocos的引擎架构为例子
Web游戏引擎的渲染原理
以Pixi的渲染流程为例子 大致流程如下
- 创建一个Renderer渲染器，获取它的view（一个canvas对象），添加到Dom Tree中。（或者指定Dom Tree中已经存在的canvas对象作为view）
- 在MainLoop（主循环）中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。
- 从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)
- WebGL的render方法执行过程
- Canvas的render方法执行过程
游戏开发的技能树
小游戏“小”在哪里
