这是我参与[第四届青训营]笔记创作活动的第九天，今天我学习并总结了一些关于小游戏开发方面的知识点。

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

开发角色和链路

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

开发游戏的基本链路

为什么要用游戏引擎

什么是游戏引擎

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

为什么要用游戏引擎

因为你想要的它能够给你一套完整的实现方案，不需要你再自己去拼凑、封装，让你花更少的时间做出更好的效果，特别是关于渲染效率和性能优化。它提供游戏开发时需要的常见功能:引擎会提供许多组件，使用这些组件能缩短开发时间，让游戏开发变得更简单;专业引擎通常会能比自制引擎表现出更好的性能。游戏引擎通常会包含渲染器，2D/3D 图形元素，碰撞检测，物理引擎，声音，控制器支持，动画等部分。

前端开发过渡到游戏开发

需要先有一个明确的认知:前端开发和游戏开发不是相斥的。现在市场上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。其原因可能在于:

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

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

2.游戏引擎

世界上常见的游戏引擎

Unreal (虚幻引擎，代表作《PUBG》、《GTA5》)、
Source (起源引擎，代表作《CS》《Dota2》)、
Frostbite Engine (寒霜引擎，代表作《战地》《极品飞车18》)
Unity3D (代表作《炉石传说》《王者荣耀》)
The NVL Maker-文字冒险游戏制作器 No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字冒险游戏。当然，由于缺乏迭代和运营，该游戏引擎算是比较小众的。也有一个适用于前端的库AVG.js Project (内核是PixiJS作为渲染引擎)。
RPG Maker可以L .ow Code搭建一个关卡类型的游戏，适合代码能力不强但是想发挥自己的创意的开发者。

Web游戏引擎

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

Web游戏引擎的通用能力:

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

Web游戏引擎Cocos

优势：平台支持能力好，完善的游戏功能支持，生态较好。

缺点：3D能力仍在建设中，版本迭代过快。

Web游戏引擎Laya

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

缺点：界面能力不友好，生态很差。

Web游戏引擎Egret

优势：工具链比较完善、第三方库支持好、企业定制能力强。

缺点：更新迭代遭瓶颈，生态较差。

功能引擎

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

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

Web游戏引擎的渲染原理

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

PixiJs简介

前置技术栈

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

安装和引入 npm安装或者通过script标签引入
创建Pixi应用和舞台(Stage)

// 第一步，创建一个显示的矩形区域，创建一个Pix i应用实例的时候会自动创建一个canvas并计算出怎么让你的图片在canvas中显示。
let app
new PIXI.Application({ width: 250， height: 250 });
// app. stage就是一个[舞台]，它包含了所有你想用Pixi显示的东西。
//第二步，把canvas添加到DOM Tree中。
document.body.appendChild(app.view);
// PIXI. Applicat ion计算了应该使用Canvas还是WebGL去渲染图像，取决于当前浏览器支持哪一个，一般优先使用WebGL。
//如果你希望Canvas是透明的，或者强制使用Canvas模式， 可以设置
let app = new PIXI.Application( {
width: 250 ，
height: 250 ，
transparent: true,
forceCanvas: true ，
})

显示一张图片

首先理解一个概念: Sprite (精灵)

学习CSS的时候可能有听过精灵图/雪碧图的概念，但是Pixi或者更多游戏引擎中Sprite的概念是一个用于承载图像的对象，你能够控制它的大小、位置等属性来产生交互、动画。

创建和控制Sprite是学习Pixi很重要的部分，而创建个Sprite需要了解图片怎么加载到Pixi中。

这里就有一个概念:纹理缓存(指可以被GPU处理的图像)

Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。

现在有一个"images/ cat.png"，我们就可以使用PIXl.utils.T extureCache["images/ cat.png"]来在纹理缓存找到它。

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

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

添加进舞台

app.stage.addChild(sprite);

让图片动起来

app.tiker.add(delta =>
    sprite.X += 1;
});

小游戏开发 | 青训营笔记