这是我参与「第四届青训营」笔记创作活动的第19天

一、本堂课重点内容：

本堂课主要讲述了游戏发展历史，前端场景下的游戏开发，游戏引擎，游戏开发的技能树和各种开发等等

二、详细知识点介绍：

前端场景下的游戏开发

团队分工:策划、程序、美术。

使用游戏引擎的原因

多平台移植：可以使用React Native、Weex、Cordova等方案

物理效果：可以使用MatterJS、ammo.js等物理引擎。

动画：可以使用CSS实现或者封装一个动画库。

使用游戏引擎的原因

提供一套完整的实现方案，特别是渲染效率和性能优化。它提供游戏开发时需要的常见功能:提供许多组件，缩短开发时间;专业引擎能表现出更好的性能。

游戏引擎通常会包含渲染器，2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。

游戏引擎

端游

Unreal
Source
Frostbite Engine
Unity3D

The NVL Maker—文字冒险游戏制作器

No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。

有一个适用于前端的库AVG.js Project

RPG Maker可以Low Code搭建一个关卡类型的游戏,适合代码能力不强但是想发挥自己的创意的开发者。

Web游戏引擎

利用Canvas 和 WebGL为底层技术抽象的图像绘制库（往往还附带一些其他的功能)

Web游戏引擎的通用能力:

预加载:游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象,解决加载编码中的效率问题。
展示与图层、组合系统:对于Web游戏编程而言，往往选择Canvas或 WebGL作为渲染方式(大家可以想想为什么不用DOM作为渲染方式?)。而 Canvas和 WebGL作为底层的API,接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。
动画系统:动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生JS中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。
音效和声音系统：游戏相较于普通的Web前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。

cocos

优势
- 平台支持能力好
- 完善的游戏功能支持生态较好
缺点
- 3D能力仍在建设中
- 版本迭代过快

laya

优势
- 3D能力比较成熟,号称市场占有率90%
- 支持JS、TS、AS
- 引擎体积小
缺点
- 界面能力不友好
- 生态很差

egret

优势
- 工具链比较完善
- 第三方库支持好
- 企业定制能力强
缺点
- 更新迭代遭瓶颈
- 生态较差

CreateJs & Phaser

没有可视化界面

渲染

以Pixi的渲染流程为例子

大致流程如下

创建一个Renderer渲染器，获取它的view (一个canvas对象)，添加到Dom Tree中。(或者指定Dom Tree中已经存在的canvas对象作为view)
在MainLoop(主循环)中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。
从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)
WebGL的render方法执行过程
Canvas的render方法执行过程

小游戏开发 ｜ 青训营笔记