这是我参与「第四届青训营 」笔记创作活动的第3天
开发链路和角色
游戏开发的团队分工：
组件一个最小但完整的游戏开发团队只需要3个人：策划、程序、美术。
具体来看，策划包括数值策划和内容策划；美术包括原画、2D/3D和音效/动效；程序包括前端和后端；还有其他支持，例如QA、运营、运维、市场等。
游戏开发的基本链路：
为什么要用游戏引擎？游戏引擎最大的作用：渲染
游戏引擎可以复用所有游戏都会用到的代码，提高开发效率。
游戏引擎通常包含渲染器，2D/3D图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。
以WEB前端开发的视角看2D游戏引擎，无非是一套框架，一套解决方案。但是开发理念上还是有差别的：游戏开发更关注内容。
游戏引擎
市面上常见的游戏引擎：
- Unreal（虚幻）
- Source（起源）
- Frostbite Engine（寒霜）
- Unity3D
上面的都是大型专业的游戏引擎，还有一些最容易上手的游戏引擎：
- 特定类型的客户端游戏引擎：The NVL Maker，文字冒险游戏制作器，No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。
- 适用于前端的库AVG.js，制作文字游戏。
- RPG Maker，以Low Code搭建一个官卡类型的游戏。
Web游戏引擎：利用Canvas和WebGL为底层技术抽象的图像绘制库。
Web游戏引擎的通用能力：
- 预加载
- 展示与图层、组合系统
- 动画系统
- 音效和声音系统
Web游戏引擎：
- Cocos
- Laya
- Egret
- CreateJS & Phaser
功能引擎：大型游戏引擎往往是由小的功能引擎组装成的。例如渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等。功能引擎就是专注于某个方向能力的引擎，特点是体积小，功能完善。
例如：
- Pixi.js：2D渲染引擎
- Three.js：3D渲染引擎
- Box2D.js：2D物理引擎
前端游戏开发技能树：
PixiJS
基本使用：
- npm安装或script引入
- 创建Pixi应用和舞台
- 把canvas添加到DOM Tree中
// 创建应用
const app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x1099bb
});
// 添加到DOM树
document.body.appendChild(app.view);
- Sprite：精灵，在游戏引擎中Sprite是用于承载图像的对象。PIXI使用纹理缓存来存储和引用Sprite所需要的纹理。
// 将图片素材加载到Pixi中
PIXI.loader.add("images/cat.png").load(res => {
let sprite = new PIXI.Sprite(
PIXI.loader.resources["images/cat.png"].texture
)
});
- 在舞台中显示创建的Sprite
app.stage.addChild(sprite);
- 可以设置sprite的属性
sprite.width = 80;
sprite.height = 120;
sprite.position.set(20, 20);
sprite.scale.set(2, 2);
sprite.rolation = 0.5;
- 游戏循环：游戏循环的代码每一帧都会调用一次
app.tiker.add(delta => {
sprite.x += 1;
});
Cocos Creator
Cocos Creator是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能快速开发游戏所需要的各种图形界面工具。
Cocos工作流：
