这是我参与「第四届青训营 」笔记创作活动的的第9天
一. 游戏发展历史
- 广义：一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的。在英语中，体育比赛(Game)也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。
- 狭义：通过游戏引擎制作的电子游戏。
二. 前端场景下的游戏开发
1. 开发链路和角色
游戏开发的团队分工
组建一个最小但最完整的游戏开发团队只需要3个人：策划、程序、美术。当然，能力足够强的话可以作为独立开发者。
游戏开发的基本链路
2. 为什么要用游戏引擎
游戏引擎最大的游戏：渲染
引擎的诞生就是因为一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎。所以游戏引擎更像是一套解决方案，让你在制作某一类型的产品的时候能够提高你的开发效率。
使用游戏引擎，你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。
它提供游戏开发时需要的常见功能:引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能。
游戏引擎通常会包含渲染器，2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。
3. 前端场景下的游戏开发
需要先有一个明确的认知:前端开发和游戏开发不是相斥的。现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。其原因可能在于:
- 接触前端开发的研发数量远大于接触游戏开发的数量(招聘成本高)
- 2d游戏引擎的上手门槛已经足够低(易上手)
- 活动H5中的游戏玩法的实现方式比较模糊(开发界限模糊)
现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力，也是游戏开发向web前端开发靠拢的一种表现。
因此，以web前端开发的视角看2d游戏引擎，无非是一套框架、一套解决方案而已。但是开发理念上还是有差别的：游戏开发更关注内容。
三. 游戏引擎
1. 特定类型的客户端游戏引擎
The NVL Maker——文字冒险游戏制作器
No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。当然，由于缺乏迭代和运营，该游戏引擎算是比较小众的。
RPG Maker
RPG Maker可以Low Code搭建一个关卡类型的游戏，适合代码能力不强但是想发挥自己的创意的开发者。
2. Web游戏引擎
利用Canvas和 WebGL为底层技术抽象的图像绘制库（往往还附带一些其他的功能)
Web游戏引擎的通用能力：
- 预加载： 游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。
- 展示与图层、组合系统： 对于Web游戏编程而言，往往选择Canvas或 WebGL作为渲染方式(大家可以想想为什么不用DOM作为渲染方式?）。而Canvas和 WebGL 作为底层的API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。
- 动画系统： 动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生JS 中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。
- 音效和声音系统： 游戏相较于普通的Web前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。
Web游戏引擎-Cocos
优势：平台支持能力好；完善的游戏功能支持；生态较好。
缺点：3D能力仍在建设中；版本迭代过快。
Web游戏引擎-Laya
优势：3D能力比较成熟,号称市场占有率90%；支持JS、TS、AS；引擎体积小。
缺点：界面能力不友好；生态很差。
Web游戏引擎-Egret
优势：工具链比较完善；第三方库支持好；企业定制能力强。
缺点：更新迭代遭瓶颈；生态较差。
Web游戏引擎-CreateJS & Phaser
以CreateJS 为例，它是多个库的集合，EASELJS(控制素材展示与组合)、TWEENJS(控制素材缓动动画)、SOUNDJS(控制声音)、PRELOADJS(控制加载)，通过预加载后的素材展示、动画、声音构成游戏。
Phaser 游戏引擎，除了CreateJS为基础的展示、声音、动画、加载系统，还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。
3. 功能引擎
大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、Ul系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。
功能引擎是专注某个方向能力的引擎，其特点是体积小、功能完善。特别是Pixi.js和Three.js这两个渲染引擎，通常被误以为是一个完整的游戏引擎，但它们是专注渲染能力的渲染引擎。
pixi.js 2d渲染引擎
功能特点： 2d渲染能力强（尤其是WebGL)；轻量化使用。
应用场景： 需要复杂的动画系统；需要复杂的图片渲染形式；需要使用Canvas操作但是不想自己造轮子；需要制作自己的2d游戏引擎。
three.js 2d渲染引擎
功能特点： 3d渲染能力强；API简洁明了；支持WebGL和CSS3D两种渲染模式。
应用场景： 3D演示；3D类的H5游戏/小游戏；WebVR。
box2d.js 2d渲染引擎
功能特点： 接口简单友好；物理刚体仿真效果很强。
应用场景： 物理仿真；扩展游戏引擎能力。
四. 游戏开发的技能树
五. PixiJS + Web 开发
1. Pixi简介
PixiJS官网乍一看很像一个游戏引擎，但是上面也明确说了：“用最快、最灵活的2DWebGL渲染器创建精美的数字内容”(谷歌机翻)。
- 它本质上还是一个渲染引擎，而且自称做得最好。
- 它不仅仅能做游戏，还能使用这个技术去创建任何交互式内容，比如APP， 还能够在它的基础上做自己的游戏引擎。(AVG.js 和Phaserjs 的渲染引擎就是Pixi)
前置技术栈
-
Web前端开发基础
-
用过JSON文件，知道是用来干什么的
-
了解过Canvas的绘图API
2. 在web项目中加载一个游戏玩法
- 安装和引入
- 创建Pixi应用和舞台（Stage）
- 显示一张图片
- 让图片动起来
- 然后加亿点点细节CacheAsBitmap - PixiJS Examples
六. Cocos Creator 编辑器开发
1. Cocos Creater介绍
Cocos+界面编辑 它是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。
2. 编辑器集成的能力
Cocos的工作流
创建项目
搭建场景
导入资源 + 显示资源
脚本挂载
运行调试
3. 游戏的上线
构建游戏，可以选择多平台，产物即对应生成，比如Web Mobile。
产物可以直接部署在对应的平台，比如web产物部署到服务器、小游戏产物部署到开发者平台。
七. 小游戏“小”在哪里
游戏发布平台的差异性：
- 游戏逻辑上，没有什么差别
- 游戏引擎的不同
- 平台API的差异（最需要关注）
- 渲染等差异不大
游戏开发的重要理念：
- 把游戏开发过程当做一个游戏，在规则（自己的技术栈、限定主题、限定资源）的约束下通过创意和技术力挑战个高质量的游戏吧！
- 创意不要被约束了
