前言
这是我参与「第四届青训营」笔记创作活动的第14天
下面来简单学习一下小游戏开发吧!😁😀😄
游戏发展历史
广义上的游戏
最广范的定义:
一种有组织的玩耍,一般是以娱乐为目的,有时也有教育目的,在英语中,体育比赛也是游戏,只有其活动带有目的,规则,挑战和互动,我们都可以吧其归为游戏
举个例子: 拔河作为体育运动具有一定的规则约束,对于参赛者的体力和策略选择有要求,双方具有对抗性和互动,最终通过胜利来获取心理上的愉悦,因此可以定义为游戏。
把范围缩小一下:电子游戏,在游戏中玩家依托电子设备(手机,电脑)经行交互。
狭义上的游戏
狭义上的游戏即通过游戏引擎制作的电子游戏
游戏的分类:根据玩法经行大分类,在经过小类细分
那么,那些才算是一个游戏
比如: 跳一跳,虽然小,但也算是游戏
前端场景下的游戏开发
游戏开发角色和链路
游戏开发团队分工 组建一个最新奥但完整的游戏开发团队为3人:策划,程序,美术
游戏开发的基本链路
为什么要用游戏引擎
引擎的诞生是一家公司做了一款游戏,做下一款游戏时服用了上一款游戏的代码,后来发现每款游戏都几乎用了这些代码,所以就把这些代码剥离出来成为一个引擎。
如果不用引擎,你也可以做复杂的动画效果渲染交互,但并不方便,所以游戏引擎更像一套解决方案,让你在制作某一类型的产品时候能够提高你的开发效率
-
用ReactNative,Weex,Cordova等方案也可以做多平台移植
-
用MatterJS,ammo.js等物理引擎也可以做物理效果
-
用CSS也可实现动画
有这些方案为什么还要用游戏引擎呢?
因为它可以提供一套完整的解决方案,即不需要自己去封装,让你花更少的时间做出更好地效果,特别是渲染效率和性能优化。
引擎提供了游戏开发时需要的常见功能:引擎会提供好多的组件,减少开发时间,降低成本;专业引擎通常会比自制的引擎性能更好
游戏引擎通常包含渲染器,2D/3D图片元素,碰撞检测,物理引擎,声音,控制器支持,动画等部分。
前端开发过渡到游戏开发
现在市场上很多的H5游戏,小游戏都是web前端开发的,而不是游戏团队开发的。
原因分析:
- 接触前端开发的数量远大于接触游戏开发的数量(招聘成本高)
- 2d游戏引擎的上手门槛很低
- 开发界限模糊,现在很多主流的2d游戏引擎都支持使用JavaScript进行开发同时使用相关工程化能力,也是游戏开发向前端靠拢的一种表现
因此,以web前端开发的视角看2d游戏引擎,无非就是一套框架,一套解决方案而已。 但是开发理念还是有差别的:游戏开发更注重内容。
游戏引擎
市场上常见的游戏引擎
- Unreal(虚幻引擎,《PUBG》)
- Source(起源引擎,《CS》)
- Unity(炉石传说)
先来看看我们作为前端开发比较容易上手的引擎
特定类型的客户端游戏引擎:
The NVL Maker——文字冒险游戏制作器
No Code 新式的开发,只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏
由于缺乏迭代和运营,改引擎算是比较小众的
web游戏引擎
通用能力:
- 预加载:游戏引擎的预加载引擎将加载时机,过程给抽象,解决编码效率问题
- 展示于图层,组合系统
- 动画系统
- 声音音效系统
web游戏引擎——CoCos
优势:
- 平台支持能力好
- 完善的游戏功能支持
- 生态较好
缺点:
- 3D能力任在建设中
- 版本迭代过快
web游戏引擎——Laya
优势:
- 3D能力比较成熟,号称市场占有率90%
- 支持JS,TS,AS
- 引擎体积小
缺点:
- 界面能力不友好
- 生态很差
web游戏引擎——Egret
优势:
- 工具链比较完善
- 第三方库支持好
- 企业定制能力强
缺点:
- 更新迭代遭瓶颈
- 生态较差
web游戏引擎——CreateJS & Phaser
CreateJS & Phaser这两个没有可视化界面。
如CreateJS:它是多个库集合而成,EASELJS(控制素材展示于组合),PRELOADJS(控制加载),通过预计载后,素材展示,动画,声音构成游戏。
功能引擎
大型游戏引擎由小的功能引擎组装,包含渲染引擎,物理引擎,声音,动画引擎等组合而成。
功能引擎是专注某个方向的引擎,它体积小,功能完备。而Pixi.js和Three.js就是渲染引擎。
下面列举几种功能引擎:
web游戏引擎的渲染原理
以Pixi的渲染流程为例子 大致流程如下:
- 创建一个Renderer渲染器,获取他的view(一个canvas对象),添加到Dom Tree中。
- 在MainLoop(主循环)中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染
- 从场景树的根节点开始,以Zindex为序从小到大经行深度优先遍历,对每个节点进行渲染操作,有后往前吧整个场景绘制一次(CanvasRenderer)
- WebGL的render方法执行过程
5. Canvas的render方法执行过程
游戏开发的技能树
PixiJS+Web开发
PixiJS:用最快的,最灵活的2DWebGL渲染器创建精美的数字内容
AVG.js 和 Phaser.js的渲染引擎就是Pixi
使用:
- 安装和引入:
npm安装或者引入
<script src="pixi.min.js"></script>
- 创建Pixi应用和舞台(Stage)
- 显示一张图片
首先理解一下什么是Sprite: 他是图片精灵,是用来绘制图集的控件,精灵可以在一张大图中去截取一部分(大图就是整体图像集合(Atlas),而截取的小图就是一个精灵),然后给精灵命名,使用时通过精灵的名称就能直接绘制,并且精灵还可以用来制作动画
现在已经创建了一个Sprite,下面就是显示它
app.stage.addChild(sprite)
这时候我们运行程序就能看到效果了
- 让图片动起来,设置Sprite的位置和大小
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
})
Cocos Creator 编辑器开发
Cocos Creator 是一个完整的游戏开发解决方案,包含了轻量高效的跨平台游戏引擎,以及能让你根块开发游戏的各种图形界面工具
Cocos工作流
使用
- 创建项目
- 搭建场景
节点是承接组件的实体,我们通过将具有各种功能的组件(比如Sprite,Spine,Label)挂在到节点上,来时节点具有各式各样的表现和功能 3. 导入资源&显示资源
从操作系统中的其他窗口拖拽文件到Cocos Creator 窗口中的资源管理器面板上,解可从外部导入资源, 这样会自动复制资源文件到项目资源文件夹下,并导入操作,再把图片托到层级管理器即可生成一个cc.Sprite.
- 脚本挂在
然后在Cocos Creator 中的对应节点吧脚本挂载上去
- 运行调试
总结😁🧐🤓
努力学习,掌握必要的技术栈,持续创新激发创造,开发属于你的个性化游戏吧!