小游戏开发 | 青训营笔记

160 阅读2分钟

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

前端场景下的游戏开发

开发链路和角色

组建一个最小但完整的游戏开发团队只需要三个人:策划、程序、美术

image.png

开发的基本链路

image.png

为什么要用游戏引擎

游戏引擎是一套完整的实现方案,不需要自己再去拼凑、封装,能够花更少的时间做出更好的效果

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

前端开发过渡到游戏开发

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

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

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

因此,以web前端开发的视角看2d游戏引擎,无非是一套框架、一套解决方案而己。

但是开发理念上还是有差别的:游戏开发更关注内容。

游戏引擎

image.png

游戏开发的技能树

image.png

PixiJS + Web开发

PixiJS

image.png

前置技术栈:

  1. Web前端开发
  2. 用过JSON文件,知道用来干什么
  3. 了解过Canvas的绘图API

Web引入

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

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

创建和控制Sprite是学习Pixi很重要的部分,而创建一个Sprite需要了解图片怎么加载到Pixi中。这里就有一个概念:纹理缓存(指可以被GPU处理的图像)。

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