技术性3D艺术家Banzai Games Roman Tersky谈到了移动游戏Shadow Fight 3中框架的绘制方式以及角色材料的布置方式，并揭示了搭建环境的一些技巧

Shadow Fight 3是一款基于Unity3d引擎开发的格斗/角色扮演游戏。 该项目于2017年11月在iOS / Android上发布，此后游戏安装总数已超过8000万，为达到如此广泛的受众，开发团队进行了出色的游戏优化，结果，该项目在许多现代设备上以60 FPS的速度运行。平均表现。

评论家和玩家通常会注意到Shadow Fight 3的视觉元素。在本文中，我们建议您“深入了解”游戏，并了解我们如何实现这种质量。

框架渲染

有很多因素直接影响游戏的性能以及每秒可播放的帧数。 对我们来说最重要的指标之一是在游戏中渲染这样一帧时的绘制调用次数。 我建议更详细地考虑这个概念。

为由一种材质连接的每个静态对象组渲染游戏框架时，Unity会启动“绘制调用”并将其覆盖。 每个“绘图调用”都需要CPU资源，因此重要的优化步骤是减少调用次数。 我们的目标是将该指标最小化为每个游戏框架平均100个调用。


单帧渲染过程

Shadow Fight 3中的渲染的第一阶段是为玩家的装甲和武器上的发光元素绘制动态角色阴影和发光效果。



这两个过程都有其自身的特征，应更详细地考虑它们。

暗影

除了渲染主框架的主摄像头之外，舞台上还安装了另一台正交摄影机投影仪，该投影仪旨在从称为ShadowReciever的单独表面上的角色绘制阴影。 该摄像机跟随对手之间的中点，每帧根据其当前位置在平面上投影。 结果将呈现为Alpha纹理，它将用ShadowReciever对象的动态材质中的前一帧的渲染替换该纹理。 这种方法避免了需要计算真实阴影并将其绘制在所有位置模型上的麻烦，而这会严重影响整体性能。


暗影回收区

在此框架中，此过程进行了20次抽签。

发光

在角色的盔甲和武器上创建发光效果的过程类似于创建动态阴影的过程。 在带有发光元素的模型周围创建一个BlurCube立方体，根据存储在该对象的材质的RGB纹理的蓝色通道中的信息（即，蓝色通道充当辉光投影的“蒙版”），将发光效果投影到每个帧上。在下面的“材料”部分）。 然后，应用模糊处理，并将信息保存为Alpha纹理，该纹理将替换为纹理，从而在BlurCube的动态材质中渲染前一帧。


Blurcube

在我们的框架中，此过程进行了15次抽签，另加2次以模糊效果。

绘制网格

首先，分别绘制盔甲的一部分，角色的武器，然后是近平面的一部分位置，然后是远处的一部分，还有背景（背景是一幅具有1024x512纹理的平面）。 以下是绘制的粒子系统，远景和远景计划的小细节，最后是带有顶点动画的模型（更多信息请参见下文）。 最后，对于2个调用，将应用计算出的和先前绘制的阴影和发光效果（“发光”）。

用户界面

除上述摄像机外，另一台摄像机还涉及渲染最终帧，该帧旨在单独绘制用户界面。 与主投影投影机和正交投影机不同，它不是每个位置都唯一，而是在整个游戏过程中都存在。 因此，在渲染场景，角色和所有效果之后，将渲染UI并将其放置在主框架的顶部，并在其边缘应用调光晕影效果。


主相机渲染结果


UI相机渲染结果


最终帧渲染结果

总的来说，游戏最后一帧的渲染需要92个抽签。

角色盔甲的材料如何

要创建角色盔甲的材质，请使用分辨率为512x512的纹理： 漫反射（1） ， RGB蒙版（2） ， MatCap（3） ， 阴影形状的附加漫射贴图（4）以及用于制作小噪声纹理MorphMask（5）创建角色转换为阴影形式的效果。



而且，如果扩散卡的所有功能都是标准配置（这只是装甲本身的纹理），我们将更详细地介绍其余内容：

RGB纹理蒙版

由于RGB纹理通常由每个像素从0到1的数字指定的三个颜色通道组成，因此在对象的UV扫描的每个特定点使用它存储有关材料的各种数据非常方便。

在我们的例子中，RGB纹理（遮罩）的通道包含以下过程的信息：

• 红色（红色通道）指示如果同一装甲中的对手参加战斗，则材料的哪些元素将更改颜色（我们使用此系统，以便玩家不会将其角色与对手混淆；红色通道中指定的部分装甲，以另一种颜色（由艺术家单独设置）为对手重新粉刷）；
• 绿色（绿色通道）用于指示将MatCap纹理应用到盔甲的哪些元素以产生金属表面效果，以及该效果的强度（越轻，金属光泽越强）；
• 蓝色（蓝色通道）包含有关将应用发光的细节的信息，从而产生发光表面的效果。

Matcap

  MatCap纹理绿色通道RGB纹理 

为了在每个位置为装甲和角色武器的金属元素创建反射效果，将创建一个具有512x512分辨率的独特MatCap纹理，该纹理基于该位置的处理后屏幕快照，并具有其结构和照明的所有功能。

根据战斗的地点，将相应的MatCap纹理应用于角色的盔甲和武器的材料。 基于材料的RGB纹理的绿色通道中的信息，金属表面的效果将应用于材料的某些部分。 这种方法的处理成本较低，但考虑到当前舞台的所有特征，它会产生逼真的金属元素反射表面效果。

  应用MatCap之前应用MatCap之后 

阴影形状

当角色进入“漫反射”阴影形状时，材质纹理将替换为专门为阴影形状创建的附加纹理。

为了从一种纹理平滑过渡到另一种纹理，使用了一个噪声变形蒙版，使用该蒙版可以实现逐渐的替换效果：

定位照明

该位置上的所有照明和阴影均以2048x2048的分辨率以光照贴图纹理进行烘焙，从而无需实时计算照明并显着提高了生产率。



唯一的定向光源旨在根据发生战斗的竞技场的总体气氛照亮角色。 但是，使用这种方法，无论位置在树冠下还是在阳光下，角色在任何位置的照明都将相同。 这个问题可以通过计算环境物体的动态阴影并将其叠加在角色模型上来解决，但这将极大地影响游戏的性能。

作为每个位置的替代方案，我们存储了一个单独的独特的阴影贴图渐变：实际上，这是分辨率为1024x1的纹理，它是基于位置屏幕截图的渐变，并传达了每个部分的阴影程度。 当角色在舞台上移动时，应用定向照明后其装甲的颜色将乘以对应于其当前位置的渐变色。 因此，在阴影区域中所施加的照明要比在开放区域中弱。


地图阴影图


在该位置的阴影部分照明字符


在开放区域内照明字符

作为最后的接触，Rim Lighting技术用于突出显示角色模型的边缘，例如在有燃烧村庄的地方清晰可见。 这项技术使您可以突出显示角色的轮廓，以便在舞台背景中很好地阅读它们。

动态竞技场效果

FX效果和动态对象（例如，标志，树木上的叶子移动，摇摆的草木等）在“暗影格斗3”位置的“恢复活力”中扮演着重要角色。

外汇

SF3中的大多数FX效果（火，雨，日光等）都是根据将动画材料应用于静态低多边形模型的原理制作的。 但是，有些效果是建立在粒子系统上的。

动态物体

SF3位置上有两种类型的动态对象：物理-通过组织模拟驱动并向其施加脉冲以模拟阵风，以及带有顶点动画的3d模型。 对于此类对象，将创建一个循环的动画轨迹，该轨迹将3d模型的顶点设置为运动。

  顶点叶子动画在旗子的织品模仿。 

感言

SF3中的位置是根据剧院舞台的原理建造的。 像剧院中的观众一样，游戏中的摄像头仅指向一个方向，并且永远不会改变。 环境对象也是按照戏剧场景的原则执行的：它们存在的数量与玩家看到的一样多。 相机的侧面和后面没有任何东西，并且所有模型都只有在那些可能落入相机视野内的位置才具有几何形状。

为了解决在存在反射表面（大理石地板，水等）的竞技场中发挥最大性能的反射问题，将应反射的那些元素重复，并将其在Z轴上的大小设置为负值。 设置重复位置，以便从侧面看两个对象看起来像彼此的反射。 反射表面的材料具有半透明性，其强度取决于表面的性质。 如果反射的物体有足够的距离，并且细节逐渐淡入背景，而不是复制到背景中，则将在Plane上安装基于基于Z轴镜像的反射曲面的屏幕截图的纹理。 这种方法不仅提高了游戏性能，而且给出了非常逼真的结果。

  最终结果，无性别 

结论

现在，移动设备的渲染优化问题比以往任何时候都更加重要。 您在本文中看到的是我们专门为Shadow Fight 3项目设计的解决方案，目前，Banzai Games已开始开发两个新游戏，在这些新游戏中，我们将尝试使用当前的开发成果和添加的功能来使图形更加完美一些新东西。

Banzai Games团队需要图形开发人员。 在此处阅读有关空缺的更多信息。