小游戏开发 | 青训营笔记
这是我参与【第四届青训营】笔记创作活动的第15天
一、前端场景下的游戏开发
开发角色和链路
二、游戏引擎
渲染是游戏引擎的基础
引擎的诞生就是因为一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码, 后来发现这些代码几乎每个游戏都会用到，抽离出来就成了一个引擎。
如果不使用引擎，无法方便地做复杂的动效渲染和交互，因此游戏引擎更像是一套解决方案，能够提高你的开发效率。
多平台移植：
React Native、Weex、Cordova
物理效果：
MatterJS、ammo.js
动画：
简单的CSS实现，复杂点可以封装一个动画库。
特定类型的客户端游戏引擎
The NVL Maker
No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。该游戏引擎适用于前端的库AVG.js（内核是PixiJS作为渲染引擎）
RPG Maker
RPG Maker可以Low Code搭建一个关卡类型的游戏，适合代码能力不强但是想发挥自己的创意的开发者
Web游戏引擎
-
预加载
-
展示与图层、组合系统
-
动画系统
-
音效和声音系统
Cocos
优势
- 平台支持能力好
- 完善的游戏功能支持
- 生态较好
缺点
- 3D能力仍在建设
- 版本迭代过快
Laya
优势
- 3D能力比较成熟
- 支持JS、TS、AS
- 引擎体积小
缺点
- 界面能力不友好
- 生态很差
Egret
优势
- 工具链完善
- 第三方库支持比较好
- 企业定制能力强
缺点
- 更新迭代遭瓶颈
- 生态较差
Create&Phaser
功能引擎
Web游戏引擎渲染原理
三、游戏开发的技能树
游戏前端开发入门技能树
四、PixiJS+Web开发
Web项目中加载一个游戏玩法
1.安装和引入
npm安装或者通过script标签引入<script src="pixi.min.js"></script>
2.创建Pixi应用和舞台（Stage）
3.显示图片
添加到舞台
app.stage.addChild(sprite);
4.让图片动起来
设置位置和大小
sprite.width = 80;
sprite.height =120;
sprite.position.set(10,10);
sprite.scale.set(2,2);
sprite.rotation = 0.5;
游戏循环
app.tiker.add(delta => {
sprite.x += 1;
})
