这是我参与「第四届青训营」笔记创作活动的的第16天
本堂课重点内容
- 游戏引擎
详细知识点介绍
游戏发展历史
-
广泛意义上的游戏
最广泛的定义 —种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的 在英语中，体育比赛(Game)也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏
-
狭义上的游戏
狭义上的游戏即通过游戏引擎制作的电子游戏 游戏的分类:根据玩法进行大类分，再经过小类细化
现在的游戏可能是多个分类的重合，但是会有一个主标签
| 动作类（ACT） | 冒险类（AVG） | 模拟类 | 角色扮演类（RPG） | 策略类（SLG） | 其余分支 |
|---|---|---|---|---|---|
| 射击游戏 | 文字冒险游戏 | 模拟经营游戏 | +动作 | 回合制战略游戏 | 音乐游戏 |
| 格斗游戏 | 动作冒险游戏 | 模拟养成游戏 | +模拟 | 回合制战术游戏 | 休闲游戏 |
| 动作冒险游戏 | 视觉小说 | 模拟沙盒游戏 | +策略 | 即时战略游戏 | 体育游戏 |
| 动作角色扮演游戏（ARPG） | 解谜冒险游戏 | +冒险 | 即时战术游戏 | 竞速游戏 | |
| 模拟动作游戏 | 恋爱冒险游戏 |
前端场景下的游戏开发
游戏开发的团队分工： 组建一个最小但最完整的游戏开发团队只需要3个人:策划、程序、美术
当然，能力足够强的话可以作为独立开发者
开发链路和角色
游戏开发的基本链路
为什么要用游戏引擎
游戏引擎最大的优势：渲染
引擎的诞生就是因为一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎 如果不使用引擎，你可以做复杂的动效渲染和交互吗?当然可以。方便吗?不一定。 所以游戏引擎更像是一套解决方案、让你在制作某一类型的产品的时候能够提高你的开发效率
那为什么要用游戏引擎呢? 因为你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化 它提供游戏开发时需要的常见功能:引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能
游戏引擎通常会包含渲染器，2D/3D 图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分
前端开发过渡到游戏开发
需要先有一个明确的认知：前端开发和游戏开发不是相斥的
现在市场上很多 H5 游戏、小游戏都是 Web 前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发 其原因可能在于：
-
接触前端开发的研发数量远大于接触游戏开发的数量(招聘成本高)
-
2D 游戏引擎的上手门槛已经足够低(易上手)
-
活动 H5 中的游戏玩法的实现方式比较模糊(开发界限模糊)
现在很多主流的 2D 游戏引擎都支持使用 Javascript 进行开发同时使用相关的工程化能力，也是游戏开发向 web 前端开发靠拢的一种表现
因此，以 web 前端开发的视角看 2D 游戏引擎，无非是一套框架、一套解决方案而已
但是开发理念上还是有差别的：游戏开发更关注内容
游戏引擎
市面上常见的游戏引擎
我们暂且不讨论一些端游的引擎，路要一步一步走，我们先看看我们作为前端开发最容易上手的引擎
特定类型的客户端游戏引擎
-
The NVL Maker No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏
当然，由于缺乏迭代和运营，该游戏引擎算是比较小众的。 也有一个适用于前端的库 AVG.js Project (内核是 PixiJS 作为渲染引擎)
-
RPG Maker
RPG Maker 可以 Low Code 搭建一个关卡类型的游戏，适合代码能力不强但是想发挥自己的创意的开发者
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
这两个游戏引擎没有可视化界面
它是多个库的集合，EASELJS(控制素材展示与组合)、TWEENJS(控制素材缓动动画)、 SOUNDJS（控制声音)、PRELOADJS(控制加载)，通过预加载后的素材展示、动画、声音构成游戏 Phaser 游戏引擎，除了 CreateJS 为基础的展示、声音、动画、加载系统，还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能
功能引擎
大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、Ul 系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎 功能引擎是专注某个方向能力的引擎，其特点是体积小、功能完善。特别是 Pixi.js 和 Three.js 这两个渲染引擎，通常被误以为是一个完整的游戏引擎，但它们是专注渲染能力的渲染引擎 下面介绍几种可能会经常接触的功能引擎：
| 引擎名称 | 功能特点 | 应用场景 |
|---|---|---|
| Pixi.js 2D 渲染引擎 | 2D 渲染能力强（尤其是 WebGL） 轻量化使用 | 需要复杂的动画系统 需要复杂的图片渲染形式 需要使用Canvas操作但是不想自己造轮子 需要制作自己的 2D 游戏引擎 |
| Three.js 3D 渲染引擎 | 3D 渲染能力强 API 简洁明了 支持 WebGL 和 CSS3D 两种渲染模式 | 3D 演示 3D 类的 H5 游戏/小游戏 WebVR |
| Box2D.js 2D 物理引擎 | 接口简单友好 物理刚体仿真效果很好 | 物理仿真 扩展游戏引擎能力 |
游戏开发的重要理念
把游戏开发过程当做一个游戏，在规则(自己的技术栈、限定主题、限定资源)的约束下通过创意和技术力挑战一个高质量的游戏吧!
课后个人总结
通过本节课的学习，我认为小游戏开发的核心的问题就两个，一个是实现，一个是设计。课程讲了设计中的一些想法和注意事项，总的来讲是偏向于理论知识的。通常来说，如果没有前面的实现的基础，去学习小游戏开发的话，大多数情况下还是流于形式，很难很好的学以致用，所以我们更应该寻求更系统的知识体系学习。
引用参考
第四届字节跳动青训营「小游戏开发」课程
