企业官网建设流程全解析

做2D游戏的时候，你有没有遇到过这种情况：角色死亡、怪物消失、场景切换，这些视觉节点如果只是直接SetActive(false)或者做个简单的渐隐，玩家会觉得干巴巴的。所以动画师和程序经常会求一个效果——让一张图像被某种神秘力量从内部“啃食”掉，缺口沿着边缘不断向外蔓延，同时还带一圈高亮边框。这就是“Unity2D图片溶解扩散效果shader”最典型的应用场景。

这篇文章就是把我在实现这个效果时踩过的坑、用过的公式、最终稳定的Shader代码全部整理出来。适合已经写过基础Unity Shader、但不太清楚溶解扩散怎么和2D Sprite配合的开发者；也适合只想拿到完整代码直接改参数的美术或全栈型程序。看完你至少能实现：从指定中心点向外扩散的溶解效果、带燃烧色边缘的腐蚀效果、以及一套用于动态控制进度的C#脚本。

1. 效果拆解与核心设计思路

1.1 一个溶解效果由哪三部分构成

先说清楚“溶解扩散”不等于普通的透明度变化。它需要三个东西协同工作：

一是进度值。它是一个0到1的数值，驱动整个效果的进行：0表示图片完整无损，1表示图片彻底消失。脚本侧要做的事情基本就是不断把这个数从0推到1，剩下的交给Shader。

二是噪声纹理。溶解的效果之所以看起来“破碎”、有毛边，而不是一个严格几何的圆形空洞，靠的就是一张噪声图给不同像素随机的“抵抗力”。噪声值高说明这个像素晚一点被融化，噪声值低说明它提前消失。

三是距离因子。有了噪声，还需要让溶解行为有方向性——从一个点开始往外扩散。越靠近中心的像素越弱，越早被消掉；越靠边缘的像素越顽强，能挺到最后。这个距离因子就是把“静止的噪声溶解”变成“有扩散感的溶解”的关键。

如果你把溶解效果想象成一锅正在烧开的汤，进度值是火力大小，噪声图就是汤里一个个气泡的位置，距离因子则是气泡从中心开始冒还是从锅边开始冒——这三件事的比例稍微调一调，视觉气质就完全不一样。

1.2 为什么不用粒子特效或简单的Alpha裁剪

有人会问：做个溶解扩散是不是用粒子特效拼一下更快？答案是：应急可以，但粒子和贴图配合会产生严重的“两张皮”问题。粒子只能模拟碎屑，但贴图本身没有变化，玩家一眼就看穿BOSS站在原地只是多了些飞灰。而Shader方案直接对图片本身做逐像素裁剪，图片的轮廓是实时破开的，碎屑表现可以和shader边缘颜色、燃烧色配合，视觉上是一体的。

另一个常见做法是给Sprite写一个简单Shader，用clip()直接根据主纹理某个通道裁剪像素，再加一个进度条。这个版本比粒子强，但因为它没有引入距离因子，溶解是从整张图所有地方随机同时发生的，看起来更像是“图片在风化剥落”，而不是“从某个点向外扩散”。如果关卡设计师想表达的是“力量从角色胸口向外爆发”，这种无方向溶解就不对了。所以最终我还是选择了“噪声采样 + 距离修正 + 阈值裁剪”的组合方式。

1.3 关键技术选型：噪声纹理的获取方式

解决“噪声从哪来”是我实现的第一个环节。最省事的方式是Photoshop里用“滤镜—渲染—云彩”生成一张灰度图存成JPG或者PNG。注意，一定要用灰度图，R、G、B三个通道的值保持一致或者只采样R通道都行；彩色的噪声图可能会导致某一个通道的分布不均匀。

但项目里的美术资源常常不方便临时导出，另一位组员的做法是在C#里运行时生成噪声纹理。生成一次之后缓存到内存或者保存成Asset，效果非常稳定，还不需要依赖外部图片。下面这段代码就是运行时生成Perlin噪声纹理的老写法，参考价值很大：

Texture2D GenerateNoiseTexture(int width, int height) { Texture2D tex = new Texture2D(width, height, TextureFormat.RGBA32, false); var pixels = new Color[width * height]; float scale = 0.1f; for (int y = 0; y < height; y++) { for (int x = 0; x < width; x++) { float noise = Mathf.PerlinNoise(x * scale, y * scale); pixels[y * width + x] = new Color(noise, noise, noise, 1f); } } tex.SetPixels(pixels); tex.Apply(); tex.wrapMode = TextureWrapMode.Repeat; tex.filterMode = FilterMode.Bilinear; return tex; }

这段代码虽然只是生成一张常规Perlin噪声图，但很够用。如果希望溶解的碎块更有“像素感”，可以把FilterMode改成Point，再配合把图片的MeshType调成FullRect来用。噪声纹理的WrapMode一定要Repeat，否则UV超过1的时候会拉出透明边缘。

2. Shader核心实现与逐段讲解

2.1 搭建2D Sprite Shader的基础框架

在Unity里给Sprite做自定义Shader，最稳的起点是参照内置的Sprites/Default。它有透明的渲染队列、Cull Off、ZWrite Off，并且使用Blend SrcAlpha OneMinusSrcAlpha。这些状态标签对2D精灵来说缺一不可：透明队列保证半透明图片和UI能正常合批，Cull Off保证Sprite翻转时不会出现面片被剔除的诡异情况，ZWrite Off则是避免半透明物体互相遮挡时产生深度排序错误。

基础框架的Properties需要包含：主纹理_MainTex、噪声纹理_NoiseTex、进度值_Progress、扩散中心_CenterX/_CenterY、边缘宽度_EdgeWidth、边缘颜色_EdgeColor。每个属性声明我都会加_HDR关键字——边缘颜色用HDR可以让后续配合Bloom后处理产生灼烧感很强的发光边。

Shader的头部标签建议写成：

Tags { "Queue"="Transparent" "RenderType"="Transparent" "IgnoreProjector"="True" }

IgnoreProjector很少有人写，但2D精灵经常被场景里的投影器或者阴影系统干扰，加上它之后能避免屏幕上出现不明多边形。

2.2 核心溶解公式：距离因子与噪声叠加

顶点着色器不需要做什么复杂变换，常规做法是UnityObjectToClipPos加TRANSFORM_TEX。真正的关键在片元着色器中。

第一步，先求当前像素到扩散中心的UV距离：

float2 center = float2(_CenterX, _CenterY); float dist = distance(i.uv, center); float spreadFactor = saturate(dist * _SpreadStrength);

这里的_SpreadStrength是扩散强度的缩放系数。数值越大，从中心到边缘的距离梯度被拉得越陡，溶解的扩散感越强；数值过小，整个溶解过程会更接近整体随机风化。经过实测，_SpreadStrength取值在2到5之间时视觉效果最自然，中心的小孔会很快形成，然后像波纹一样推向四周。

第二步，采样噪声纹理并叠加距离因子：

float noise = tex2D(_NoiseTex, i.uv * _NoiseScale).r; float dissolveValue = noise * 0.7 + spreadFactor * 0.3;

这两行代码是整个溶解效果的核心公式。noise提供了随机破碎感；spreadFactor保证中心先碎、边缘后碎。两个数值的混合比例可以按项目调：想让碎块更多就把noise系数调大；想让扩散的“泡泡”更大更圆就把spreadFactor系数调大。我一般倾向于噪声占六到七成，边缘扩散感占三到四成。

2.3 用clip还是用alpha裁剪，以及为什么

看到这一步，最大的分歧在于“怎么让被溶解的像素消失”。两种方案我都试过，先分清楚再选。

方案一是直接调用clip(dissolveValue - _Progress)。当dissolveValue - _Progress < 0，该片元被移出渲染管线。这一步执行的效率很高，但有一个副作用：像素是硬切走的，边缘如果有半透明像素就会有一点锯齿感。这是绝大多数本地溶解Shader的做法。

方案二是不用clip，而是把最终透明度乘上一个阈值判断的结果：

float alpha = smoothstep(_Progress, _Progress + _EdgeWidth, dissolveValue); col.a *= alpha;

这种做法边缘过渡更柔和，在和场景里的粒子效果叠加时更自然。缺点是即使alpha为0的像素仍然要执行后续的颜色混合计算，在大量Sprite同屏时GPU开销略高于Clip。但对2D游戏来说，这种差距可以忽略。

我现在的最终版是两套结合：用clip把无用的像素从渲染管线里移出去（省填率），同时用smoothstep控制边缘的渐变宽度，解决clip的锯齿感。

2.4 边缘光与燃烧色：给溶解增加“灼烧感”

纯粹的溶解像是贴图被橡皮擦擦掉，缺少反馈。真正的Visual Feedback要有一圈高亮的边缘颜色，让玩家觉得“这里正在被消耗”。

边缘区域可以通过smoothstep定位。保留下来的像素中，dissolveValue越接近_Progress越靠近溶解边缘。于是：

float edge = 1.0 - smoothstep(_Progress, _Progress + _EdgeWidth, dissolveValue);

这段代码里，edge在溶解边界处接近1，在完整保留区域接近0。然后我们把边缘颜色混合进主纹理颜色：

fixed3 burnColor = lerp(col.rgb, _EdgeColor.rgb, edge * _BurnIntensity); col.rgb = burnColor;

_BurnIntensity控制边缘色的渗透强度。如果设为0.6左右，边缘会出现一圈明显的暖色过渡；如果设为1，溶解交界处的原图几乎会被完全替换成边缘色，视觉上很像金属被烧红的状态。边缘宽度建议控制在0.03到0.08之间，太宽了像描边，太窄了看不到。

3. 完整Shader代码与配套控制脚本

3.1 可直接复制的完整Shader

下面直接给出我整理过的完整版本，整体没用什么高级语法，兼容性很好。把这段代码存成2DDissolveSpread.shader，赋给SpriteRenderer的Material即可看到完整效果：

Shader "Custom/2DDissolveSpread" { Properties { [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {} _NoiseTex ("Dissolve Noise", 2D) = "white" {} _Progress ("Dissolve Progress", Range(0, 1)) = 0 _NoiseScale ("Noise Scale", Float) = 1 _CenterX ("Spread Center X", Range(0, 1)) = 0.5 _CenterY ("Spread Center Y", Range(0, 1)) = 0.5 _SpreadStrength ("Spread Strength", Range(0.1, 10)) = 3 [HDR] _EdgeColor ("Edge Color", Color) = (1, 0.4, 0, 1) _EdgeWidth ("Edge Width", Range(0.001, 0.3)) = 0.05 _BurnIntensity ("Burn Intensity", Range(0, 1)) = 0.6 } SubShader { Tags { "Queue"="Transparent" "RenderType"="Transparent" "IgnoreProjector"="True" } Blend SrcAlpha OneMinusSrcAlpha Cull Off ZWrite Off Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; fixed4 color : COLOR; }; struct v2f { float4 vertex : SV_POSITION; float2 uv : TEXCOORD0; fixed4 color : COLOR; }; sampler2D _MainTex; sampler2D _NoiseTex; float4 _MainTex_ST; fixed4 _MainColor; fixed4 _EdgeColor; float _Progress; float _NoiseScale; float _CenterX; float _CenterY; float _SpreadStrength; float _EdgeWidth; float _BurnIntensity; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); o.color = v.color; return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv) * i.color; if (col.a < 0.01) discard; float2 center = float2(_CenterX, _CenterY); float dist = distance(i.uv, center); float spreadFactor = saturate(dist * _SpreadStrength); float noise = tex2D(_NoiseTex, i.uv * _NoiseScale).r; float dissolveValue = noise * 0.7 + spreadFactor * 0.3; // 硬裁剪移出无用像素 clip(dissolveValue - _Progress); // 边界渐变宽度 float edge = 1.0 - smoothstep(_Progress, _Progress + _EdgeWidth, dissolveValue); // 混合燃烧色 fixed3 burnColor = lerp(col.rgb, _EdgeColor.rgb, edge * _BurnIntensity); col.rgb = burnColor; // 平滑半透明边缘 col.a *= 1.0 - edge * _EdgeWidth * 10.0; return col; } ENDCG } } }

使用的时候有两点建议：第一，给SpriteRenderer挂上这个材质之后，不要直接改sharedMaterial，因为多个Sprite共用同一个材质会造成属性互相干扰。正确做法是用material属性或者MaterialPropertyBlock。第二，如果场景里存在多个使用同一种Shader但进度不同的Sprite，可以在C#中给每个对象单独设置材质，也可以全部用MaterialPropertyBlock，第二种方案更省材质实例，但从SetFloat到Shader生效会有一个极小的内存分配，需要避免在Update里高频调用。我通常的做法是只在关键帧更新progress波动，不追求每帧都平滑变化。

3.2 C#脚本：控制溶解进度和中心点

拿到Shader之后，还需要一个C#脚本控制进度以及动态设置扩散中心。扩散中心并不是写死的一张图片的UV(0.5, 0.5)，那样所有角色都是从肚脐冒烟。实际需求可能是：点击怪物身上某个位置，溶解从那里开始；或者角色被击中时，溶解从枪口方向开始蔓延。这就需要把鼠标点击的世界坐标转换成Sprite的UV坐标。

算法的核心是下面这段：

Vector3 worldPos = Camera.main.ScreenToWorldPoint(Input.mousePosition); Vector3 localPos = transform.InverseTransformPoint(worldPos); SpriteRenderer sr = GetComponent<SpriteRenderer>(); Sprite sp = sr.sprite; if (sp == null) return; Rect rect = sp.textureRect; // 将局部坐标映射到该Sprite图集内的UV，从而得到0~1的UV坐标 float u = (localPos.x - sp.bounds.min.x) / sp.bounds.size.x; float v = (localPos.y - sp.bounds.min.y) / sp.bounds.size.y; material.SetFloat("_CenterX", u); material.SetFloat("_CenterY", v);

这里面有个必须注意的坑：如果Sprite是图片图集中的一块（通常美术会打图集），sp.bounds并不是整张纹理的边界，而是这个Sprite在图片里的局部边界，这个映射依然成立，因为UV本来就是在Sprite的纹理图集坐标系下算的。但不要直接访问sp.uv去求比例，不同Unity版本的图集处理细节会变，直接通过bounds的min和max求比例最稳。

完整的控制脚本如下，它同时支持外部传入中心坐标和自动播放扩散动画：

using UnityEngine; using System.Collections; [RequireComponent(typeof(SpriteRenderer))] public class DissolveEffect : MonoBehaviour { [SerializeField] private float duration = 2f; [SerializeField] private bool playOnStart = true; private SpriteRenderer spriteRenderer; private Material mat; private void Awake() { spriteRenderer = GetComponent<SpriteRenderer>(); mat = spriteRenderer.material; } private void Start() { if (playOnStart) { PlayFromCenter(); } } public void PlayFromCenter() { StopAllCoroutines(); StartCoroutine(PlayDissolve(new Vector2(0.5f, 0.5f))); } public void PlayFromMouse() { Vector3 mouseWorld = Camera.main.ScreenToWorldPoint(Input.mousePosition); Vector2 uv = WorldToSpriteUV(mouseWorld); StopAllCoroutines(); StartCoroutine(PlayDissolve(uv)); } private IEnumerator PlayDissolve(Vector2 uv) { mat.SetFloat("_CenterX", uv.x); mat.SetFloat("_CenterY", uv.y); mat.SetFloat("_Progress", 0f); float timer = 0f; while (timer < duration) { timer += Time.deltaTime; mat.SetFloat("_Progress", Mathf.Clamp01(timer / duration)); yield return null; } } private Vector2 WorldToSpriteUV(Vector3 worldPos) { Vector3 localPos = transform.InverseTransformPoint(worldPos); Sprite sp = spriteRenderer.sprite; if (sp == null) return new Vector2(0.5f, 0.5f); float u = Mathf.InverseLerp(sp.bounds.min.x, sp.bounds.max.x, localPos.x); float v = Mathf.InverseLerp(sp.bounds.min.y, sp.bounds.max.y, localPos.y); return new Vector2(u, v); } }

Mathf.InverseLerp本质就是把一个坐标值按区间映射到0~1，比手算除法要稳健也更好读。这个脚本已经经过实际测试，放在任意场景里，挂到SpriteRenderer上就能看到效果。

3.3 扩散形态的进阶玩法

基础版本完成后，可以根据项目需求扩展出几种不同表现。我在实际调的时候发现，改动很小的参数就能得到完全不同的视觉效果，这里列出三种常见的扩展方向。

方向扩散：如果不希望从一点向四周均匀扩散，而是像墨汁滴进水里那样沿一个方向蔓延，最简单方式是修改距离公式。把球形的distance换成X轴方向上的绝对差值：

float spreadFactor = saturate(abs(i.uv.x - _CenterX) * _SpreadStrength);

这样溶解表现为从左往右扫过，像一扇逐渐打开的门。把abs(i.uv.y - _CenterY)换成Y轴版本就是从下往上溶解，常用于“画面从下到上刷出/消失”的场景。

环形波纹扩散：如果你想要的效果是溶解边界呈环状推进，用多个同心圆做过渡，那可以额外引入一层正弦扰动：

float dist = distance(i.uv, center); float wave = sin(dist * 20 - _Progress * 6.28) * 0.05; float dissolveValue = noise * 0.7 + spreadFactor * 0.3 + wave;

加了一层波函数之后，溶解边缘会像声波一样一格一格往外跳，配合高性能的Bloom后处理，观感提升很大。但这个变体对移动端性能不太友好，因为sin会对所有像素计算，同屏大量精灵时建议只在关键角色身上使用。

恢复效果：把进度的方向反过来。正常溶解是从0到1，图片从完整到消失；恢复效果则是从1到0，图片从消失状态一点一点长回来。C#脚本那边只需要把_Progress用反向差值驱动即可。当然，Shader里的copy逻辑要保留，因为消失后的像素组不会自动回填。实际做角色“复活”演出时，这个效果很常用，看起来像是能量重新凝聚成实体。

3.4 噪声纹理的细节与参数推荐

噪声纹理的采样强度和频率，直接决定了溶解碎块是“马赛克式”还是“棉絮式”。我测试过几个典型配置，整理成表格方便大家参考。

参数不要迷信固定值，放在具体的项目里要看图片本身的分辨率。高分辨率大图需要较低的NoiseScale才能看到完整的大块破碎感；低分辨率小图需要较高的NoiseScale才能看到细小的颗粒感。一个快速的调参口诀是：让溶解边缘的“最小碎块尺寸”大致等于你期望的像素阈值。例如希望碎块最小为8x8像素，那么NoiseScale要保证噪声纹理的一个纹素覆盖大约8x8个屏幕像素。具体推导过程依赖屏幕DPI，通常靠肉眼调整。

4. 使用过程中常见的问题与排查记录

4.1 图片边缘出现半透明雾边或白边

这个问题出现频率最高，尤其是在美术从PNG导入Sprite后直接挂Shader时。原因多是图片本身是剪影或者带透明通道，在边缘处原本就存在一圈预乘Alpha残留，溶解时半透明像素的边缘色被放大，形成白边或黑边。

解决思路一般分两步走。第一步在Shader入口处做一个预过滤，把alpha值小于0.05的边缘像素直接通过discard丢弃，这样它们在溶解前就已经不参与计算。第二步是把主纹理的压缩格式改一下。不要用默认的无压缩RGBA，尤其在移动端用ASTC或ETC2格式时，半透明边缘很常见，检查美术原始素材在导入面板里的“Alpha Is Transparency”选项，勾选之后，边缘的残留会被Unity Alpha处理流程自动清理。

4.2 性能问题：同屏大量溶解精灵时帧率骤降

Shader本身的复杂度很低，主要开销其实是噪声纹理采样和Clip带来的分支判断。但如果同一屏有几十个Sprite同时在溶解，每个都各自采样一张噪声图、执行一次clip、跑一次smoothstep，性能就会开始吃紧。

我的优化顺序是这样：首先把噪声图的尺寸控制到256x256。溶解效果属于高频噪声，256和1024在视觉上几乎看不出差距，但采样的缓存命中率差异巨大。其次，Shader里不要用太多次的tex2D采样，很多人喜欢在噪声图里采样RGB三通道做三张噪声混合，视觉确实更好，但性能也会变成三倍消耗。常规情况下可以只采样R通道一次，再用一个数学扰动函数在片元内部生成第二层变化：

float noiseA = tex2D(_NoiseTex, i.uv * _NoiseScale).r; float noiseB = frac(sin(dot(i.uv * _NoiseScale, float2(12.9898, 78.233))) * 43758.5453); float dissolveValue = noiseA * 0.6 + noiseB * 0.1 + spreadFactor * 0.3;

noiseB这行本质是伪随机Hash，能带来一种类似高噪点的细节，性能代价小到忽略不计。但是注意，它有一个劣势：没有空间连续性，变化非常剧烈，如果用它做主导会导致溶解边缘太碎。只让它占10%左右刚好能丰富细节又不破掉主结构。

另一条优化路径是开启GPU Instancing。2D Sprite的合批本来就比较依赖图集，如果同一张图集里的多个Sprite同时做溶解，Unity有希望通过Instance属性来自动合批。Shader里需要加入#pragma instancing_options，并关掉[PerRendererData]中受批处理影响的属性。不过SpriteRenderer本身的合批方式不完全等同于MeshRenderer，实际合批情况要结合Frame Debugger确认，我在这里提醒一下，不要盲信合批结果。

4.3 常见问题速查表

4.4 URP项目迁移要点

Unity近几年的新项目很多默认就是URP。内置管线的Shader直接拖过去会显示紫色甚至直接被吞掉，原因就是URP的渲染管线和内置管线的Shader变体导入流程不兼容。

迁移方案有两个：一是把上面整套逻辑放进Shader Graph重新连线，溶解公式的关键节点就是“Noise Sample + Add + SmoothStep + Lerp + Clip”。这种方法对美术友好，调参直观，但它生成的代码量和性能并不完全透明。二是把内置CGPROGRAM改写成HLSLPROGRAM，引用URP的Common.hlsl，再把UnityObjectToClipPos换成TransformObjectToHClip。我通常建议团队里既懂Shader又懂动效的程序选二，这样可以保留代码可维护性，且URP中的SRP Batcher对同一个Shader在属性一致时合批效率更高。

URP下还有一个容易踩的坑：URP会默认开启SRP Batcher，但要求所有材质属性都声明在CBUFFER中。如果你的溶解中心坐标或者进度设置了PerRendererData，却没有放到CBUFFER，SRP Batcher会悄悄禁用掉这些属性的合批。很多项目性能莫名下降，查到最后都是这个原因。所以URP版本要确保把自定义属性统一包进CBUFFER_START(UnityPerMaterial)到CBUFFER_END区间中。

5. 我的个人调参心得与最后提醒

这个溶解扩散效果我陆陆续续调了三个版本才稳定下来。第一版没有扩散因子，只有噪声和clip，结果画面毫无方向性，像成千上万只虫子在啃同一块饼干。第二版加入了均匀的距离计算，但把扩散中心和边缘宽度写死，导致换了几张Sprite之后效果完全失衡。第三版就是把参数全部放开，并且用C#脚本去驱动，终于达到了“换图也好用”的状态。

如果让我只分享一条经验，那就是：溶解效果不要追求一步到位，先把最基础的噪声溶解在编辑器里调到好看，再叠加扩散中心，最后才考虑边缘灼烧和Bloom。顺序反了，你会被一堆变量同时干扰，根本分不清问题出在噪声图还是扩散强度上。另外，Shader参数名和C#的SetFloat字符串必须逐字对齐，_Progress少一个下划线就会让你多排查半小时，这种低级错误建议通过常量字符串或者MaterialPropertyBlock封装起来避免手工复制。

最后再补充一个实用小技巧：如果项目里图片的透明区域不重要但经常出现“溶解外部区域还在渲染”的情况，可以在贴图导入设置里把“Alpha Is Transparency”打开，并且把RGBA压缩格式改为ETC2而非ASTC，这样透明边缘的质量和性能会更平衡。这个小改动在手机上尤其明显，亲测有效。