这是我参与「第四届青训营 」笔记创作活动的的第18天。
游戏发展历史
1、广泛意义上的游戏
- 最广泛地定义：一种有组织的玩耍，一般是以娱乐为目的，有时也有教育的目的。
- 在英语中，体育比赛也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。
2、狭义上的游戏
- 即通过游戏引擎制作的电子游戏。
- 游戏的分类：根据玩法进行大分类，再经过小类细化。
前端场景下的游戏开发
1、开发链路和角色
游戏开发的基本链路
2、为什么要用游戏引擎
-
游戏引擎最大的游戏：渲染
-
游戏引擎更像是一套解决方案，让你在制作某一类别产品时能够提高开发效率。
-
原因
-
能够给出一套完整的实现方案，花费更少的时间作出更好的效果。
-
提供游戏开发时需要的常见功能：引擎会提供很多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单；专业引擎通常会能比自制引擎表现出更好的性能。
-
游戏引擎通常会包含渲染器，2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。
-
3、前端开发过渡到游戏开发
-
前端开发和游戏开发不是相斥的
-
现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发，
-
原因在于：
- 接触前端开发的研发数量远大于接触游戏开发的数量（招聘成本高）。
- 2d游戏引擎的上手门槛已经足够低（易上手）。
- 活动H5中的游戏玩法的实现方式比较模糊（开发界限模糊）。
游戏引擎
1、特定类型的客户端游戏引擎：
The NVL Maker——文字冒险游戏制作器
No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。
2、Web游戏引擎
利用Canvas和WebGL为底层技术抽象的图像绘制库
Web游戏引擎的通用功能：
-
预加载：游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。
-
展示与图层、组合系统：对于Web游戏编程而言，往往选择Canvas或WebGL作为渲染方式。而Canvas和WebGL作为底层的API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。
-
动画系统：动画往往被分为缓动动画和逐帧动画。缓动动画系统在原生JS中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。
-
音效和声音系统：游戏相较于普通的Web前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效往往包含了声音大的播放、音量、截止、暂停等功能的集成。
3、常见的Web游戏引擎
-
Cocos
-
优势：平台支持能力好 完善的游戏功能支持 生态较好
-
缺点：3D能力仍在建设中 版本迭代过快
-
-
Laya
-
优势：3D能力比较成熟，号称市场占有率90% 支持JS、TS、AS 引擎体积小
-
缺点：界面能力不友好 生态很差
-
-
Egret
-
优势：工具链比较完善 第三方库支持好 企业定制能力强
-
缺点：更新迭代遭瓶颈 生态较差
-
-
CreateJS & Phaser
-
以CreateJS为例
-
没有可视化界面。它是多个库的集合，EASELJS（控制素材展示与组合）、TWEENJS（控制素材缓动动画）、SOUNDJS（控制声音）、PRELOADJS（控制加载），通过预加载后的素材展示、动画、声音构成游戏。
-
Phaser游戏引擎，除了CreateJS为基础的展示、声音、动画、加载系统，还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。
-
4、功能引擎
-
大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。
-
功能引擎是专注某个方向的引擎，其特点是体积小、功能完善。特别是Pixi.js和Three.js这两个渲染引擎，通常会被误以为是一个完整的游戏引擎，但它们是专注渲染能力的渲染引擎。经常会接触的功能引擎：
5、Web游戏引擎的渲染原理
以Pixi的渲染流程为例子
- 创建一个Renderer渲染器，获取它的view（一个csnvas对象），添加到Dom Tree中。（或指定Dom Tree中已经存在的canvas对象作为view）。
- 在MainLoop（主循环）中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。
- 从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。
- WebGL的render方法执行过程。
- Canvas的render方法执行过程。
