这是我参与「第四届青训营 」笔记创作活动的第14天。
小游戏开发：
一：游戏发展历史：
1. 最广泛的定义游戏：
一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的在英语中，体育比赛(游戏)也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。
2. 狭义上的游戏：
通过游戏引擎制作的电子游戏、
二：前端场景下的游戏开发：
1. 游戏开发的团队分工：组建一个最小但最完整的游戏开发团队只需要3个人:策划、程序、美术。当然，能力足够强的话可以作为独立开发者。
2. 游戏引擎最大的优势：渲染：
引擎的诞生就是因为一家公司做了一款游戏.做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎。
所以游戏引擎更像是一套解决方案，让你在制作某类型的产品的时候能够提高你的开发效率。
游戏引擎通常会包含渲染器，2D/3D 图形元素，碰撞检测.物理引擎，声音.控制器支持，动画等部分。
3. 游戏开发：需要先有一个明确的认知:前端开发和游戏开发不是相斥的。
现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。
其原因可能在于:
1.接触前端开发的研发数量远大于接触游戏开发的数量(招聘成本高)
2.2d游戏引擎的上手门槛已经足够低(易上手)
3.活动H5中的游戏玩法的实现方式比较模糊(开发界限模糊现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力也是游戏开发向web前端开发靠拢的一种表现。
因此，以web前端开发的视角看2d游戏引擎，无非是一套框架、一套解决方案而已但是开发理念上还是有差别的:游戏开发更关注内容。
三：游戏引擎：
1. 特定类型的客户端游戏引擎：
a) The NVL Maker--文字冒险游戏制作器
NoCode形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。
b) RPG Maker：RPG Maker可以Low Code搭建一个关卡类型的游戏.适合代码能力不强但是想发挥自己的创意的开发者。
c) Web游戏引擎：Web游戏引擎的通用能力:
预加载:游戏中往往存在大量的静态素材.包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。
展示与图层、组合系统：对于Web游戏编程而言，往往选择Canvas或WebGL作为渲染方式(大家可以想想为什么不用DOM作为渲染方式? )。而Canvas和WebGl作为底层的API，接口非常基础。需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。
动画系统:动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生JS中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大.抽象程度低所以需要游戏引擎动画系统。
音效和声音系统：游戏相较于普通的Web前端而言需要更加立体、及时的反馈.声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。
1. Cocos：
优势：平台支持能力好、完善的游戏功能支持、生态较好
缺点：3D能力仍在建设中、版本迭代过快
2. Laya：
优势：3D能力比较成熟，号称市场占有率90%、支持]S、TS、AS、引擎体积小
缺点：界面能力不友好、生态很差
3. Egret：
优势：工具链比较完善、第三方库支持好、企业定制能力强
缺点：更新迭代遭瓶颈、生态较差
2. 功能引擎：大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是宜染引擎和物理引擎。
功能引擎是专注某个方向能力的引擎，其特点是体积小、功能完善。特别是Pixijs和Three js这两个渲染引擎，通常被误以为是-个完整的游戏引擎.但它们是专注渲染能力的渲染引擎。
3. Web游戏引擎的渲染原理：
以Pixi的渲染流程为例子
大致流程如下
a) 创建一个Renderer渲染器.获取它的view (一个canvas对象)， 添加到Dom Tree中。(或者指定Dom Tree中已经存在的canvas对象作为view)
b) 在MainLoop (主循环)中调用Renderer render)并传入一个DisplayObject作为根节
点开发渲染。
c) 从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)
d) WebGl的render方法执行过程
render(displayobject, renderTexture, clear, transform, skipUpdateTransform) {
//1.应用变换(GPU级别)
this.projection. transform = transform;
// 2.渲染纹理绑定与BatchRender ing处理
this. renderTexture. bind( renderTexture);
this . batch. currentRenderer .start( );
// 3. 执行元素渲染，将顶点、索引和纹理等数据添加到Ba tchRender ing中
display0bject. render( );
// 4.执行renderer的绘制方法
this .batch. currentRenderer . flush( );
//根据传入的c lear与renderTexture参数对纹理的处理. . .
// 5.清空变换
this. projection. transform = null;
}
四：PiziJS+Web开发：
1. 前置技术栈
Web前端开发基础
用过JSON文件，知道是用来于什么的
了解过Canvas的绘图API
2. 加载一个游戏玩法
a) 安装和引入
npm安装或者通过script标签引入<script src=”pixi.min js"> </script>
b) 创建Pixj应用和舞台(Stage)
c) 显示一张图片:
首先理解一个概念: Sprite (精灵)学习CSS的时候可能有听过精灵图/雪碧图的概念，但是Pixi或者更多游戏引擎中Sprite的概念是一个用于承载图像的对象，你能够控制它的大小、位置等属性来产生交互、动画。
创建和控制Sprite是学习Pixi很重要的部分，而创建个Sprite需要了解图片怎么加载到Pixi中。
这里就有一个概念:纹理缓存(指可以被GPU处理的图像)。Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。现在有一个"images/cat.png".我们就可以使用PIXl.utils. TextureCache["images/cat png ]来在纹理缓存找到它。使用前当然要先把它转化成纹理存储在纹理缓存中，这时候可以使用PIXIloader加载进来。
d) 现在已经创建了一个Sprite了。下一步就是显示它。
舞台是用来包裹你所有精灵的主要容器。
(重点:不应该看见任何没有被加入舞台的精灵)我们要显示图像就得把它添加到舞中。
e) 让图片动起来：前面我们说到了可以设置Sprite的位置和大小
六：CocosCreator编辑器开发
1. 概念：它是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。
2. 工作流:
a) 创建项目
b) 搭建场景：数据驱动和场景为核心、组件式开发为核心
节点：(cc.Node) 是承载组件的实体，我们通过将具有各种功能的组件(比如Sprite、 Spine、 Label) 挂载到节点上，来让节点具有各式各样的表现和功能。
c) 导入资源+显示资源：从操作系统中的其他窗口拖拽文件到CocosCreator窗口中的资源管理器面板上，就能够从外部导入资源。该操作会自动复制资源文件到项目资源文件夹下，并完成导入操作。然后把图片拖到层级管理器即可以生成一个ccSprite。
d) 脚本挂载：在Cocos Creator中对应的节点把脚本挂载上去。
e) 运行调试
f) 构建：可以选择多平台
