小游戏开发 | 青训营笔记

Charlottex_x
307 阅读13分钟

这是我参与「第四届青训营 」笔记创作活动的的第15天

小游戏开发

01.游戏发展历史

广泛意义上的游戏

最广范的定义：

一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的，在英语中，体育比赛(Game)也是游戏，只有其活动带有目的、规则、挑战和互动，我们都可以把其归为游戏

举个例子：

拔河作为体育运动具有一定的规则约束，对于参赛者的体力和策略选择有要求，双方具有对抗性和互动，最终通过胜利来获取心理上的愉悦，因此可以定义为游戏。

我们把范围缩小一下：电子游戏

在游戏中玩家依托电子设备（如电脑、游戏机、手机）进行交互。

image.png

image.png

狭义上的游戏

狭义上的游戏即通过游戏引擎制作的电子游戏。

游戏的分类：根据玩法经行大分类，再经过小类细化。

image.png

现在的游戏可能是多个分类的重合，但是会有一个主标签。

那么，一个小问题

前几年比较热门的MOBA属于哪类游戏呢？

多人在线战术竞技游戏，即时战略游戏(RTS)的一个子类。

前面提到的游戏都太“大”了，那么下面这些游戏在你的视角能否判定为游戏呢？

To The Moon

image.png

跳一跳

image.png

抽奖H5

image.png

头号答人

image.png

02.前端场景下的游戏开发

开发链路和角色

组建一个最小但最完整的游戏开发团队只需要3个人：策划、程序、美术，不过如果一个人可以有能力兼顾这三个角色，也可以独立开发游戏，称为独立开发者。

image.png

游戏开发的基本链路见下图：

原型阶段并不是内测版本，只需要一个游戏Demo确定基本玩法，确定核心玩法后就已经产出一个合格的游戏Demo了，在Alpha阶段就需要产出一个内测版本，其中包含宏观设计（世界观）、剧情/角色设计、音效/UI设计、体验设计等，然后进入到Beta阶段，主要是 测试和迭代，很多游戏长期都处于这一阶段，因为这一阶段和运营阶段有一定的重合。

image.png

为什么要用游戏引擎

游戏引擎最大的优势：渲染。

引擎的诞生是一家公司做了一款游戏，做下一款游戏时复用了上一款游戏的代码，后来发现这些代码几乎每款游戏都会用到，所以就把这些代码抽离出来成为一个引擎。

如果不使用引擎，你也可以做复杂的动画效果渲染交互，但并不方便，所以游戏引擎更像一套解决方案，让你在制作某一类型的产品时候能够提高你的开发效率。

  • 多平台移植

    • React Native，Weex，Cordova等方案也可以做到。

  • 做物理效果

    • MatterJS,ammo.js等物理引擎可以用。

  • 做动画

    • 用CSS实现简单的动画效果，封装一个动画库来实现复杂的动画效果。

有这些方案那为什么还要用游戏引擎呢？

因为你想要的它能够给你提供一套完整的实现方案，即不需要自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。

它提供了游戏开发时需要的常见功能：引擎会提供许多组件，减少开发时间，降低成本；专业引擎通常会比自制引擎表现出更好的性能。

游戏引擎通常包含渲染器，2D/3D图片元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。

前端开发过渡到游戏开发

首先需要有个明确的认知：前端开发和游戏开发不是相斥的。

现在市场上很多的H5游戏，小游戏都是Web前端开发制作的，而不是专业的游戏开发团队、专业的游戏研发同学开发的。

其原因可能在于：

  • 接触前端开发的研发数量远大于接触游戏开发的数量（招聘成本高）

  • 2d游戏引擎的上手门槛已经足够低（易上手）

  • 活动H5中的游戏玩法的实现方式比较模糊（开发界限模糊）

    • 现在很多主流的2d游戏引擎都支持使用JavaScript进行开发同时使用相关工程化能力，也是游戏开发向Web前端开发靠拢的一种表现、

因此，以Web前端开发的视角看2d游戏引擎，无非就是一套框架，一套解决方案而已。 但是开发理念还是有差别的：游戏开发更注重内容。

03.游戏引擎

市场上常见游戏引擎

我们暂且不讨论一些端游的引擎，比如

  • Unreal（虚幻引擎，代表作《PUBG》）

  • Source（起源引擎，代表作《CS》）

  • Frostbite Engine（寒霜引擎，代表作《战地》）

  • Unity（代表作《王者荣耀》《炉石传说》）

路要一步一步走，先来看看我们作为前端开发最容易上手的引擎。

特定类型的客户端游戏引擎：

The NVL Maker——文字冒险游戏制作器

No Code 形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。

image.png

代表作：《Fate/stay night》和Steam上一众GAL Game。

由于缺乏迭代和运营，该游戏引擎算是比较小众的。 也有一个适用于前端的库AVG.js Project（内核是PixiJS作为渲染引擎）。

RPG Maker

RPG Maker可以Low Code搭建一个关卡类型的游戏，适合代码能力不强但是想发挥自己的创意的开发者。

image.png 由RPG Maker系列游戏引擎创造的Steam畅销游戏《To The Moon》

image.png

web游戏引擎

利用 Canvas 和 WebGL 为底层技术抽象的图像绘制库（往往还附带一些其他的功能）

Web游戏引擎的通用能力：

  • 预加载:游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。

  • 展示与图层、组合系统:对于Web游戏编程而言，往往选择Canvas或 WebGL作为渲染方式(大家可以想想为什么不用DOM作为渲染方式?）。而Canvas和 WebGL 作为底层的API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。

    • 用 Canvas 而不用 DOM 是由他的渲染效率决定的，用DOM去渲染太慢了，浏览器渲染有两种模式，分别是保留模式（DOM）和快速模式（Canvas 和 WebGL）,从渲染效率来看，自然会使用快速模式的Canvas。

  • 动画系统︰动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生JS 中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。

  • 音效和声音系统︰游戏相较于普通的Web前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、暂停等功能的集成。

Web游戏引擎---Cocos

优势：

  • 平台支持能力好
  • 完善的游戏功能支持
  • 生态较好

缺点：

  • 3D能力仍在建设中
  • 版本迭代过快
    • 有时游戏会因为版本的更新而变得不可用

image.png

Web游戏引擎---Laya

优势：

  • 3D能力比较成熟，号称市场占有率90%
  • 支持JS，TS，AS
  • 引擎体积小

缺点：

  • 界面能力不友好
  • 生态很差

image.png

Web游戏引擎---Egret(白鹭)

优势：

  • 工具链比较完善
  • 第三方库支持好
  • 企业定制能力强

缺点：

  • 更新迭代遭瓶颈（也是由于它花了较多时间在企业定制方面）
  • 生态较差

image.png

Web游戏引擎---CreateJS & Phaser

CreateJS、Phaser这两个游戏引擎没有可视化界面。

以CreateJS为例：

image.png

它是多个库集合而成，EASELJS（控制素材展示于组合），TWEENJS（控制素材缓动动画）、SOUNDJS（控制声音）、PRELOADJS（控制加载），通过预加载后的素材展示，动画，声音构成游戏。

Phaser游戏引擎，除了CreateJS为基础的展示、声音、动画、加载系统，还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。

功能引擎

大型游戏引擎往往是由小的功能引擎组装成的，一个大型游戏引擎往往包含渲染引擎、物理引擎、UI系统、声音系统、动画系统、粒子系统、骨骼系统、网络系统等组合而成。其中最重要的便是渲染引擎和物理引擎。

功能引擎是专注某个方向能力的引擎，其特点是体积小，功能完备。特别是Pixi.js和Three.js这两个渲染引擎，通常被误认为是一个完整的游戏引擎，但他们是专注渲染能力的渲染引擎。

下面介绍机制可能会经常接触的功能引擎：

image.png

2D游戏引擎的技术架构

以Cocos的引擎架构为例子

image.png

Web游戏引擎的渲染原理

以Pixi的渲染流程为例子，大致流程如下：

  1. 创建一个Renderer渲染器，获取它的view (一个canvas对象)，添加到Dom Tree中。(或者指定Dom Tree中已经存在的canvas对象作为view)

  2. 在MainLoop(主循环）中调用Renderer.render()并传入一个DisplayObject作为根节点开发渲染。

  3. 从场景树的根节点开始，以zlndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)

  4. WebGL的render方法执行过程

render(displayObject，renderTexture，clear，transform，skipUpdateTransform) {
// 1．应用变换(GPU级别)
this.projection.transform = transform;
// 2．渲染纹理绑定与BatchRendering处理
this.renderTexture.bind(renderTexture);
this.batch.currentRenderer.start( );
// 3．执行元素渲染，将顶点、索引和纹理等数据添加到BatchRendering中
displayObject.render( );
// 4．执行renderer的绘制方法
this.batch.currentRenderer.flush( );
// 根据传入的clear与renderTexture参数对纹理的处理...
// 5．清空变换
this.projection.transform = null;
}
  1. Canvas的render方法执行过程
render(displayObject，renderTexture，clear，transform，skipUpdateTransform) {
const context = this.context;
// 1．当前状态压入状态栈
context.save( );
// 2．初始化变换及样式属性
context.setTransform( 1，0，0，1，0，0);
context.globalAlpha = l;
this._activeBlendMode = BLEND_MODES.NORMAL;
this._outerBlend = false;
context.globalCompositeOperation = this.blendModes[BLEND_MODES.NORMAL];
// 3.执行元素渲染
const tempContext = this.context;
this.context = context;
displayObject.renderCanvas(this);
this.context = tempContext;
// 4．从状态栈恢复之前状态
context.restore( );
}

04.游戏开发的技能树

游戏前端开发入门技能树

image.png

05.PixiJS + Web 开发

PixiJS简介

PixiJS：

image.png

官网乍一看很像一个游戏引擎，但是上面也明确说了：“用最快的、最灵活的2DWebGL渲染器创建精美的数字内容”。 因此它本质上还是一个渲染引擎，而且自称做得最好。 它不仅仅能做游戏，还能使用这个技术去创建任何交互式内容，比如APP，还能够在它的基础上做自己的游戏引擎。（AVG/js 和 Phaser.js 的渲染引擎就是Pixi）

前置技术栈

  • Web前端开发基础

  • 用过JSON文件，知道是用来干什么的

  • 了解过Canvas的绘图API

Web项目中加载一个游戏玩法

使用：

  1. 安装和引入:

    • npm安装 或者 通过script标签引入 <script src="pixi.min.js"></script>

  2. 创建Pixi应用和舞台（Stage）

image.png

  1. 显示一张图片

首先理解一个概念：Sprite（精灵）

学习CSS的时候可能有听过精灵图/雪碧图的概念，但是Pixi或者更多游戏引擎中Sprite的概念是一个用于承载图像的对象，你能够控制它的大小、位置等属性来产生交互、动画。 创建和控制Sprite是学习Pixi很重要的部分，而创建一个Sprite需要了解图片怎么加载到Pixi中。

这里就有一个概念：纹理缓存（只可以被GPU处理的图像）。 Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。现在有一个“images/cat.png”,我们就可以使用PIXI.utils.TextureCache["images/cat.png]来在纹理缓存找到它。

使用前当然要先把它转化成纹理存储在纹理缓存中，这时候可以使用PIXI.loader加载进来。

PIXI.loader.add("images/cat.png").load(res => {
    let sprite = new PIXI.Sprite(
   PIXI.loader.resources["images/cat.png"].texture
   );
});

现在已经创建了一个Sprite了，下一步就是显示它。 我们前面说到过一个舞台的概念，记住，舞台是用来包裹你所有精灵的主要容器。（重点：你不应该看见任何没有被加入舞台的精灵） 我们要显示图像就得把他添加到舞台中。

app.stage.addChild(sprite);

这时候我们运行程序就能看到:

image.png

  1. 让图片动起来,前面我们说到了设置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;
});

然后加“一点点”细节

06.Cocos Creator 编辑器开发

Cocos Creator介绍

Q: Cocos Creator 是游戏引擎吗？

A: Cocos Creator 不只是游戏引擎，它是一个完整的游戏开发解决方案，包含了轻量高效的跨平台游戏引擎，以及能让你更快速开发游戏所需要的各种图形界面工具。

编辑器集成的能力

Cocos的工作流

image.png

创建项目

image.png

搭建场景

Cocos的工作流---数据驱动和场景为核心、组件式开发为核心

image.png

节点(cc.Node) 是承接组件的实体，我们通过将具有各种功能的组件（比如Sprite,Spine,Label）挂载到节点上，来让节点具有各式各样的表现和功能。

image.png

节点构成节点树，节点树影响真实的渲染层级。

导入资源 + 显示资源

从操作系统中的其他窗口拖拽文件到Cocos Creator 窗口中的资源管理器面板上，就能够从外部导入资源。 该操作会自动复制资源文件到项目资源文件夹下，并导入操作。然后把图片拖到层级管理器即可以生成一个cc.Sprite。

image.png

脚本挂载

image.png

然后在Cocos Creator中对应的节点把脚本挂载上去。

image.png

运行调试

image.png

游戏的上线

构建

  • 构建游戏，可以选择多平台，产物即对应生成，比如Web Mobile

image.png

  • 产物可以直接部署在对应的平台，比如Web产物部署到服务器、小游戏产物部署到开发者平台。

image.png

用游戏引擎去写游戏比用原生JS去写会方便很多。

image.png

07.小游戏“小”在哪里

游戏发布平台的差异性

image.png

游戏开发的重要理念

激发创造

把游戏开发过程当做一个游戏，在规则（自己的技术栈、策划的限定主题、美术的限定资源）的约束下通过创意力和技术挑战一个高质量的游戏吧！

不要约束自己的创意，提高自己的创造力，技术可以通过学习去不断提升，但是创意被约束的话很难做出建设，大胆去做！

avatar
文章
阅读
粉丝