前言

这是我参与「第四届青训营」笔记创作活动的第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 中的对应节点吧脚本挂载上去

运行调试

总结😁🧐🤓

努力学习，掌握必要的技术栈，持续创新激发创造，开发属于你的个性化游戏吧！

Web小游戏认识 | 青训营笔记

前言