本文以「余额宝3D跑酷游戏」为例,介绍了前端如何快速上手 Web 3D 游戏的开发。跑酷游戏是余额宝七周年的主玩法,用户通过做任务来获取玩游戏的机会并且解锁游戏道具,从而在游戏中获得更多的金币,最终可以利用金币兑换一些权益,同时我们也在游戏中植入了一些礼包,先看看具体效果。
游戏设计
我们把游戏的3D场景分成了三大模块,分别是赛道、金币(道具)和人物。
赛道设计
赛道包含了楼房和地面,由于人物需要不停地往前跑,基于相对运动的原理,我们复制了两段楼房(如图1),并同时做逆时针旋转,当旋转至 -theta 角度的时候,把楼房的旋转角度置为0(如图2)。地面是一个静止的圆弧模型,通过改变纹理的 UV 值来实现地面滚动的效果。
图1 赛道结构图
图2 楼房运动轨迹
金币布局
由以上图1可知,我们以 theta 角度的圆弧为一个控制单元,我们希望能控制游戏的总时长、每段圆弧旋转的时间,以及每段圆弧摆放的金币行数,这些参数如何控制3D场景的运作呢?根据已知字段推导出以下几条公式(蓝色字段为可配参数):
- 需要生成金币的总行数 = (游戏总时长 /圆弧旋转theta角度的时间 )x 每段圆弧摆放的金币行数
- 每两行金币之间的时间间隔 = 游戏总时长 / 需要生成金币的总行数
- 每行金币出现的时间 = 每两行金币之间的时间间隔 x 金币索引
这里主要得出 游戏总时长 和 每行金币出现时间 之间的关系,而每行金币该如何摆放以及道具出现的时机由具体的业务逻辑控制,这里不展开来讲。最终我们得到了一个控制金币摆放的队列:
-
[
-
{
-
"index":
0,
// 索引,代表每一行
-
"item": {
-
"position":
"center",
// 摆放位置
-
"type":
"coin"
// 应该摆放的模型类型
-
},
-
"time":
0
// 每行金币出现的时间
-
},
-
{
-
"index":
1,
-
"item": {
-
"position":
"left",
-
"type":
"coin"
-
},
-
"time":
0.25
-
},
-
// more......
-
]
这个队列如何与我们的3D场景关联呢?
由以上图2可知,一共有两段圆弧在交替旋转,假设每段圆弧摆放的金币行数定义为 rowsPerPart,当前圆弧的索引定义为 index,那么每次旋转至0度的时候,取 [index * rowsPerPart, (index + 1), rowsPerPart] 区间的数据进行摆放。数组中 position 表示摆放位置,一共有左中右三条道,也可能三条道都摆放,根据配置创建金币节点,并设置好节点的 position。type 表示应该摆放的模型类型,除了金币还可能是道具、礼包、终点线等。
开发流程
设计好游戏思路之后,可以正式开始制作我们的游戏啦~
跑酷游戏是通过 Oasis Editor 开发的,这是一个 web 3D 内容在线开发平台,底层用的是 Oasis 3D(蚂蚁自研的3D引擎)。这时候你可能会问,为什么要用 Oasis Editor 开发呢?
接下来分为「场景搭建」、「逻辑开发」、「业务联动」来讲解整个3D工作流。
场景搭建
上传资产
在编排场景之前我们需要先上传好游戏资产,一般美术提供的模型文件格式为 fbx 或 gltf,纹理推荐使用 webp 格式,我们在资源区右侧点击上传。
在开发过程中,美术可能经常需要替换纹理,所以建议美术将纹理与模型解绑,通过手动上传的形式将纹理绑定到模型上,避免同时加载两个纹理。
如图,我们已经在资源区上传好楼房、道具、金币等模型和相应纹理。
场景编排
有了资产之后我们需要绑定到节点上,然后进行场景编排,如下视频以楼房和地面为例进行演示:
- 创建场景树
- 绑定GLTF模型
- 编辑器PBR材质,绑定纹理
- 调整编辑器相机,拷贝编辑视角
- 转换相机视角,微调相机参数
按照同样的方法我们完成了整个场景的编排,某些节点需要通过脚本控制展示,可以点击场景树左边的小眼睛进行隐藏,场景效果如下:
粒子系统
游戏开发的时候,经常会用到粒子系统来帮助我们实现一些比较酷炫的效果,在我们这个项目中,在人物节点(person)下面有2个子节点,分别来负责吃到金币(coinParticle)和道具(toolParticle)时的粒子效果,游戏过程中效果如下:
当我们点击选中一个粒子节点的时候,编辑器右侧会出来对应的属性面板,属性面板中就能够看到我们的粒子组件以及相关参数,通过设置参数可以调整我们的粒子效果:
接下来一步就是来设置参数来控制我们的粒子效果了,下面给大家介绍下几个常用参数:
逻辑开发
以上场景可由前端协助美术同学进行搭建,接下来这一步就正式进入编程阶段了。
脚本能力
1、cli
Oasis Cli 是连接业务和 Oasis 3D 编辑器的桥梁,在使用我们引擎的时候,建议提前安装好 Cli 的环境:
tnpm i @alipay/oasis-cli -g
安装好 Cli 之后,我们就可以将场景导出到我们的本地项目,并且随时将最新的场景编排同步至本地。首先,我们进入跑酷项目根目录,并执行如下命令,将我们已经建好的3D场景和当前项目连接:
oasis pull sceneId
上面的 pull 命令中,sceneId是我们的场景id,执行完该命令后,会在根目录下自动添加了1个目录和1个文件,如下:
当我们需要对场景进行编辑,并且将最新修改同步至本地,我们只需要执行如下命令即可:
oasis dev
2、金币转动
这里以金币转动为例演示如何添加脚本控制,首先在资源面板添加一个脚本,然后在将脚本挂在节点上:
完成这一步后,我们就可以在coinAni的脚本中实现对coin节点的控制了,金币一直旋转我们在脚本的onUpdate 中处理即可:
-
onUpdate() {
-
const { node } =
this;
-
-
TWEEN.update();
-
-
if (
this._isRotate && node.parentNode.isActive) {
-
node.setRotationAngles(
0, globalVal.coinAngle %
360,
0);
-
}
-
}
碰撞检测
利用碰撞检测来反应人物与金币之间的碰撞,首先需要给人物和金币都加上碰撞体包围盒。Oasis Editor 提供了立方体碰撞体和球型碰撞体,引擎会在每帧更新时计算本节点的 collider 与其他 collider 的相交情况,球型碰撞体之间只需要比较球心距离与两个半径之间的大小关系,而立方体碰撞体需要计算八个顶点的位置关系,所以使用球型碰撞体性能上会好一些。
如下图,我们给人物添加了一个球型碰撞体,可以调节它的球心和半径。可视化包围盒只是编辑器运行时的插件,因此不会出现在我们的 H5 场景中。
编辑完碰撞体包围盒之后,我们需要在脚本中进行碰撞检测,监听 collision 事件:
-
let cd = node.createAbility(o3.ACollisionDetection);
-
cd.addEventListener(
'collision',
e => {
-
const colliderNode = e.data.collider.node;
// 拿到被碰撞的节点
-
-
const name = colliderNode.name;
-
// do something...
-
});
Shader
嘿嘿,看到 Shader 别急着划走,掌握了 Shader 你就可以:
- 自定义光照、物理等模型,可以开发更多酷炫的效果
- 能够优化渲染性能
- 能够帮助我们排查渲染上的问题
列举几个 Shader 的效果,更多效果可以前往shadertoy:
1、 什么是 Shader
Shader(着色器)是运行在 GPU 上的小程序,这些小程序为图形渲染管线的某个特定部分而运行,它用于告诉图形硬件如何计算和输出图像。为了更深入了解 Shader 的原理,我们需要了解 OpenGL 的渲染流水线,这里以渲染跑酷游戏的地面模型为例:
CPU 应用阶段
我们在3.1.1中上传了地面的 fbx 模型文件,其中包含了顶点位置、UV、法线、切线等信息,CPU 将这些信息加载到显存中,然后设置渲染状态,告诉 GPU 如何进行渲染工作。最后 CPU 会发出渲染命令(Drawcall),由GPU 接收并进行渲染。
GPU 渲染管线
GPU 渲染管线包含了几何阶段和光栅化阶段,顶点着色器(Vertex Shader)和片元着色器(Fragment Shader)分别位于这两个阶段中。
几何阶段:顶点着色器接收 CPU 传过来的顶点数据,通常在这个阶段做一些空间变换、顶点着色等操作。接着会经过裁剪,把不在相机视野中的顶点裁剪掉,并剔除某些图元,然后将物体坐标系转换到屏幕坐标系。
光栅化阶段:两个顶点之间有很多个像素,片元着色器会对像素进行处理,除了进行纹理采样,还会将像素与灯光进行计算,产生反射、折射等效果。同一个屏幕像素点可能会有多个物体,这时候需要通过 alpha 测试、深度测试、模板测试、混合(blend)等处理,把同一位置的像素进行过滤或合并,最终渲染到屏幕上。
2、如何编写Shader
Oasis Editor 中写 Shader 需要经过这几个步骤:
(1)、在资源区中添加“Shader 材质”,然后绑定到模型上
(2)、编辑 Shader 材质,属性面板中提供了常见的渲染状态配置,也可以直接编辑着色器定义(ShaderDefine)。
整个 ShaderDefine 结构如下,其中 vertexShader 和 fragmentShader 分别存放顶点着色器和片元着色器代码,采用 GLSL ( OpenGL 着色语言,OpenGL Shading Language )编写。states 用来定义渲染状态控制对象,对应上文提到的合并阶段。
-
export
const ShaderMaterial = {
-