小游戏开发
这是我参与「第四届青训营 」笔记创作活动的的第18天
1.重点内容
游戏的历史和游戏开发
2.重要的知识点
- 游戏的发展历史
- 前端和游戏开发的关系
- 游戏引擎
- 游戏开发相关技术
- 小游戏的平台差异性
3.详尽的知识点
游戏的发展历史
广义上讲，一种有组织的玩耍，一般以娱乐为目的。
从狭义上来讲，游戏是通过游戏引擎制作的电子游戏。
-
1970 街机家用电脑
- 银河战士
-
1980 街机的黄金时代，早期的网络游戏
- 合金装备
-
1990 掌机，3D游戏
- 雷神之锤
-
2000 网络游戏崛起，游戏控制方式方式变革
- 魔兽世界
-
2010 高分辨率，开发成本，移动端小游戏
- 王者荣耀
-
2020
- ...
前端和游戏开发的关系
游戏开发的团队
-
游戏团队
-
策划
- 数值策划
- 内容策划
-
美术
- 原画
- 2D/3D
- 音效/动效
-
程序
- 前端
- 后端
-
其他支持
- QA
- 运营
- 运维
- 市场
-
游戏开发的基本链路
-
策划案
-
立项阶段
- 创意
- 市场
-
-
游戏demo
-
原型阶段
- 游戏玩法
- 开发可行性
-
-
体验版本
-
Alpha阶段
- 宏观设计
- 剧情/角色设计
- 音效/UI设计
- 体验设计
-
Beta阶段
- 测试
- 迭代
-
运营阶段
-
游戏引擎
游戏引擎就是公司在开发多款游戏时，复用的代码可以抽离出来成为游戏引擎。
游戏引擎的使用
- 提供许多组件，缩短开发时间
- 渲染效率和性能优化
常见游戏引擎
-
Unreal
-
Source
-
Frostbite Engine
-
Unity3D
-
The NVL Maker
-
RPG Maker
-
Web游戏引擎
- 使用Canvas和WebGL为底层技术
- 预加载
- 展示与图层，组合系统
- 动画系统
- 音效和声音系统
-
Laya
- 3D能力成熟
- 支持JS，TS
- 体积小
- 界面不友好
- 生态较差
-
Egret
- 工具链完善
- 第三方支持好
- 企业定制能力强
- 更新迭代有瓶颈
- 生态较差
-
CreateJS & Phaser
| 引擎名称 | 功能特点 | 应用场景 |
|---|---|---|
| Pixi.js | 2D渲染能力强 轻量化使用 | 复杂的动画系统 复杂的图像渲染形式 使用Canvas操作 需要制作自己的游戏引擎 |
| Three.js | 3D渲染能力强 API简洁明了 支持WebGL和CSS3D | 3D演示 H5游戏 WebVR |
| Box2D.js | 接口简单友好 物理刚体模拟效果强 | 物理仿真 拓展游戏引擎能力 |
游戏渲染流程
- 创建一个Randerer渲染器
- 在主循环中调用Renderer.render()并传入DisplayObject作为根节点开发渲染
- 从场景树的根节点开始，以ZIndex为序，从小到大进行遍历，对每个节点进行渲染操作
游戏开发相关技术
-
计算机基础
- 计算机网络
- 计算机图形学
- 操作系统
-
程序
- JS/TS
- 常用算法
- 设计模式
-
游戏引擎
-
2d
- Cocos
- Laya
- Egret
-
3d
- Three.js
- Cocos Creator 3D
- Unity3D
-
-
深入功能引擎
-
渲染引擎
- Pixi
- 渲染管线
- 动画系统
- 粒子系统
-
物理引擎
- Box2D
- Matter.js
-
-
其他
- 浏览器性能优化
- Git/SVN
- 打包
小游戏的平台差异性
| H5游戏 | 微信/字节小游戏 |
|---|---|
| JS游戏逻辑 | JS游戏逻辑 |
| H5游戏引擎 | 适配H5引擎 |
| 浏览器API | 小游戏API |
| 浏览器 | iOS/安卓 |
| IOS/Android渲染 | IOS/Android渲染 |
4.课后总结
游戏作为现代的消遣手段，在日常生活中十分常见，因此若是有志向做游戏，那么从前端游戏开发入门也是十分有帮助的。
