【案例】故障雪花屏

开发平台：Unity 6.0
开发工具：Shader Graph
参考视频：【U2D Shader Graph】️雪️花️屏️
 

一、效果图

二、Shader Graph 路线图

三、案例分析

核心思路：雪花屏幕效果 +（混合）+ 原图像 = 最终图像
 

3.1 雪花屏实现 - 使用 Noise（噪声节点）

Simple Noise（简易噪声节点）的呈像符合雪花屏的表现，是实现雪花屏幕的最佳选择。
 
结合实际表现情况，雪花屏为动态型变化更新。
故需要引入 Time（定时器节点）+ 变量Speed（控制变化频率）的结果。如下所示：

[1] 可能出现的问题：部署 Shader Graph 至 UnityEngine.UI.Image 后，发现雪花屏仍然保持静态。
这是因为 Simple Noise（简易噪声节点）的 Seed 输入值偏小所造成的。当输入值 ≥ 5 时，出现明显的浮动变化。

 
关于原作者选择的实现路线效果图 对比 Noise 效果图

图1 使用 Simple Noise（简易噪声节点）输入

图2 使用 Random Range（随机数节点）输入

原视频作者采取 UV（光照贴图节点） + Random Range（随机数生成节点）实现动态的类噪声表现效果。
但笔者选择继续 Noise（噪声）线路进行改善。后续内容将延续该思路进行，大致最终实现效果与原视频作者思路相似。
 

3.2 动态 Noise（噪声）变化

• 动态变化的固定节点组合：Time（定时器节点）* 变量Speed 的 输出结果。
• UV 位置变化关系固定组合：Tilling And Offset（缩放偏移节点）输入 Offset 信息。

 
Simple Noise（简易噪声节点） 需要 UV + Scale 两个变量来动态改变生成的噪声图。

• 变量 Scale：控制噪声图的颗粒密度。
• UV：控制变化速度

图1 Scale = 200

图2 Scale = 15

3.3 不透明度表现

控制雪花屏的透明度表现：变量 Alpha * UV 输出值。具体对比如下：

图1 alpha = 1.0

图2 alpha = 0.6

图2 alpha = 0.4

图2 alpha = 0.0

3.4 叠加背景纹理输出（可选）

叠加背景图，一般的为了方便使用 UnityEngine.UI.Image x2 来实现叠加效果。这是最快且迅速的方式。
 

如果需要在 Shader Graph 中实现叠加，引入 Blend（混合节点）。该节点将图层叠加输出至 Base Color 中即可。
须注意：应用于 Cavnas 上的纹理图选择 Mode = Screen。其他模式可自探索效果。