Mask篇 (含引导层、不规则遮罩)

Unity UI 性能优化终极指南 — Mask篇 (含引导层、不规则遮罩)

---

什么是 Mask？

• Mask 是UGUI组件，限制子元素的可视区域

• 原理：Alpha测试 + 遮罩裁剪（Stencil/Alpha Clip）

• 用途：滚动列表、引导层、Popup窗口裁剪、半透明遮罩背景

• 种类：

  • Mask (软裁剪，基于Alpha Cutoff)
  • RectMask2D (矩形硬裁剪，基于Viewport Rect)

总结：Mask = 限制UI显示范围的剪刀

---

Mask 的生活化比喻

类型	生活比喻
Mask	️ 窗户贴雾膜，透光但不透视
RectMask2D	按正方形切割的窗户
引导层圆形/不规则遮罩	黑夜中打手电筒，只照亮一个区域

总结：Mask = 窗口，引导层 = 聚光手电筒

---

大型项目中常见的引导层遮罩需求

需求	说明
圆形遮罩	高亮头像、按钮、道具位置
多区域遮罩（多个洞）	引导多个地方，比如同时提示两三个技能按钮
不规则多边形遮罩	圆角矩形、任意形状，匹配UI风格
动态遮罩移动/缩放动画	引导过程中，遮罩位置、大小、形状实时变化
透明黑幕+高亮区域	90%遮住，10%突出重要区域，突出视觉引导

---

Unity内置 Mask 的局限性

Mask类型	优势	局限
Mask	支持不规则图形	性能差，产生Overdraw
RectMask2D	性能好，硬裁剪，零Overdraw	只能矩形遮罩
Custom Shader Mask	支持任意形状，优化灵活	需要手写Shader

---

大型项目中正确的引导层遮罩实现（实战经验）

✅ 推荐方案：自定义透明遮罩Shader

特性	实现方式	性能
黑幕半透明背景	全屏Canvas Image，颜色半透明黑	极小开销
不规则透明洞（圆形/椭圆/矩形等）	Shader绘制透明区域，透明区域不渲染	优化Overdraw
动态控制洞的位置、大小、形状	用MaterialPropertyBlock传参实时调洞的位置、半径	动态开销小

---

引导层遮罩标准实现 Shader （圆形高亮示例）

Shader "UI/GuideMask"
{
    Properties
    {
        _MaskCenter ("Center", Vector) = (0.5, 0.5, 0, 0)
        _MaskRadius ("Radius", Float) = 0.2
        _MaskSoftness ("Softness", Float) = 0.01
        _Color ("Color", Color) = (0, 0, 0, 0.7)
    }
    SubShader
    {
        Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" }
        Pass
        {
            ZWrite Off
            Blend SrcAlpha OneMinusSrcAlpha
            Cull Off
            
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            fixed4 _Color;
            float2 _MaskCenter;
            float _MaskRadius;
            float _MaskSoftness;

            struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; };
            struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; };

            v2f vert (appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; }

            fixed4 frag (v2f i) : SV_Target
            {
                float2 uv = i.uv;
                float dist = distance(uv, _MaskCenter);
                float alpha = smoothstep(_MaskRadius, _MaskRadius - _MaskSoftness, dist);
                return fixed4(_Color.rgb, _Color.a * alpha);
            }
            ENDCG
        }
    }
}

特点：

• ✅ 圆形透明洞，黑幕遮罩
• ✅ 动态调中心、半径
• ✅ 支持柔边（Softness）
• ✅ 只绘制黑幕，不浪费Overdraw在透明洞上

---

不良代码习惯导致性能下降（踩坑警告）

错误代码	问题描述	性能影响
多层嵌套 Mask/Mask2D	每层一个遮罩，Overdraw叠加	GPU Fillrate爆炸
大量透明遮罩图片	遮罩用PNG透明图片叠加，像素多次覆盖	多次Blend，掉帧
动态SetActive切换引导层遮罩	每次引导都激活/禁用节点，引发Canvas Rebuild	Rebuild频发
不用PropertyBlock更新Shader参数	每次动态变化新建一个Material实例	打断Batch，GC Alloc
引导层遮罩和ScrollView Mask叠加使用	滚动列表内有Mask，再加引导Mask，遮罩套遮罩	⚠️ 卡爆GPU，掉帧明显

---

正确高效的引导层遮罩管理实践

技巧	说明
✅ 自定义Shader实现遮罩	减少Overdraw，提升性能
✅ 动态传参用MaterialPropertyBlock	改Shader参数不新建Material，Batch不打断，GC 0分配
✅ 全局单例管理引导层遮罩	只存在一个遮罩节点，动态更新参数控制不同引导场景
✅ 只Update真正变化时刷新	位置、尺寸有变化才刷新，避免每帧无脑刷新
✅ 避免与ScrollView嵌套Mask	引导遮罩单独Canvas，渲染在最顶层，减少Mask套娃
✅ 遮罩区可点击传递	遮罩洞外可阻挡，洞内可穿透，提升引导体验（设置blocksRaycasts = false的区域）

---

生活化理解总结

Mask就像：舞台布景上的聚光灯

• 舞台太暗，打灯引导观众看哪里；
• 灯光太多，观众眼花；
• 聚光精准，舞台清晰，焦点突出。

总结：

少裁剪，轻遮盖，洞精准，光通透！

---

最后的黄金口诀（PPT压轴）

能剪不盖，能透不涂，能准不泛，能省必省！

---

✅ 附：Mask + 引导层遮罩安全CheckList

• 自定义Shader，减少Overdraw
• PropertyBlock传参，不频繁新建Material
• 避免多层Mask套娃
• ScrollView Mask与引导层遮罩分离
• 遮罩区交互合理穿透（洞内可点，洞外挡住）
• 引导层遮罩单例管理，动态更新位置尺寸

---