小游戏开发 | 青训营笔记

北冥_有鱼
338 阅读13分钟

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

小游戏开发

1.游戏发展历史

广泛意义上的游戏

最广泛的定义

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

举个例子

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

我们把范围缩小一下:电子游戏 在游戏中，玩家依托电子设备（如电脑、游戏机、手机等）进行交互。

狭义上的游戏

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

游戏的分类:根据玩法进行大类分．再经过小类细化。

  • 动作类(ACT)

    • 射击游戏
    • 格斗游戏
    • 动作冒险游戏
    • 动作角色扮演游戏(ARPG)
    • 模拟动作游戏

  • 冒险类(AvG)

    • 文字冒险游戏
    • 动作冒险游戏
    • 视觉小说
    • 解密冒险游戏
    • 恋爱冒险游戏

  • 模拟类

    • 模拟经营游戏
    • 模拟养成游戏
    • 模拟沙盒游戏

  • 角色扮演类(RPG)

    • +动作
    • +模拟
    • +策略
    • +冒险

  • 策略类(SLG)

    • 回合制战略游戏
    • 回合制战术游戏
    • 即时战略游戏
    • 即时战术游戏

  • 其余分支

    • 音乐游戏
    • 休闲游戏
    • 体育游戏
    • 竞速游戏

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

开发链路和角色

游戏开发的团队分工

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

image.png

游戏开发的基本链路

image (1).png

为什么要用游戏引擎

游戏引擎最大的游戏:渲染

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

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

所以游戏引擎更像是一套解决方案．让你在制作某一类型的产品的时候能够提高你的开发效率。

你要做多平台移植? React Native、Weex、Cordova等方案也可以做到。

你要做物理效果?Matters、 ammo.js等物理引擎可以用。

你要做动画?CSS实现又不是不行。复杂点?封装一个动画库。

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

因为你想要的它能够给你一套完整的实现方案、不需要你再自己去拼凑、封装．让你花更少的时间做出更好的效果．特别是关于渲染效率和性能优化。 它提供游戏开发时需要的常见功能:引擎会提供许多组件．使用这些组件能缩短开发时间．让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能。

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

前端开发过渡到游戏开发

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

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

其原因可能在于:

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

2.2d游戏引擎的上手门槛已经足够低(易上手)

3.活动H5中的游戏玩法的实现方式比较模糊(开发界限模糊) 现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力，也是游戏开发向web前端开发靠拢的一种表现。

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

3.游戏引擎

市面上常见游戏引擎

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

  • Unreal(虚幻引擎．代表作《PUBG》. 《GTA5》)
  • Source(起源引擎,代表作《cs》.《Dota2》)
  • Frostbito Engine(寒霜引擎．代表作《战地》、《极品飞车18》)
  • Unity3D（代表作《炉石传说》、《王者荣耀》) 。

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

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

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

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

当然.由于缺乏迭代和运营．该游戏引擎算是比较小众的。

也有一个适用于前端的库AVG.js Project(内核是PixiS作为渲染引擎)。

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

RPG Maker

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

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

Web游戏引擎

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

Web游戏引擎的通用能力:

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

  • 优势

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

  • 缺点

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

  • 优势

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

  • 缺点

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

  • 优势

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

  • 缺点

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

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

它是多个库的集合．EASELS (控制素材展示与组合).、TWEENJS（控制素材缓动动画).SOUNDJS(控制声音)、PRELOADJS(控制加载)．通过预加载后的素材展示、动画、声音构成游戏。 Phaser游戏引擎．除了CreateJS为基础的展示、声音、动画、加载系统．还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。

功能引擎

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

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

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

引擎名称功能特点应用场景
Pixi.js 2d渲染引擎2d渲染能力强（尤其是WebGL) 轻量化使用需要复杂的动画系统 需要复杂的图片渲染形式 需要使用Canvas操作但是不想自己造轮子 需要制作自己的2d游戏引擎
Three.js 3d渲染引擎2d渲染能力强 API简介明了 支持WebGL和CSS3D两种渲染模式2D演示 2D类的H5游戏/小游戏 WebVR
Box2D.js 2d物理引擎接口简单友好 物理刚体仿真效果很强物理仿真 扩展游戏引擎能力

2D游戏引擎的技术架构

以cocos的引擎架构为例子

image (2).png

Web游戏引擎的渲染原理

以Pixi的渲染流程为例子

大致流程如下

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

4.游戏开发的技能树

游戏前端开发入门技能树

image (3).png

5.PixiJS+Web开发

Pixi简介

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

  • 前置技术栈

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

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

1.安装和引入 npm安装或者通过script标签引入 2.创建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,
})

3.显示一张图片 首先理解一个概念:Sprite(精灵) 学习CSS的时候可能有听过精灵图/雪碧图的概念．但是Pixi或者更多游戏引擎中Sprite的概念是一个用于承载图像的对象．你能够控制它的大小、位置等屈性来产生交互、动画。 创建和控制Sprite是学习Pixi很重要的部分．而创建一个Sprite需要了解图片怎么加载到Pixi中。这里就有一个概念:纹理缓存(指可以被GPU处理的图像)。 Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。 现在有一个"ilimages/cat.png"．我们就可以使用PIXLutils.TextureCache["images/cat.png"]来在纹理缓存找到它。

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

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

现在已经创建了一个Sprito了.下一步就是显示它。 我们前面说到过一个舞台的概念．记住．舞台是用来包裹你所有精灵的主要容器。(重点:你不应该看见任何没有被加入舞台的精灵) 我们要显示图像就得把它添加到舞中。 app-stage.addChildi sprite) ; 这时候种们运行程序就能看到:

image (4).png

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

4.然后加”一点点"细节 pixijs.io/examples/#/…

6.Cocos Creator编辑器开发

Cocos Creator介绍

Q: Cocos Creator是游戏引擎吗?

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

编辑器集成的能力

Cocos的工作流

image (5).png

创建项目

image (6).png

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

image (7).png 搭建场景

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

image (8).png

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

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

image (9).png

脚本挂载

image (10).png

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

运行调试

image (11).png

游戏的上线

构建

image (12).png

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

image (13).png

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

7.小游戏”小"在哪里

游戏发布平台的差异性

image (14).png

游戏开发的重要理念

激发创造

把游戏开发过程当做一个游戏．在规则(自己的技术栈、限定主题、限定资源)的约束下通过创意和技术力挑战一个高质量的游戏吧!

avatar
文章
阅读
粉丝