小游戏开发 ｜ 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第2天
分享要点：
- 游戏发展历史
- 前端场景下的游戏开发
- 游戏引擎
- 游戏开发的技能树
- PixiJS + Web 开发
- 小游戏“小”在哪里
一、游戏发展史
1、狭义上的游戏
狭义上的游戏即通过游戏引擎制作的电子游戏
2、游戏的分类：根据玩法进行大分类，再经过小类细化
二、前端场景下的游戏开发
1、开发角色和链路
2、使用游戏引擎
引擎能给出一套完整的实现方案，其包含许多组件，可以花更少的时间做出更好的效果。
3、前端开发过渡到游戏开发
前端开发和游戏开发不是互斥的，很多游戏由Web前端开发。
三、游戏引擎
1、市面上常见的游戏引擎
2、特定类型的客户端游戏引擎
The NVL Maker ——文字冒险游戏制作器
低代码形式开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。
RPG Maker
可以低代码搭建一个关卡类型的游戏，适合代码能力不强但是想发挥自己创业的开发者。
Web游戏引擎通用能力：
- 预加载： 游戏引擎中的预加载引擎将加载时机、加载过程难以抽象，解决加载编码中的效率问题。
- 展示与图层、组合系统： 常用的渲染方式Canvas和WbeGL作为底层的API，接口非常基础，需要用到大量编码来写简单的展示。
- 动画系统： 缓慢动画系统在原生JS中需要搭配帧渲染进行考量书写，代码量巨大，抽象程度低。
- 音效和声音系统
WEB游戏引擎——Cocos
优势：
- 平台支持能力好
- 完善的游戏功能支持
- 生态较好
缺点：
- 3D能力仍在建设中
- 版本迭代过快
WEB游戏引擎——Laya
优势：
- 3D能力比较成熟
- 支持JSTSAS
- 引擎体积小
缺点：
- 界面能力不友好
- 生态差
WEB游戏引擎——Egret
优势：
- 工具链比较完善
- 第三方库支持好
- 企业定制能力强
缺点：
- 更新迭代糟瓶颈
- 生态较差
3、功能引擎
大型游戏引擎往往是由小的功能引擎组成，包括渲染引擎、物理引擎、UI引擎等等。
功能引擎是专注于某个方向能力的引擎，体积小、功能完善。常用功能引擎如下：
4、Web 游戏引擎的渲染原理
以Pixi的渲染流程为例，大致流程如下：
-
创建一个Renderer渲染器，获取它的view（一个canvas对象），添加到Dom Tree中。
-
在 MainLoop中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。
-
从场景树的根节点开始，以zindex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次（CanvasRenderer）
-
WebGL的render方法执行过程
-
Canvas的render方法执行过程
四、游戏开发技能树
五、PixiJS+Web 开发
前置技术栈：
- Web前端开发基础
- 使用过JSON文件
- 了解Canvas的绘图API
在Web项目中加载一个游戏玩法
1、安装和引入
npm安装或者script标签引入
<script src="pixi.min.js"></script>
2、创建Pixi应用和舞台（Stage）
let app = new PIXI.Application({width:250,height:250});
document.body.appendChild(app.view);
let app = new PIXI.Application({
width:250,
height:250,
transparent:true,
forceCanvas:true,
})
3、显示一张图片
PIXI.loader.add("iamges/cat.png").load(res => {
let sprite = new PIXI.Sprite(
PIXI.loader.resources["images/cat.png"].texture
);
});
添加到舞台中
app.stage.addChild(sprite)
4、让图片动起来
sprite.width=80;
sprite.height=120;
sprint.position.set(10,10);
sprite.scale.set(2,2);
sprite.rotation=0.5;
达到每帧移动一个像素，需要用到游戏循环
app.tiker.add(delta => {
sprite.x += 1;
})
六、小游戏理解
1、游戏发布平台差异性
2、游戏开发重要理念：
激发创造（下面这句话说的不错）
