小游戏开发 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第18天 与大家分享小游戏开发知识，包括小游戏的知识及开发技能树，不足之处欢迎大家批评指正！
01.游戏发展历史
广泛意义上的游戏
- 最广泛的定义 一种有组织的玩耍，一般以娱乐为目的，有时具有教育目的
在英语中，体育比赛(Game)也是游戏，只要其活动本质带有目的、规则、挑战和互动，都可以把其称为游戏
-
例子 拔河比赛：体育活动，有一定的规则约束，对参与者的体力、策略选择有要求，双方对抗性互动，最终通过胜利获得心理上的愉悦，因此可以定义为游戏
-
缩小范围：电子游戏 在游戏中，玩家依托电子设备（如电脑、游戏机、手机等）进行交互
-
游戏发展历史
狭义上的游戏
- 定义
通过游戏引擎制作的电子游戏
- 分类 根据玩法进行大类分，再经过小类细化
现在的游戏可能是多个分类的重合，但是会有一个主标签
- MOBA属于哪类游戏？ 即时战略游戏(RTS)的一个子类
多人在线战术竞技游戏
02.前端场景下的游戏开发
开发链路和角色
游戏开发的团队分工
组建一个最小但最完整的游戏开发团队只需要3个人：策划、程序、美术。当然，能力足够强的话可以作为独立开发者。
游戏开发的基本链路
为什么要使用游戏引擎？
游戏引擎的诞生
游戏引擎最大的游戏：渲染
引擎的诞生：一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，就抽离出了一个引擎
游戏引擎更像是一套解决方案，让你在制作某类型产品时可以提高开发效率
多平台移植：React Native, Weex, Cordova等方案可以做到
物理效果：MatterJS, ammo.js等物理引擎
动画：CSS, 封装动画库
为什么用游戏引擎
它能够给你一套完整的实现方案，不需要你自己再去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。
它提供游戏开发时需要的常见功能：引擎提供许多组件，使用这些组件可以缩短开发时间，让开发变得简单；专业引擎通常会能比自制引擎表现出更好的性能
游戏引擎通常包含渲染器，2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分
前端开发过渡到游戏开发
前端开发和游戏开发互不相斥
市场上很多H5游戏，小游戏：Web前端开发制作
- 原因
- 接触前端开发的研发数量远大于接触游戏开发的数量（招聘成本高）
- 2D游戏引擎的上手门槛足够低（易上手）
- 活动H5中的游戏玩法实现方式较模糊（开发界限模糊）
现在很多主流的2D游戏引擎支持使用JavaScript进行开发同时使用相关的工程化能力，也是游戏开发向Web前端开发靠拢的一种表现
因此，以Web前端开发的视角看2D游戏引擎，无非是一套框架、一套解决方案
但开发理念有差别：游戏开发更关注内容
03.游戏引擎
特定类型的客户端游戏引擎
The NVL Maker —— 文字冒险游戏制作器 No Code 形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。
适合完全没有代码基础的开发者，只需要准备剧本和素材。
由于缺乏迭代和运营，该游戏引擎算小众，也有一个适用于前端的库
AVG.js Project: github.com/avgjs （内核是PixJS作为渲染引擎）
RPG Maker
RPG Maker可以Low Code搭建一个关卡类型的游戏，适合代码能力不强但是想发挥自己的创意的开发者
由 RPG Maker系列游戏引擎创造的Steam畅销游戏《To the moon》
Web游戏引擎
介绍
利用Canvas 和 WebGL 为底层技术抽象的图像绘制库（往往还带有一些其他的功能）
Web游戏引擎的通用能力：
-
预加载 游戏中往往存在大量静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中预加载引擎将加载时机、过程加以抽象，解决加载编码中的效率问题
-
展示与图层、组合系统 Web游戏编程不用DOM作为渲染方式，用Canvas, WebGL作为渲染方式。Canvas, WebGL作为底层的API，接口非常基础，需要用大量的编码来编写简单的展示，图形之间没有组合和图层，难处理元素组合与图层问题。渲染引擎、图层、组合系统应运而生。
-
动画系统 动画被分为缓动动画和逐帧动画。缓动动画系统在原生JS中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。
-
音效和声音系统 游戏相较于普通的Web前端而言需要更立体、及时的反馈，声音、音效是反馈的重要组成部分。声音和音效系统包含声音的播放、音量、截止、暂停等功能的集成
Cocos
- 优势
平台支持能力好
完善的游戏功能支持
生态较好
- 缺点
3D能力仍在建设
版本迭代过快
Laya
- 优势
3D能力比较成熟，号称市场占有率90%
支持JS，TS，AS
引擎体积小
- 缺点
界面能力不友好
生态很差
Egret
- 优势
工具链比较完善
第三方库支持好
企业定制能力强
- 缺点
更新迭代遭瓶颈
生态较差
CreateJS & Phaser
这两个游戏没有可视化界面。
CreateJS
功能引擎
大型游戏引擎：包含渲染引擎、物理引擎（最重要）、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。小的功能引擎组成
功能引擎：专注某个方向能力的引擎，特点——体积小、功能完善，特别是Pixi.js和Three.js这两个渲染引擎
可能经常接触的功能引擎：
2D游戏引擎的技术架构
以Cocos的引擎架构为例
