您想找什么?
Hero background image
使用 VFX Graph 和 Shader Graph 在 Unity 中创建 2D 特效

本文介绍了如何使用 VFX Graph 和 Shader Graph (Unity 2022 LTS) 在 Unity 示例项目 Happy Harvest 中创建特效。

您可以从 Unity Asset Store 下载并安装 Happy Harvest

本页涵盖了两本免费高级电子书中深入讲解的一些技术和工具集:

请参阅本系列的其他文章,了解如何复制 《Happy Harvest》中的效果和视觉效果:

  1. 使用 Unity 2D 动画创建和自定义角色
  2. 使用 Unity Tilemap 2D 创建高级 Tilemap
  3. 使用 URP 的 2D 光影技术
2D 项目中的视觉效果
2D 项目中的视觉效果

您可以使用多种不同的方法在 Unity 中创建 2D 视觉效果。例如,要制作火焰效果,您可以逐帧为火焰制作动画,使用 Shader Graph中制作的着色器为精灵制作动画,或者产生火焰粒子。对于后一种方法,您可以选择在 CPU 上运行 的内置粒子系统 ,或者使用 VFX Graph 和 GPU 的功能来产生数百万个粒子。两种系统均可在同一个项目中使用,因此您可以选择最适合特定效果的系统。

本文重点介绍 VFX Graph,它可用于 Unity 2022 LTS 及更高版本的 2D 游戏。

在 Unity 2D 项目中创建特效之前,需要考虑几个关键点:

  • 摄像机如果您使用透视相机,您的效果就会像在 3D 游戏中一样发生在三维空间中。如果您使用正交相机,则需要设置系统的渲染器以使用正确的 排序层 (Sorting Layer)在此处阅读有关相机透视的更多信息。
  • 后期处理如果您选择通用渲染管道 (URP),则可以将 后期处理效果 应用到您的 2D 项目,例如,通过 URPVolume 框架为粒子效果添加绽放效果。
  • 可以通过不同的方式实现效果。例如,表示效果的游戏对象可以有多个使用不同系统的子游戏对象,如具有自定义着色器的精灵或多个粒子系统。
  • 动画剪辑动画剪辑 可以帮助您编排流畅的基于精灵的动画效果。您甚至可以使用 Unity 的骨骼动画 系统(谨慎)来控制精灵动画中精灵的各个部分。
  • Unity Asset Store请前往 Unity Asset Store开始为您的项目添加视觉效果,您会在那里找到许多现成的 2D 效果。
2D 视觉特效图形
2D 视觉特效图形

Visual Effect Graph Assets 与 Unity 2022 LTS 中使用 Shader Graph 的 2D 渲染器兼容。要在您的项目中创建新的 VFX Graph,请按照 文档中的步骤进行操作。

VFX Graph 中的 输出上下文 定义了如何呈现效果。输出粒子四边形 等网格的输出上下文提供了添加着色器图的选项。无论您是从 Lit 还是 Unlit 输出开始都没有关系,因为照明模型将会改变以适应 Shader Graph。您可以使用下面列出的默认着色器,或者您自己的基于 Shader Graph 的着色器。

对于 URP 中的 2D 项目,您可以使用以下 三个基于精灵的 着色器图之一:

  • 点亮:接收来自2D照明系统的光线
  • 熄灭:不受 2D 照明系统影响
  • 风俗:实现自定义 2D 光照模型

请记住检查 Shader Graph 内部的 SRP 目标中的 Support VFX Graph 选项。

着色器图中公开的属性显示在 VFX 图中。如果需要,您可以覆盖它们,例如,如果您希望 VFX Graph 粒子系统控制着色器随时间变化的颜色。

使用 VFX Graph 制作雨水
使用 VFX Graph 制作雨水

雨是游戏中常见的基于粒子的效果。以下是使用 VFX Graph 和 GPU 在 《Happy Harvest》 中创建雨景的主要步骤,这允许许多单个粒子进行运动:

雨粒子(在层次结构中称为“ 视觉效果雨 ”)在排序层中渲染,位于地面上方但在物体后面。这样做的原因是,当水滴粒子接触地面时会产生水溅效果,以模拟真实雨水的反应。如果在灯柱等垂直表面上可以看到雨滴,则看起来可能不正确。在现实世界中,光会影响其所有环境,包括雨滴。在 《Happy Harvest》中,雨的 VFX Graph 使用输出环境中基于 Sprite Lit 的 Shader Graph 来点亮雨粒子。如果没有与雨水相匹配的 Lit Shader Graph,其色调就无法改变以反映全天变化的光线。逐帧溅射:当雨粒子消失时,Trigger On DieBlock 会触发 GPU 事件,从而产生一个可播放简单水花动画的单个翻书粒子。Happy Harvest 使用 FlipbookShader Graph UV Block 来显示纹理内的不同帧。或者,您可以使用 VFX Graph 内的 Flipbook PlayerBlock 来实现相同的效果。

雨粒出现在前景中(在层次结构中名为“ 视觉效果雨前景 ”)。由于它们模拟靠近相机镜头,因此它们在撞击地面时不会产生水花。

前面一种效果的变体与闪烁的雷声效果(视觉效果 雨 前景 雷声)一起使用。使用 VFX 输出事件播放音频组件为雷声添加音效。该组件附带 输出事件处理程序的示例脚本;输出事件上下文在图表中触发它。雷声大作:创建此效果的一个简单但有效的方法是生成一个基于 VFX Graph 的单个粒子,该粒子在摄像机位置的中心初始化,并且足够大以填满屏幕。输出节点中的 “Color Over LifetimeBlock”通过评估随时间变化的渐变来改变粒子的颜色。在该渐变中,透明度的变化模拟了雷光的闪烁和消逝。

使用相机平铺进行优化
使用相机平铺进行优化

雨水影响了 《Happy Harvest》的整个场景,但是由于只有一部分可以通过摄像机看到,因此许多计算的粒子都是不必要的。您可以检查检查器 (Inspector) 中的 “视锥剔除 (Frustum Culling)”选项以避免渲染这些粒子,或者使用相机平铺 (演示中采用的技巧)。

相机平铺允许您在与场景视图匹配的框中创建和渲染粒子,给人一种平铺的印象,就好像粒子在场景中的任何地方都被模拟一样。相机外部不会创建任何粒子,因此无需进行额外设置即可减少生成的粒子数量和效果的容量分配。

为了在 《Happy Harvest》中使用相机平铺,需要使用设置位置形状将雨水生成设置为与相机尺寸相匹配:AABox。相机格式(手动输入尺寸、直接使用 MainCamera 或使用aspectRatio 插槽)通过尺寸乘数缩放以匹配场景中的相机设置。AABox 比实际相机尺寸略大,以避免因剔除而导致的弹出效果。形状生成模式设置为表面,因为在 2D 项目中不需要在整个体积上生成(因为不使用 Z 轴)。

一旦此设置完成,您将需要系统输出中的一个 Tile/Warp PositionsBlock。这与相机变换相链接以匹配其位置和相机尺寸,正如您也希望在系统的 初始化上下文 中所做的那样。

此技术同样适用于 3D 中的降雨效果,但如果想要深度观察,则应将“形状生成”模式设置为“体积”,并且 Z 轴的值应为零以外的值。

火焰效果
火焰效果

游戏中的另一个常见效果是火焰。在 《快乐的丰收》中,院子里和农民家里的壁炉里都有温暖的篝火。火焰效果由三组粒子组成:火焰、火花和烟雾均由同一个名为 VFX_Fire的图表产生。

火焰动画

火焰的流畅动画发生在 Shader Graph 中的着色器级别,并展示了您可以使用 GPU 和着色器的强大功能实现的效果。

如果你打开项目中的 ShaderGraph_Fire文件,你会注意到单个精灵(Mask Texture2D)用于创建一个蒙版,使火焰呈现椭圆形。动画和精灵是通过带有噪声的滚动“Voronoi”图案以及火焰和背景的色调创建的。alpha 蒙版使用相同的火焰形状,但使用 饱和运算符 可以产生更明显的轮廓。

火花和烟雾效果为火焰添加了精致的细节,使用了标准的 Lit Shader Graph。通过对速度、比例和初始位置块进行组合修改,仅需要一个精灵就能创造出生动的效果。火花和烟雾效果的图表包含注释,可帮助您在自己的项目中重现效果。

水砖动画
水砖动画

水采用卡通般的焦散或波浪,并带有透明效果,因此与演示中的整体艺术风格相匹配。水着色器经过优化,可以与构成演示大部分环境的图块地图配合使用。

默认的 2D Lit 材质称为 “水”, 可以在 Tilemap 的 Tilemap Renderer 中找到。已将其替换为带有水着色器的自定义材质。瓷砖地图内的所有瓷砖都使用相同的材​​质渲染,因此该瓷砖地图仅用于水瓷砖。

ShaderGraph_Water 图中,水效果也是从拉伸的倒置 Voronoi 噪声模式生成的,以模拟焦散(水焦散中的常用方法)。振荡运动是平铺和偏移 UV 加班并应用噪声效果的产物。

折射效果

折射效果通过 Lerp 节点混合到表面纹理中。折射使用了 相机排序层 纹理,它是相机渲染直到定义的排序层的快照,这意味着先前排序层中的所有元素都将出现在该纹理中。在 《Happy Harvest》中,渲染一直发生到 对象 排序层,该层用于角色等元素。使用“法线和高度”节点生成的法线贴图扭曲了“相机排序层”纹理的 UV,该贴图使用与表面纹理相同的 Voronoi 纹理。

观看使用 Lost Crypt 2D 演示的本教程 ,获取有关 2D 中其他水效果的分步教程。

游戏中的 VFX
游戏中的 VFX

到目前为止讨论的效果并不与 《Happy Harvest》中的游戏玩法交互;它们是环境的一部分,无论演示中发生什么都会发挥作用。然而,在大多数游戏中,您需要根据环境中和/或角色发生的动作来触发某些效果。让我们看一下 《Happy Harvest》中的一些触发效果。

使用物品时的效果

一些效果附加在角色工具上,比如水罐。水罐的预制件 Prefab_Tool_WaterCan具有三个动画剪辑,可根据角色面向的方向(向上、向下、侧面)改变精灵。在这些动画中,有一个 动画事件 调用工具动画事件处理程序组件内的函数。

此脚本可启用或禁用从 Inspector 引用的每个位置的 VFX Graphs 的相应实例。

使用图块进行迭代时的效果

一些效果会发生在瓷砖上,比如挖掘和收获。这确保它们不会对角色动画或位置改变造成问题。当需要耕种一个细胞时,耕种效应就会在该细胞上发挥作用;而当需要收获时,该细胞就会调用收获效应。

当触发倾斜效果时,它会引用附加到 GridGameObject 的 TerrainManager 组件中的 TillingPuff_prefab 效果。它移动到 瓷砖的中心 然后播放。其他效果(例如农作物收割)调用从 Data/CropsScriptableObject 引用的 VFX Graph。在 TerrainManager 脚本初始化时,会创建一个 VFX 池字典(脚本中的变量 m_HarvestEffectPool),该字典会实例化多个 VFX 预制件,以便在必要时播放。

细微之处,成就非凡
细微之处,成就非凡

Happy Harvest 中的小效果为演示增添了光彩,使其更有趣。其中包括:

  • VFX_DustParticles:在环境中传播环境灰尘
  • 视觉特效/水:用于制作微妙的水波和水花
  • VFX_叶子:当玩家经过时触发树叶从灌木丛中掉落
  • 角色触发角色身上的烟雾效果;这是通过内置粒子系统实现的
  • P_VFX_Moths:触发飞蛾在聚光灯附近飞行;这也是用内置粒子系统制作的

上面列表中的每个基于 VFX Graph 的效果都包含解释每个节点用途的注释。

获取有关 Unity 视觉效果的免费电子书
获取有关 Unity 视觉效果的免费电子书

这是由经验丰富的 Unity 开发人员创建的,并得到了 Unity 工程师和技术艺术家的意见,这是我们迄今为止开发视觉效果的最大指南。电子书全面概述了如何使用 Unity 中的视觉效果创作工具来创建任何类型的效果:水和液体、烟雾、火、爆炸、天气、冲击、魔法、电力——唯一的限制就是您的想象力。

您还可以观看这两个有关如何使用 VFX Graph 制作特效的视频教程:

您喜欢本文吗?
是的!
还行。