17173首页 游戏资讯 官方公告 正文

《默特术士》周一随笔 #65——流动的一切

导语
《默特术士》开发揭秘:用自定义UV实现水体流动、滚动球体与鳞片特效!看开发者如何用MaskFX遮罩+顶点颜色,在高效渲染下让平面资源活起来。
在上期随笔中,我们讨论了如何使用自定义 UV 来实现《默特术士》(MoteMancer)的流道效果,而这一次,我们将探讨如何将该技术应用到更多事物上。水体结构是其中的重中之重,但由于这项技术极其强大,它还能用于许多其他巧妙的用途。

今天,我将向大家展示我最喜欢的一些应用方式,以及我是如何在对性能要求极高的游戏环境中保持其高效运行的。周一愉快,让我们深入了解一下吧!



水的流动
游戏中的水体结构包含许多流动的部分。

焦散效果(Caustics)绝对是首选,因为它已经在“珊瑚池”(Coral Pool)中存在了一段时间,现在我们要做的第一件事就是将这种美学风格应用到所有的水体结构中。这是一种简单的多重滚动纹理技术,我之前已经介绍过了。我们只需要在合适的图层上添加一个遮罩,并将其输入到着色器中即可。



紧接着,我们进入流动和下落的水体效果。为此,我们创建了一个 UV 帘幕和通道,让纹理在其上流动,这与流道效果非常相似。这里的诀窍在于,我们可以同时利用玩家行走的基础层,以及用于瀑布和水帘的“随玩家排序”层,最后再叠加一个可以在多处使用的向外扩散的涟漪纹理。



接下来,我们有一种简单的“球体化”(spherize)操作,可以让纹理看起来像个球体。最酷的地方在于,我们可以沿着球形 UV 的方向滚动平铺纹理,从而营造出滚动球体的视觉效果,尽管它实际上并没有极点,这完全是一种非常巧妙的视觉欺骗。再配合纹理上的阴影和光照处理,即使它只是平面图像,也会显得非常有球体感。



最后,为了锦上添花,我们可以利用相同的技术配合一系列纯色,让其他球体交替闪烁柔和的光芒,使它们看起来充满生命力。





解码颜色

观察生成的 MaskFX 纹理,并研究颜色如何帮助我们达成预期的效果,是一件非常有趣的事情。



对于《默特术士》,除了常规美术资源外,我还有两套遮罩纹理,以及附着在每个精灵(sprite)上的另一组数值。这些小控制项用处很大:

常规遮罩 (Regular Mask)
  • 红色通道决定色相偏移的应用位置。
  • 绿色通道控制风吹摇摆。
  • 蓝色通道控制美术资源绕过常规光照的程度。
  • Alpha 通道添加手绘边缘光。
MaskFX 遮罩
  • 红色通道提供 U 坐标。
  • 绿色通道提供 V 坐标。
  • 蓝色通道提供固定的阴影和高光,或用于发光效果的覆盖范围。
  • Alpha 通道打包了使用的纹理及其滚动速度。
顶点颜色 (Vertex Color)
  • 红色通道提供色相角度。
  • 绿色通道偏移滚动纹理的起始位置。
  • 蓝色通道控制效果强度。
  • Alpha 通道处理不透明度。

区分这些遮罩和顶点颜色非常有用。遮罩让我可以精确绘制结构中哪些部分应该产生反应;而顶点数值则允许同一个结构的多个副本表现出不同行为,而无需准备额外的美术资源。

例如,我可以绘制一个遮罩,规定只有叶片应该改变色相,然后给每个副本分配略有不同的色调。或者偏移滚动纹理,这样一排相同的结构就不会像木偶一样整齐划一地做出完全相同的动作。



整合一切

另一个重要的部分是 FX 纹理数组。你可以把它想象成着色器可以选择的一叠纹理。水、涟漪、能量图案和其他滚动外观都可以拥有自己的槽位。

MaskFX 会告诉我们采样哪一个、在哪里采样以及移动的速度有多快。这意味着同一图像的不同部分可以使用不同的效果。流动的通道和滚动的球体不需要因为它们功能迥异就使用单独的材质。



这一点很重要,因为《默特术士》屏幕上可能会同时出现大量结构。如果给每一个小效果都分配单独的材质,将很难保持渲染的批处理效率。

当然,这在其他方面也有成本。额外的图层仍然会消耗像素填充,数值遮罩也需要足够的精度来保持坐标完整。我牺牲了一些纹理内存和着色器性能,换取了一套可以让大量原本平面的美术资源动起来的系统,而无需为每个物件单独制作动画设置。



流动的……鳞片?

这让我想到了下一个有趣的创意:蒸馏器(Alembics)上的蛇。

我想可以用同样的技术,让蛇身的鳞片纹理从头部开始沿着身体滚动。绘制的形状保持不变,但表面看起来却在滑动。这看起来是酷炫还是诡异?我们很快就会见分晓!



虽然还有许多结构需要打磨,但随着这套管线(pipeline)的建立,接下来的工作将是一马平川。

回到实验室去!
~CyanAvatar 🌿

【来源:steam】

我想了解这个游戏:
官网 专区 下载 礼包
尊敬的用户也许你已经注意到了我们文章页面进行了大规模的改造和重构,可以点击提交您的满意度或者想法我们会持续改进,给您提供更好的浏览体验! 一键参与
17173APP

扫描下载APP

游戏礼包一键领取

17173微信公众号

扫描关注公众号

每天更新