Unity 2D交互水效果实战：顶点扰动Shader与多点浮力实现

简介面向2D游戏开发者的Unity水效果资源包围绕BuoyancyEffector2D这一内置2D物理效果器解决物体在水中的浮力、波浪、阻力与接触检测等问题适合想要为横板、平台跳跃、模拟经营等2D项目快速加入真实水体交互的中初级开发者。包体共37个文件包含18个asset场景与工程配置、8个meta资源映射、shader与mat水面材质、cs控制脚本、json包配置等压缩包整体仅38KB结构清晰便于导入Unity后直接阅览核心场景与对应资源。目前已有1156人学习下载可用于借鉴水体物理参数的调校思路。借助Water场景及配套的材质和脚本可理解BuoyancyEffector2D组件中浮力系数、液体密度、接触点权重等关键参数的作用并结合Physics2DSettings等项目设置观察水面物理网格的搭建方式将参数按需调整后即可让游戏对象自然漂浮、沉没或在落水瞬间产生波动反馈省去从零编写物理模拟代码的耗时过程。1. 2D 水效果为什么总是一眼假一条小河的真实诉求做横版或俯视角游戏时但凡场景里要放一条河十个美术有八个会先拖一张半透明贴图来回滚。滚动贴图本身没问题可角色一跳进水里直接穿帮水面没有任何高度变化浮力也没有附着点调半天参数得到的还是一张“会动的贴纸”。这套 Unity 2D 水资源的思路不是做贴图而是把水面当成一条可交互的线——上边沿顶点随时间起伏水体向下填充到屏幕外角色踩上浮台能随波摇晃潜入时刚体又被真实托住。拆开看核心是三件事水面网格生成、顶点扰动 Shader、多点浮力物理。适合独立游戏、横版冒险、模拟经营里那些“看着能踩、踩下去能沉”的水面场景。2. 方案选型背景层滚动贴图还是顶点扰动先回答三个问题2.1 背景水与交互水是两个世界做水效果之前先分清这水要不要“接客”。纯背景的湖、远海、瀑布水雾角色永远不碰那用 UV 滚动加噪声扰动贴图就是最优解一张带法线的重复贴图沿 U 方向缓慢滚动再叠一层透明度渐变性能开销可以忽略视觉效果在 2D 场景里完全够用。但一旦角色要站上浮萍、要跳进水里溅起水花、船要随波浪起伏背景水的方案就撑不住了。原因很简单UV 滚动只是改变了采样坐标Mesh 顶点高度一点没变。物理系统想算浮力得知道“这个位置水面多高”而滚动贴图给不出这个数值它只是一层颜色和法线的变化。这时候必须让水面网格真正地“动起来”让每个顶点在每一帧都有一个可查询的高度值。我见过不少人在交互水面里硬套背景水方案结果角色站在“水面上”时脚底其实踩的是一个看不见的隐形平面和视觉波纹完全无关。这个割裂感一旦被玩家看到整个场景的质感就崩了。所以第一步先问自己这水是背景还是交互交互水直接跳到顶点扰动路线。2.2 三条路线对比性能、效果、接入成本在 Unity 里做 2D 交互水务实路线基本是三条我按“能不能接到物理层”来分方案性能开销有无水面高度接入成本适合场景UV 滚动 贴图扰动极低无最低远景湖泊、装饰性水体顶点扰动 Shader低到中有中横版交互水、俯视角近景水面流体粒子 / 波尔兹曼模拟高有高PC 上以水面物理为核心玩法的游戏顶点扰动方案的原理是在 Shader 的顶点阶段用几层正弦叠加出一个随时间变化的波浪高度直接修改顶点位置。因为高度是真实存在的C# 逻辑层可以复制同样的公式在任意 x 坐标算出“这个时刻的水位”浮力物理就能从这个函数取值。这是另外两种方案做不到的。流体粒子模拟在 PC 端确实漂亮但移动端跑起来发热严重而且 2D 横版里大部分水面只占屏幕一小块用整套流体模拟属于杀鸡用牛刀。我一般只建议在水面是核心玩法、且目标平台是 PC 的项目里考虑它。2.3 资源里的两个主角WaterSurface 与 BuoyancyObject这套资源把交互水拆成了两个互相解耦的组件。第一个是 WaterSurface挂在承载水面网格的 GameObject 上负责网格生成、Shader 参数驱动对外暴露一个GetHeight(float x)接口第二个是 BuoyancyObject挂在任何一个需要漂浮的物体上负责读水位、算浮力、施加刚体力。组件职责划分清楚了好处是调参不用反复横跳水面波浪不好看只动 WaterSurface物体飘不起来或太晃只动 BuoyancyObject。两个组件之间唯一的契约就是那个水位高度函数。做项目时我习惯把 WaterSurface 挂在空 GameObject 上下面挂 MeshRenderer 和 MeshFilter水体本体由代码生成不依赖任何外部模型资源。3. 水面网格生成与顶点动画把一条静态条带变成会喘的水面3.1 从一条线到一片水体用代码生成条带网格2D 水面在屏幕上看起来是一条线但这条线如果不是嵌在一张面片里渲染时就会因为缺少填充区域而穿帮。常见做法是生成一个两排顶点的条带网格上排顶点就是水面线下排顶点沉到屏幕外作为水体底边三角形网格负责把这两排连起来这样水面线以下始终有实体可渲染。public Mesh GenerateWaterMesh(float length, float fillDepth, int segments) { Mesh mesh new Mesh(); // 两排顶点上排是水面线下排是水体底边 Vector3[] verts new Vector3[(segments 1) * 2]; Vector2[] uvs new Vector2[(segments 1) * 2]; int[] tris new int[segments * 6]; for (int i 0; i segments; i) { float x (float)i / segments * length - length * 0.5f; // 上排顶点初始在水位线 y 0实际高度交给 Shader 扰动 verts[i] new Vector3(x, 0f, 0f); // 下排顶点沉入水体fillDepth 控制水体可见厚度 verts[i segments 1] new Vector3(x, -fillDepth, 0f); uvs[i] new Vector2((float)i / segments, 0f); uvs[i segments 1] new Vector2((float)i / segments, 1f); if (i segments) { int tl i; // 上排左 int tr i 1; // 上排右 int bl i segments 1; // 下排左 int br i segments 2; // 下排右 int idx i * 6; tris[idx] tl; tris[idx 1] br; tris[idx 2] bl; tris[idx 3] tl; tris[idx 4] tr; tris[idx 5] br; } } mesh.vertices verts; mesh.uv uvs; mesh.triangles tris; mesh.RecalculateBounds(); return mesh; }这个函数把“一条水线”扩展成“一块水体”segments决定水面横向细分数量每多一个段就多两个三角形波浪细节上限随之提高fillDepth是水体向下延伸的厚度横版游戏里一般给到一个半屏幕高度就足够多了白白增加填充面积。注意顶点坐标直接放在 XY 平面摄像机正交视角下水面正好是一根水平线Shader 里只动上排顶点的 Y。这里有个常见误用有人直接用 Unity 自带的 Plane 原型改 scale。Plane 的顶点数和布线是固定的想调波浪细节只能强行细分模型完全不受代码控制而且 Plane 自带的大量顶点在 2D 场景里是纯浪费。我都是运行时用上面的函数生成 Mesh这样segments可以做成序列化参数不同关卡用不同精度。3.2 顶点扰动 Shader把正弦叠进顶点阶段有了静态网格接下来让上排顶点动起来。核心是几层不同频率的正弦波叠加单层正弦是均匀起伏像机器运动多层叠加后波峰和波谷错开才有自然水面的“呼吸感”。Shader Custom/Water2D { Properties { _WaveAmp (Wave Amplitude, Float) 0.15 _WaveLength (Wave Length, Float) 1.2 _WaveSpeed (Wave Speed, Float) 0.8 _WaveLayers (Wave Layers, Int) 3 _WaterColor (Water Color, Color) (0.2, 0.5, 0.8, 0.85) } SubShader { Tags { Queue Transparent RenderType Transparent } Blend SrcAlpha OneMinusSrcAlpha Cull Off Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include UnityCG.cginc float _WaveAmp; float _WaveLength; float _WaveSpeed; int _WaveLayers; fixed4 _WaterColor; struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; v2f vert(appdata v) { v2f o; float wave 0; // 多层正弦叠加频率逐层提高幅度逐层衰减 for (int i 0; i _WaveLayers; i) { float freq _WaveLength * (i 1); float speed _WaveSpeed * (i 1) * 0.7 i * 0.31; wave sin((v.vertex.x _Time.y * speed) * freq) * _WaveAmp / (i 1); } v.vertex.y wave; o.vertex UnityObjectToClipPos(v.vertex); o.uv v.uv; return o; } fixed4 frag(v2f i) : SV_Target { return _WaterColor; } ENDCG } } }这段 Shader 的要点全在循环里_WaveLayers层数越多波形越丰富但每层频率按(i 1)递增幅度按(i 1)递减这样低频大浪叠高频小碎波出来的波浪才像真水。_Time.y是 Unity 内置的时间变量让波浪随时间推进。注意我只改了上排顶点的 Y下排顶点如果也被扰动水体底边会跟着抖看起来像整块水在共振所以生成网格时要区分两排——实际做法是加一个顶点色或 UV 的 y 坐标做标记Shader 里判断只有 y 坐标接近 0 的顶点才执行位移。3.3 参数表与直观调参次序这套效果的核心参数不多但调起来特别有讲究。我按经验给一组移动端可用的起始值参数作用建议范围备注_WaveAmp波浪最大高度0.05 ~ 0.5超过 0.5 会穿帮角色像站在蹦床上_WaveLength基础波长0.8 ~ 2.0越小波纹越密越大浪越宽_WaveSpeed波浪流动速度0.3 ~ 1.5太快像电流太慢像冻住_WaveLayers正弦叠加层数2 ~ 4移动端上限 34 层留给 PC调参顺序我建议固定为先波长再幅度先速度再层数。波长决定水面的“颗粒感”这一步定了后面幅度和速度都好配合层数永远放最后因为它是性能敏感项加到 5 层以上在移动端收益明显下降。做横版游戏时_WaveAmp通常控制在 0.15 上下角色踩浮台时能看出起伏又不至于让平台逻辑难做。如果你需要更细的波纹质感可以在这个顶点扰动之上再叠一张法线贴图做 UV 滚动两者互补顶点扰动管大形状法线扰动管表面细节。我见过有人只做 UV 法线扰动水面像果冻一样整体平移也有人只做顶点扰动远看像饼干上的斜纹。正确的做法是用顶点扰动做骨架UV 扰动做皮肤两种参数互相独立。4. 浮力物理与角色交互从单点“点头”到多点翻倾4.1 单点浮力为什么只会“点头”很多初版浮力实现长这样在物体重心位置采样一次水位深度大于 0 就向上加一个力。效果呢物体确实会浮起来但无论水面怎么波动它只会整体上下颠簸不会倾斜、不会随波浪微微转动看起来像在水面上“点头”。原因在力矩。浮力本质是作用在每个浸水体积微元上的压强合力理想情况下等效作用点应该在“排水体积的几何中心”也就是浮心。当只有一个采样点时浮力永远加在物体重心上力臂为零力矩自然为零刚体永远不会获得角速度。这在水面是平面时勉强说得过去但我们的水面是起伏的物体两端浸水深度不同必然应该产生一个让物体顺着浪头摇摆的力矩。4.2 多点采样与力矩计算解决方法是把物体拆成多个采样点每个采样点独立计算浮力然后用AddForceAtPosition在指定点施加。这样只要物体一端浸水深、另一端浅两端受力不同刚体就会自然转动。using UnityEngine; [RequireComponent(typeof(Rigidbody2D))] public class BuoyancyObject : MonoBehaviour { public WaterSurface water; // 水面组件提供 GetHeight(x) public Transform[] samplePoints; // 至少 3 个采样点横向铺开 public float waterDensity 1f; // 水密度角色质量越高这个值越大 public float areaPerPoint 0.2f; // 单个采样点代表的面积 public float maxDepth 1f; // 浮力饱和深度防瞬间弹射 public float dragCoeff 0.5f; // 水阻尼越高沉得越慢 private Rigidbody2D rb; void Awake() { rb GetComponentRigidbody2D(); } void FixedUpdate() { float g Physics2D.gravity.magnitude; for (int i 0; i samplePoints.Length; i) { Vector3 p samplePoints[i].position; float waterLevel water.GetHeight(p.x); float depth Mathf.Clamp(waterLevel - p.y, 0f, maxDepth); if (depth 0f) continue; // 排水量越大浮力越大但用 maxDepth 封顶避免入水瞬间爆炸 float force waterDensity * areaPerPoint * depth * g; rb.AddForceAtPosition(Vector2.up * force, p, ForceMode2D.Force); // 水阻尼速度越快阻力越大让物体会停下来而不是一直晃 rb.AddForce(-rb.velocity * dragCoeff * depth, ForceMode2D.Force); } } }采样点的摆放比想象中讲究最少 3 个两端各一个中间一个横向距离尽量拉开这样能捕捉到物体两端的水位差间距太小力矩依然很弱。areaPerPoint是个调平衡的参数它相当于“这个采样点代表多大面积的排水截面”取值太小浮力不够太大物体会被瞬间顶出水面。通常我先用物体质量 / (采样点数量 * 期望最大深度)估算一个初值再进游戏微调。FixedUpdate里用AddForceAtPosition是关键它在世界坐标的指定点发力刚体系统会自动把力分解为平动和转动。这里还有个容易踩的坑Rigidbody2D 的线性阻尼和角度阻尼建议保持为 0阻尼全部由脚本里的dragCoeff控制否则 Unity 自带阻尼和脚本阻尼叠加物体会像泡在蜂蜜里一样迟钝。4.3 GetHeight 与 Shader 同步逻辑层不能另算一套物理层要想和渲染层完全一致WaterSurface.GetHeight(x)必须复刻 Shader 里的那套正弦公式两个组件共享同一组参数。这里最怕的是 Shader 里改了_WaveAmpC# 里忘了改结果水面渲染是 0.15 振幅浮力计算用的是 0.3 振幅物体浮在比视觉水位高半截的位置怎么看怎么别扭。public class WaterSurface : MonoBehaviour { [SerializeField] private float waveLength 1.2f; [SerializeField] private float waveAmp 0.15f; [SerializeField] private float waveSpeed 0.8f; [SerializeField] private int waveLayers 3; [SerializeField] private float baseY 0f; // 水位基准线 // 与 Shader 顶点扰动公式保持一致供浮力组件查询任意 x 处的水位 public float GetHeight(float x) { float wave 0f; for (int i 0; i waveLayers; i) { float freq waveLength * (i 1); float speed waveSpeed * (i 1) * 0.7f i * 0.31f; wave Mathf.Sin((x Time.time * speed) * freq) * waveAmp / (i 1f); } return baseY wave; } }这段逻辑和 Shader 顶点循环是完全对应的连系数0.7f和0.31f都必须一模一样。我把这层同步看成整个水效果的“合同”shader 算渲染C# 算物理两边背靠背执行同一份公式谁也不能私自改参数。幸运的是这套资源的配套代码把两组参数都做成了序列化字段改一处时编辑器里会高亮提示另一个组件同样需要同步。如果场景里物体特别多每个 BuoyancyObject 都在 FixedUpdate 里采样多个点GetHeight 里的正弦计算会重复很多次。我一般会在 WaterSurface 里加一个简单的缓存波浪参数没变化时同一帧内对相同 x 坐标的查询直接返回缓存值能省掉一半以上的三角计算。5. 2D 水效果的常见问题排查四个场景的真实翻车记录5.1 水面宁死不见水盖住角色或者被地形盖住现象角色站进水里水块把角色整个吞没或者反过来水面只剩一条若隐若现的缝。原因两个渲染坑叠加了。第一Shader 的Queue如果是Geometry水面被当成不透明物体参与深度测试和角色产生遮挡关系第二MeshRenderer 默认不在任何 SortingLayer 上和 SpriteRenderer 的排序规则完全错位。解决Shader 里必须声明Queue Transparent让水面进入透明渲染队列同时 MeshRenderer 的 SortingLayer 要单独配一层放在角色和地形之间。具体操作是把 SortingLayer 设为水专用层SortingOrder 设成一个中间值比如地形是 0、水面是 -100、角色是 50保证水面永远在合适的位置参与排序。另外Cull Off一定要开因为 2D 摄像机正交视角下水面条带的背面朝向屏幕外不开双面渲染的话摄像机稍微偏一个角度水面就会消失。5.2 波纹密得像筛糠帧率掉了一半现象加水面之后中端手机帧率从 60 掉到 30水面波浪看起来密密麻麻像心电图。原因顶点数开太高了。有人把segments拉到 1024再开 5 层正弦每帧 CPU 要算 5000 多次三角函数的顶点位移这还没算传给 GPU 的带宽。顶点动画优化不能只靠 GPU顶点阶段的计算量最终是 CPU 提交时同步抬高的。解决我是这么设上限的——横版全屏水面segments给 128 足够屏幕只占一小段的话 64 就行_WaveLayers移动端锁 3PC 端锁 4。如果还想要细节把 Camera 拉近点看波纹密度而不是盲目堆顶点。这里我吃过大亏以为像素风水面要多顶点才好看实际上波纹密度由_WaveLength控制和顶点数没有线性关系。5.3 物体一碰到水面就“跳”起来然后沉底现象刚体入水瞬间像是踩到弹簧猛地弹起再重重沉下去反复几次后终于浮住。原因浮力公式里的depth没有上限。物体刚接触水面那一帧水面波动恰好把深度推到很大的值排水量暴涨浮力瞬间超过物体本身重量数倍。加上物体会先经历一个加速下坠过程入水速度越快这一下弹跳越夸张。解决给深度加 clamp给浮力加峰值上限。我一般把maxDepth设为角色身高的三分之一意思是一旦浸到这个深度就不再增加浮力避免整根入水时力大无穷。同时可以给浮力额外做一层平滑用Mathf.Lerp把上一帧浮力过渡到当前帧目标值让力是渐变不是突变。这样物体入水是先减速、再上浮视觉上是“被水托住”而不是“被弹弓打飞”。5.4 斜视角看水面凭空消失现象正交摄像机固定好时没问题一旦稍微旋转视角或者场景里有一段半俯视的水面水整个就看不见了。原因默认 Shader 只渲染正面三角形。旋转后屏幕朝向的水面背面朝上被背面剔除裁掉了。这在水面条带这种极薄的网格上特别容易触发。解决SubShader 里加Cull Off强制渲染双面。代价是片元着色器执行量翻倍但对 2D 水这种极少量三角形来说成本可以忽略。要注意双面之后背面也会出现水面颜色如果水体颜色是半透明的两层叠加会让颜色比预期深此时可以用Blend SrcAlpha OneMinusSrcAlpha并把_WaterColor的 alpha 调低一点来补偿。6. 进阶三连击高光描边、噪声浪形与入水溅射6.1 给水面加一条高光描边水面最容易被看出假的地方是顶部边缘如果水体颜色从上到下完全一致整条水面就像一块透明玻璃板。简单有效的做法是在 Shader 片元阶段按 UV 的 v 坐标做渐变水面顶部 v 接近 0让顶部更亮、更白往下逐渐过渡到水体色。fixed4 frag(v2f i) : SV_Target { // 通过 UV 的 v 坐标区分水面线和水体深处 float edge 1.0 - saturate(i.uv.y / 0.2); fixed3 highlight fixed3(0.85, 0.95, 1.0); fixed3 deepColor _WaterColor.rgb; fixed3 finalColor lerp(deepColor, highlight, edge * 0.6); return fixed4(finalColor, _WaterColor.a); }这段代码在 v 坐标靠近 0 的顶部边缘混合进一层偏白的颜色模拟日光打在水面线的高光。配合顶点扰动后这条高光线会跟着波浪上下弯曲比静止的贴图高光自然得多。6.2 用 Perlin 噪声替代纯正弦正弦叠加做久了会发现一个规律浪型永远太规律波峰和波谷的距离总是差不多。真实水面没有这种周期性建议在正弦基础上叠一层 Perlin 噪声。Unity 的Mathf.PerlinNoise可以直接用float noise Mathf.PerlinNoise(x * 0.5f, Time.time * 0.4f) - 0.5f; float wave baseWave noise * waveAmp * 0.2f;噪声幅度控制在总幅度的 20% 以内作用是给规则波浪加一点随机“毛刺”让水面看起来有自然的不规则感。这个技巧同样适用于 Shader 里内建的noise实现只是移动端注意噪声纹理采样也算一次贴图读取成本比纯正弦要高一点。6.3 物体入水的溅射与音效触发溅射的触发时机不是“物体在水里”而是“物体穿过水面线”的瞬间。判断方法很简单在水面下检测深度从 0 变成大于 0 的那一帧。我在 BuoyancyObject 里维护一个lastDepth当前深度大于 0 且上一帧深度小于等于 0 时视为入水事件播放粒子和音效。出水的瞬间反过来深度从大于 0 变成 0同样触发一次较小规模的出水利。这套机制配合前面的多点采样角色侧身入水时会先触发一侧的溅射再触发另一侧立体感一下就出来了。我做这套 2D 水效果最早的一版就是栽在物理和渲染各算一套正弦上调了整整一下午物体永远浮在半空。从那以后我每次加水面都强制走一遍“改参数 → 同步 GetHeight → 进游戏看物体接触高光线的位置”这条流程。这套资源把上面这些前置工作都做成了现成的组件和预制体拖进场景改改参数就能跑希望帮到你。本文还有配套的精品资源点击获取