小游戏开发 | 青训营笔记

dsyislearning
171 阅读13分钟

小游戏开发 | 青训营笔记

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

概述

本节课包含以下内容：

  • 游戏发展历史
  • 前端场景下的游戏开发
  • 游戏引擎
  • 游戏开发的技能树
  • PixiJS + Web 开发
  • Cocos Creator 编辑器开发
  • 小游戏“小”在哪里

课前安装 cocos creator

游戏发展历史

广义上的游戏

最广泛的定义：

一种有组织的玩耍，一般是以娱乐为目的，有时也有教育目的。

在英语中，体育比赛（Game）也是游戏，只要其活动本质带有目的、规则、挑战和互动，我们都可以把其归为游戏。

举个例子：

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

我们把范围缩小一下：

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

历史：

  • 1970s 街机、家用电脑
    • 《银河战士》雅达利游戏
  • 1980s 街机黄金时代，早期网络游戏，LCD 掌机游戏
    • 《合金装备》FC 游戏
  • 1990s 街机衰退，掌机降临，3D 出现
    • 《雷神之锤》3D 游戏
  • 2000s 网络游戏崛起，游戏控制方式变革
    • 《魔兽世界》网络游戏
  • 2010s 高分辨率，开发成本，移动端，小游戏
    • 《王者荣耀》移动端游戏
  • 2020s ...

狭义上的游戏

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

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

Pasted image 20220817103557.png

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

多人在线战术竞技游戏（MOBA）是即时战略游戏（RTS）的一个子类

前端场景下的游戏开发

开发链路和角色

团队分工

组建一个最小但最完整的游戏开发团队只需要三个人：策划、程序、美术。当然，能力足够强的话可以作为独立开发者。

Pasted image 20220817104737.png

基本链路

Pasted image 20220817104803.png

为什么要用游戏引擎

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

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

如果不使用引擎，你可以做复杂的动效渲染和交互吗？当然可以。方便吗？不一定。

  • 多平台移植：React Native、Weex、Cordova 等方案也可以做到
  • 物理效果：MatterJS、ammo.js 等物理引擎可以用
  • 动画：CSS 实现也不是不行。复杂点就封装一个动画库。

那为什么要用游戏引擎呢？

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

它提供游戏开发时需要的常见功能：引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得简单；专业引擎通常会能比自制引擎表现出更好的性能。

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

前端开发过渡到游戏开发

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

现在市场上很多 H5 游戏、小游戏都是 Web 前端开发制作的，而不是专门的游戏研发人员开发。

其原因可能在于：

  1. 接触前端开发的研发数量远大于接触游戏开发的数量（招聘成本高）
  2. 2D 游戏引擎的上手门槛已经足够低（易上手）
  3. 活动 H5 中的游戏玩法的实现方式比较模糊（开发界限模糊）

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

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

游戏引擎

市面上常见的游戏引擎

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

  • Unreal（虚幻引擎，代表作《PUBG》《GTA5》）
  • Source（起源引擎，代表作《CS》《Dota2》）
  • Frostbite Engine（寒霜引擎，代表作《战地》《极品飞车18》）
  • Unity3D（代表作《炉石传说》《王者荣耀》）

先看看作为前端开发最容易上手的引擎

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

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

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

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

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

RPG Maker

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

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

Web 游戏引擎

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

Web游戏引擎的通用能力：

  • 预加载：游戏中往往存在大量的静态素材，包括场景、元素、声音、动画、模型、贴图等，如果以原生 JS进行请求，并统筹请求时间和加载的时机，将会非常麻烦。游戏引擎中的预加载引擎将加载时机、加载过程加以抽象，解决加载编码中的效率问题。
  • 展示与图层、组合系统：对于 Web 游戏编程而言，往往选择 Canvas 或 WebGL 作为渲染方式（大家可以想想为什么不用 DOM 作为渲染方式？）。而 Canvas 和 WebGL 作为底层的 API，接口非常基础，需要用大量的编码来编写简单的展示。而且图形之间没有组合和图层，很难处理元素组合和图层问题。渲染引擎和图层、组合系统应运而生。
  • 动画系统：动画往往被分为缓动动画和逐帧动画，这里讨论缓动动画系统。缓动动画系统在原生 JS 中需要搭配帧渲染进行考量而进行书写，代码量和思考量巨大，抽象程度低，所以需要游戏引擎动画系统。
  • 音效和声音系统：游戏相较于普通的 Web 前端而言需要更加立体、及时的反馈，声音和音效是反馈的重要组成部分。所以声音和音效系统往往包含了声音的播放、音量、截止、哲停等功能的集成。

Cocos

优势：

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

缺点：

  • 3D 能力仍在建设中
  • 版本迭代过快

Laya

优势：

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

缺点：

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

Egret

优势：

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

缺点：

  • 更新迭代遭瓶颈
  • 生态较差

CreateJS & Phaser

这两个游戏引擎没有可视化界面

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

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

功能引擎

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

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

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

Pasted image 20220817114157.png

2D 游戏引擎的技术架构

以 Cocos 的引擎架构为例子

Pasted image 20220817114223.png

Web 游戏引擎的渲染原理

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

  1. 创建一个 Renderer 渲染器，获取它的 view （一个 canvas 对象）。添加到 Dom Tree 中。（或者指定 Dom Tree 中已经存在的 canvas 对象作为 view）
  2. 在 MainLoop （主循环）中调用 Renderer.render() 并传入一个 DisplayObject 作为根节点开发渲染
  3. 从场景树的根节点开始，以 zIndex 为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。（CanvasRenderer）
  4. WebGL 的 render 方法执行过程

Pasted image 20220817114628.png

  1. Canvas 的 render 方法执行过程

Pasted image 20220817114658.png

游戏开发的技能树

Pasted image 20220817114715.png

PixiJS + Web 开发

Pixi 简介

官网乍一看很像一个游戏引擎，但是上面也明确说了：“用最快、最灵活的 2D WebGL 渲染器创建精美的数字内容”（谷歌机翻）

因此它本质上还是一个渲染引擎，而且自称做得最好。

它不仅仅能做游戏，还能使用这个技术去创建任何交互式内容，比如 APP ，还能够在它的基础上做自己的游戏引擎。（ AVG.js 和 Phaser js 的渲染引擎就是 Pixi ）

前置技术栈：

  • Web 前端开发基础
  • 用过 JSON 文件，知道是用来干什么的
  • 了解过 Canvas 的绘图 API

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

  1. 安装和引入

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

  1. 创建 Pixi 应用和舞台（Stage）
// 第一步，创建一个显示的矩形区域，创建一个Pixi应用实例的时候会自动创建一个canvas并计算出怎么让你的图片在canvas中显示
let app = new PIXI.Application({ width: 250, height: 250 });
// app.stage就是一个舞台，它包含了所有你想用Pixi显示的东西

// 第二部，把canvas添加到DOM Tree中
document.body.appendChild(app.view);
//PIXI.Application计算了应该使用Canvas还是WebGL去渲染图象，取决于当前浏览器支持哪一个，一般优先使用WebGL

// 如果你希望Canvas是透明的，或者强制使用Canvas模式，可以设置
let app = new PIXI.Application({
    width: 250,
    height: 250,
    transparent: true,
    forceCanvas: true,
});
  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("image/cat.png").load(res => {
    let sprite = new PIXI.Sprite(
        PIXI.loader.resources["image.cat.png"].texture
    );
});

现在已经创建了一个 Sprite 了，下一步就是显示它。

我们前面说到过一个舞台的概念，舞台是用来包裹你所有精灵的主要容器。（重点：你不应该看见任何没有被加入舞台的精灵）

我们要显示图像就得把它添加到舞台中

app.stage.addChild(sprite);

这时候运行我们能看到

Pasted image 20220817120228.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;
});

然后加“一点点”细节 CacheAsBitmap - PixiJS Examples

Cocos Creator 编辑器开发

Cocos Creator 介绍

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

编辑器集成的能力

Cocos 的工作流

Pasted image 20220817120747.png

创建项目

Pasted image 20220817120801.png

搭建场景

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

Pasted image 20220817120813.png

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

Pasted image 20220817121004.png

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

导入资源 + 显示资源

从操作系统中的其他窗口拖拽文件到 Cocos Creator 窗口中的资源管理器面板上，就能够从外部导入资源。该操作会自动复制资源文件到项目资源文件夹下，并完成导入操作。

然后把图片拖到层级管理器即可生成一个 cc.Sprite

Pasted image 20220817121220.png

脚本挂载

然后在 Cocos Creator 中对应的节点把脚本挂载上去，这样就把脚本视图关联上了

Pasted image 20220817121318.png

Pasted image 20220817121326.png

运行调试

Pasted image 20220817121340.png

Pasted image 20220817121348.png

游戏的上线

构建

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

Pasted image 20220817121456.png

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

Pasted image 20220817121503.png

小游戏“小”在哪里

游戏发布平台的差异性

Pasted image 20220817121510.png

游戏开发的重要理念

激发创造

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

课后

Q：在 cocos creator 中添加 sprite，绑定脚本，监听方向键控制 sprite 移动，构建生成 web 产物。

Tips：本题没有标准答案，主要考察对游戏引擎基本流程的了解。

avatar
文章
阅读
粉丝