【青训营】小游戏开发

友艺
541 阅读11分钟

这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战

授课老师：ycaptain

01. 游戏发展历史

  • 1970：雅达利游戏
  • 1980：FC游戏
  • 1990：3D游戏
  • 2000：网络游戏
  • 2010：移动端游戏。
  • 2020：次世代游戏？

广泛意义上的游戏

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

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

狭义上的游戏

通过游戏引擎制作的电子游戏

分类：根据玩法进行大类划分，再经过小类细化。

image.png

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

那么，一个小问题：前几年比较热门门的MOBA属于哪类游戏呢?

回答:多人在线战术竞技游戏(编出来的)，即时战略游戏(RTS) 的一个子类。

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

  • 开发链路和角色
  • 为什么要用游戏引擎
  • 前端开发过渡到游戏开发

开发链路和角色

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

image.png

游戏开发的基本链路

image.png

游戏Demo阶段是非常简单的。比如一个角色扮演游戏，主角可能是一个方块。打怪兽可以简化为方块触碰到了其他颜色的方块，在控制台处理或输出一些特殊的值。

Alpha阶段相当于玩家内测的阶段。而Beta阶段包括测试与迭代。

为什么要用游戏引擎

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

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

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

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

前端开发过渡到游戏开发

前端开发和游戏开发不是相斥的。

现在市场.上很多H5游戏、小游戏都是Web前端开发制作的，而不是专门的游戏开发团队、专业的游戏研发同学开发。其原因可能在于:

  1. 接触前端开发的研发数量远大于接触游戏开发的数量(招聘成本高)
  2. 2d游戏引擎的上手门槛已经足够低(易上手)
  3. 活动H5中的游戏玩法的实现方式比较模糊(开发界限模糊) 现在很多主流的2d游戏引擎都支持使用Javascript进行开发同时使用相关的工程化能力，也是游戏开 发向web前端开发靠拢的一种表现。

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

03.游戏引擎

市面上常见游戏引擎

  • Unreal (虚幻引擎，代表作《PUBG》、《GTA5》 )、

  • Source (起源引擎，代表作《csS》 、《Dota2》 )

  • Frostbite Engine (寒霜引擎，代表作《战地》、《极品飞车18》)

  • Unity3D (代表作《炉石传说》、《王者荣耀》)

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

The NVL Maker - 文字冒险游戏制作器 No Code形式的开发，只需要写文字脚本加上一定的配置就可以生成一个文字 冒险游戏。 当然，由于缺乏迭代和运营，该游戏引擎算是比较小众的。 也有一个适用于前端的库AVG.js Project (内核是PixiJS作为渲染引擎)

image.png

RPG Maker

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

image.png

Web游戏引擎

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

Web游戏引擎的通用能力:

  • 预加载

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

  • 展示与图层、组合系统

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

  • 动画系统

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

  • 音效和声音系统

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

web游戏引擎介绍

Cocos

优势

  • 平台支持能力好
  • 完善的游戏功能支持
  • 生态较好 缺点
  • 3D能力仍在建设中
  • 版本迭代过快

Laya

优势

  • 3D能力比较成熟，号称市场占有率90%
  • 支持JS、TS、AS
  • 引擎体积小 缺点
  • 界面能力不友好
  • 生态很差
  • 会员制的服务

Egret 优势

  • 工具链比较完善
  • 第三方库支持好
  • 企业定制能力强 缺点
  • 更新迭代遭瓶颈
  • 生态较差

CreateJS & Phaser

（这两个引擎没有可视化界面）

CreateJS：它是多个库的集合，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. 从场景树的根节点开始，以zIndex为序从小到大进行深度优先遍历，对每个节点进行渲染操作，由后往前把整个场景绘制一次。(CanvasRenderer)
  4. WebGL的render方法执行过程

image.png

  1. Canvas的render方法执行过程

image.png

04. 游戏开发的技能树

程序也需要常用的算法：（寻路，碰撞检测等。）

image.png

为什么使用canvas而不是dom？因为渲染效率。保留模式和渲染模式效率区别。

05. 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>
  2. 创建Pixi应用和舞台(Stage)

image.png

  1. 显示一张图片 首先理解一个概念: Sprite (精灵)

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

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

Pixi使用纹理缓存来存储和引用Sprite所需要的纹理。纹理的名称字符串就是图像的地址。现在有一个"images/ cat.png",我们就可以使用PIXl.utils. TextureCache["images/ cat.png" ]来在纹理缓存找到它。

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

image.png

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

  1. 让图片动起来 在游戏循环中，设置Sprite的位置和大小。
app.tiker.add(delta =>{
    sprite.x +=1;
})

Pixi官网示例代码：pixijs.io/examples/#/…

06.Cocos Creator编辑器

Q: Cocos Creator是游戏引擎吗?

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

编辑器开发集成的能力。

image.png

  1. 创建项目，在Cocos DashBoard选择模板
  2. 搭建场景，Cocos工作流————数据驱动和场景为核心，组件式开发为核心。

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

  1. 导入资源 + 显示资源

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

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

  1. 脚本挂载

创建用户脚本组件，创建一个class,继承cc.Component,实现四个钩子函数（onLoad，start，update,onDestroy）

  1. 运行调试 编辑器中修改代码会热更新到显示界面。

  2. 构建 构建游戏，可以选择多平台，产物即对应生成，比如Web Mobile。构建后会生成index.html，以及main.js等等。

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

07. 小游戏

游戏发布平台的差异性：H5不需要考虑适配，而平台小游戏需要考虑API的适配。

image.png

游戏开发的重要理念————激发创造

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