目录

用 Unity Shader Graph 打造游戏溶解消散特效,开启炫酷视觉之旅

一、前期准备

(一)创建 URP 项目

(二)搭建基础场景

二、Shader Graph 基础配置

(一)创建 Shader Graph

(二)设置 Shader Graph 属性

三、实现基本溶解效果

(一)添加噪声节点

(二)连接节点实现镂空

(三)添加中心点和距离控制

四、优化溶解边缘效果

(一)添加边缘控制属性

(二)处理边缘计算

五、编写脚本方便控制

(一)创建控制脚本

(二)使用脚本控制


在众多精彩的游戏世界里,怪物与物体溶解消散的特效屡见不鲜,早已成为常见的视觉表现手法。要是把这种特效巧妙运用到场景转场中,那将会给玩家带来前所未有的沉浸式体验。最近,粉丝群里就有小伙伴提出这样的需求,希望能了解如何实现炫酷的世界溶解变化。今天这篇博客,就带大家深入探索在 Unity 中,基于 Shader Graph 打造以世界坐标为中心点的溶解特效。

一、前期准备

(一)创建 URP 项目

在开始制作特效前,我们得先搭建一个合适的项目环境。打开 Unity,新建项目时,选择 URP(通用渲染管线)模板。博主使用的是 Unity Editor 6,不过其他版本操作上大同小异,大家放心尝试。之所以选择 URP,是因为它在性能和灵活性上有不错的平衡,适合我们实现溶解特效。

(二)搭建基础场景

  1. 新建好项目后,进入 Unity 主界面。在 Hierarchy 面板中,右键点击创建一个 Plane 作为地板,再创建一个 Cube。这两个简单的物体将成为我们测试溶解特效的 “小白鼠”。
  2. 调整 Plane 和 Cube 的位置、大小,让它们看起来布局合理。比如,把 Plane 放在地面位置,作为承载 Cube 的平面,方便观察特效效果。

二、Shader Graph 基础配置

(一)创建 Shader Graph

在 Project 面板中,右键点击选择 Create -> Shader Graph -> URP -> Lit Shader Graph。创建完成后,双击它打开 Shader Graph 编辑界面。这个界面就是我们实现溶解特效的 “魔法工厂”,各种神奇的效果都在这里诞生。

(二)设置 Shader Graph 属性

在 Shader Graph 编辑界面右侧的 Graph Settings 中,找到 Surface Type,将其设置为 Transparent,并勾选 Alpha Clip(透明剔除)。这一步很关键,它能让我们的物体实现透明效果,为后续的溶解特效奠定基础。设置完成后,你会发现 Properties 面板下多了一些对应的属性。

三、实现基本溶解效果

(一)添加噪声节点

  1. 在 Shader Graph 编辑界面中,点击鼠标右键,选择 Create -> Node -> Utility -> Simple Noise,创建一个 Simple Noise 节点。它的作用是生成噪声图,为溶解效果增添随机感。
  2. 选中 Simple Noise 节点,在 Inspector 面板中调整它的参数,比如 Frequency(频率)、Amplitude(振幅)等,根据自己的喜好和效果需求进行调整,初步塑造噪声的形态。

(二)连接节点实现镂空

  1. 创建一个 Add 节点(在 Math 节点分类下),将 Simple Noise 节点的输出连接到 Add 节点的 A 输入端口,然后将 B 输入端口的值设置为 0.5。
  2. 把 Add 节点的输出连接到 Shader Graph 的 Alpha Clip 属性上。此时,你会在预览窗口中看到物体出现了镂空效果,这就是初步的溶解迹象啦!

(三)添加中心点和距离控制

  1. 在 Shader Graph 的 Properties 面板中,点击 “+” 号,添加一个 Vector3 类型的公共属性,命名为 center,它将用来表示溶解的中心点。再添加一个 Float 类型的公共属性,命名为 distance,用于控制溶解的范围。
  2. 创建一个 Position 节点(在 Input 节点分类下),这个节点可以获取物体本身的位置。
  3. 创建一个 Distance 节点(在 Math 节点分类下),它能计算两个三维坐标之间的距离。将 Position 节点的输出和 center 属性分别连接到 Distance 节点的两个输入端口。
  4. 创建一个 Divide 节点(在 Math 节点分类下),把 Distance 节点的输出连接到 Divide 节点的 A 输入端口,distance 属性连接到 B 输入端口。这样,我们就得到了一个归一化的比率,它表示物体上每个点到中心点的距离与设定距离的比例关系。
  5. 把 distance 属性的默认值修改为 2(可根据实际效果调整)。
  6. 创建一个 Clip 节点(在 Math 节点分类下),将 Divide 节点的输出连接到 Clip 节点的输入端口,Clip 节点会把输入值限制在 0 - 1 的范围内,确保比率在合理区间,这对于控制溶解范围很重要。把 Clip 节点的输出连接到 Alpha Clip 属性的 B 值输入端口(之前连接 Add 节点输出的位置保持不变,只是新增 B 值连接)。修改 Clip 节点的默认数值,你会看到物体的溶解效果开始基于中心点扩散,并且范围受到 distance 属性的控制。

四、优化溶解边缘效果

(一)添加边缘控制属性

  1. 在 Shader Graph 的 Properties 面板中,再次点击 “+” 号,添加两个 Float 类型的公共属性,分别命名为 borderSize 和 borderColor。borderSize 用于控制溶解边缘的宽度,borderColor 用于设置边缘的颜色。
  2. 为 borderSize 设置一个合适的默认值,比如 -0.1(负值表示向内收缩的边缘宽度)。对于 borderColor,点击颜色选择框,将 Mode 改为 HDR(高动态范围),然后选择一个你喜欢的颜色,比如亮蓝色,作为溶解边缘的颜色。之后把这两个属性添加到 Shader Graph 视图中。

(二)处理边缘计算

  1. 从 borderSize 属性拉出一个 Vector2 节点,将其 X 输入端口连接到 borderSize 属性,把 Y 值修改为 1。
  2. 创建一个 Clamp 节点(在 Math 节点分类下),将 Simple Noise 节点的输出连接到 Clamp 节点的输入端口,把 Clamp 节点的最小值设置为 0,最大值设置为 1,这样就把噪声波的数值范围限制到了 0 - 1 之间。
  3. 创建一个 Remap 节点(在 Math 节点分类下),把 Remap 节点的 In Min 和 In Max 的 X 值都改成 0,将 Clamp 节点的输出连接到 Remap 节点的输入端口。通过这个节点,我们可以得到溶解边缘的部分。
  4. 创建一个 Multiply 节点(在 Math 节点分类下),将 Remap 节点的输出连接到 Multiply 节点的 A 输入端口,把 borderColor 属性连接到 Multiply 节点的 B 输入端口。这样,我们就把边缘颜色和边缘范围计算结果结合起来了。
  5. 最后,把 Multiply 节点的输出连接到 Shader Graph 的 Emission 属性上。保存 Shader Graph,回到 Unity 场景,你会看到物体的溶解边缘出现了带颜色的渐变效果,视觉体验大大提升。

五、编写脚本方便控制

(一)创建控制脚本

  1. 在 Project 面板中,右键点击选择 Create -> C# Script,创建一个新的脚本,命名为 “DissolveController”(名字可自定义)。
  2. 打开脚本文件,在类定义前添加[ExecuteInEditMode]装饰器。添加这个装饰器后,我们不用播放游戏,在编辑模式下也能实时看到脚本的效果。
  3. 在类中定义两个成员变量,分别是public Transform target;public Material dissolveMaterial;,它们分别用于存储目标物体的 Transform 组件和溶解材质对象。
  4. 编写Update方法,代码如下:
void Update()
{
    if (target!= null && dissolveMaterial!= null)
    {
        dissolveMaterial.SetVector("_center", target.position);
    }
}

这段代码的作用是,当目标物体和溶解材质都存在时,不断修改材质上 Shader 的_center 属性(也就是之前在 Shader Graph 中定义的 center 属性),让溶解中心点跟随目标物体的位置变化。

(二)使用脚本控制

  1. 回到 Unity 场景,创建一个新的空游戏物体,命名为 “DissolveControlObject”(可自定义)。
  2. 将刚刚编写的 DissolveController 脚本挂载到这个新创建的游戏物体上。
  3. 在 Inspector 面板中,将 DissolveController 脚本的 target 属性设置为我们想要作为溶解中心点的物体(比如之前创建的 Cube),将 dissolveMaterial 属性设置为应用了溶解 Shader 的材质(也就是之前创建并配置好的材质)。
  4. 现在,当你在场景中移动物体时,就能实时看到基于该物体位置的溶解效果了。如果想要实现反向溶解(即从外向内溶解),在 Shader Graph 的最后输出部分,拖出一个 One Minus 节点(在 Math 节点分类下),将之前连接到 Alpha Clip 属性的输出替换为 One Minus 节点的输出,保存 Shader Graph,就能看到反向溶解的效果啦!

到这里,我们基于 Unity Shader Graph 的物体溶解特效基础部分就完成啦!今天的内容主要聚焦在基础溶解特效的实现,在下一篇博客中,我们会进一步探讨如何添加贴图和模拟场景跳转的效果,让溶解特效更加完善。希望大家持续关注,一起在游戏开发的世界里探索更多有趣的技术!

Logo

分享前沿Unity技术干货和开发经验,精彩的Unity活动和社区相关信息

更多推荐