1. 项目缘起为什么我们需要一个带内倒角的引导镂空在Unity UGUI项目中做新手引导或者高亮某个关键UI元素一个常见的需求是让屏幕变暗只在目标区域“挖”一个洞让用户的视线聚焦于此。这个“挖洞”就是镂空效果。听起来简单但当你真正动手实现时会发现一堆头疼的问题。比如直接用两个矩形Sprite叠加做遮罩边缘会非常生硬像一刀切出来的纸片毫无美感在强调按钮、图标时尤其突兀。而“内倒角”效果就是为了解决这个生硬感它能让镂空区域的边缘产生平滑的过渡视觉上更柔和、更精致也更符合现代UI的审美。我最近在一个商业手游项目里就遇到了这个需求。策划希望新手引导的高亮区域不是方方正正的而是带有一点圆润的过渡让玩家的视觉焦点能更自然地落在“领取奖励”按钮上。如果只是简单的矩形镂空在高清屏幕上会显得非常廉价。于是我不得不重新审视UGUI的遮罩与着色器方案最终实现了一个性能与效果兼顾的带内倒角的镂空遮罩组件。这个过程踩了不少坑也总结出一些标准文档里不会写的实战经验今天就来完整分享一下。2. 核心原理拆解从“挖洞”到“平滑过渡”的技术演进要实现背景遮罩带内倒角镂空我们得先理解基础的“挖洞”是怎么做的然后再看如何升级到“带倒角”。最基础的UGUI镂空遮罩通常有两种实现思路使用额外的Camera和Render Texture单独用一个摄像机渲染遮罩层和目标高亮区域通过设置不同的渲染队列和Stencil Buffer模板缓冲来实现“抠图”。这种方法灵活度高能实现复杂形状但开销大涉及多摄像机管理和RT的创建与释放对于移动端或频繁触发的引导来说性能压力不小。使用Shader在单一Canvas下实现这是更主流和高效的做法。核心思想是我们准备一张全屏的遮罩材质比如一个黑色的半透明Sprite然后通过Shader根据传入的目标区域参数位置、大小让该区域的像素“变透明”或“不渲染”。UGUI的Image组件默认使用的Standard Shader或UI/Default Shader并不支持这种动态的镂空逻辑所以我们需要一个自定义的Shader。那么“内倒角”又是如何加进去的呢关键在于Shader中的距离场Distance Field和光滑步进Smoothstep函数。我们不再简单粗暴地判断一个像素点“在矩形内”还是“在矩形外”。而是计算这个像素点到目标矩形四条边的最小距离。如果这个距离大于0说明在矩形外小于0则在矩形内。而“内倒角”就是指在矩形边缘内侧创建一个从“完全不透明”到“完全透明”的平滑过渡区域。假设我们的目标矩形区域已经定义好_Center为中心点_Size为宽高。在Shader的片元着色器中我们大致会做以下计算// 计算当前像素点相对于矩形中心的坐标 float2 pos abs(i.uv - _Center) * 2.0; // 假设uv和中心点都已归一化处理 // 计算到矩形四条边的距离正值表示在矩形内部 float2 distanceToEdge _Size - pos; // 获取到最近边缘的横向和纵向距离 float minDistance min(distanceToEdge.x, distanceToEdge.y);此时minDistance就是一个有符号的距离场。当minDistance 0像素在矩形内部minDistance 0则在外部。边缘就是minDistance 0的地方。实现倒角的核心代码// _Radius 就是倒角过渡区域的半径单位与UV或像素相关 float alpha smoothstep(-_Radius, _Radius, minDistance);smoothstep函数是GLSL和HLSL中的经典函数。它接收三个参数(edge0, edge1, x)。当x edge0时返回0x edge1时返回1在edge0和edge1之间时返回一个平滑的Hermite插值。这里我们将edge0设为-Radiusedge1设为Radius。那么当minDistance Radius时深入矩形内部alpha 1像素完全不透明显示遮罩色。当minDistance -Radius时远离矩形外部alpha 0像素完全透明被镂空。当minDistance在[-Radius, Radius]之间时即边缘过渡区alpha在0到1之间平滑变化这就形成了视觉上的倒角或羽化效果。通过调整_Radius这个参数我们就可以轻松控制倒角的“柔和”程度。这个方案完全在片元着色器中进行每帧每个像素只多了几次简单计算性能开销极低却能带来质的视觉提升。3. 完整实现步骤从Shader编写到C#脚本驱动理解了原理我们开始动手实现。整个过程分为Shader编写、材质创建、C#控制脚本三部分。3.1 编写自定义Shader我们需要创建一个Unlit Shader并使其兼容UGUI即继承UI/Default的一些特性如支持Rect Mask 2D但这里我们主要自控。下面是一个精简后的核心Shader代码Shader UI/GuideMaskWithRoundCorner { Properties { [PerRendererData] _MainTex (Sprite Texture, 2D) white {} _Color (Tint, Color) (1,1,1,1) _StencilComp (Stencil Comparison, Float) 8 _Stencil (Stencil ID, Float) 0 _StencilOp (Stencil Operation, Float) 0 _StencilWriteMask (Stencil Write Mask, Float) 255 _StencilReadMask (Stencil Read Mask, Float) 255 _ColorMask (Color Mask, Float) 15 [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip (Use Alpha Clip, Float) 0 // 我们自定义的属性 _Center (Center (UV Space), Vector) (0.5, 0.5, 0, 0) _Size (Size (UV Space), Vector) (0.2, 0.2, 0, 0) _Radius (Round Radius, Range(0, 0.5)) 0.05 _BackgroundColor (Background Color, Color) (0,0,0,0.7) } SubShader { Tags { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent PreviewTypePlane CanUseSpriteAtlasTrue } Stencil { Ref [_Stencil] Comp [_StencilComp] Pass [_StencilOp] ReadMask [_StencilReadMask] WriteMask [_StencilWriteMask] } Cull Off Lighting Off ZWrite Off ZTest [unity_GUIZTestMode] Blend SrcAlpha OneMinusSrcAlpha ColorMask [_ColorMask] Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma multi_compile __ UNITY_UI_ALPHACLIP #include UnityCG.cginc #include UnityUI.cginc struct appdata_t { float4 vertex : POSITION; float4 color : COLOR; float2 texcoord : TEXCOORD0; }; struct v2f { float4 vertex : SV_POSITION; fixed4 color : COLOR; float2 texcoord : TEXCOORD0; float4 worldPosition : TEXCOORD1; }; sampler2D _MainTex; fixed4 _Color; fixed4 _TextureSampleAdd; float4 _ClipRect; // 自定义属性 float2 _Center; float2 _Size; float _Radius; fixed4 _BackgroundColor; v2f vert(appdata_t v) { v2f OUT; OUT.worldPosition v.vertex; OUT.vertex UnityObjectToClipPos(OUT.worldPosition); OUT.texcoord v.texcoord; OUT.color v.color * _Color; return OUT; } fixed4 frag(v2f IN) : SV_Target { // 基础UI颜色采样如果_MainTex有用的话 half4 color (tex2D(_MainTex, IN.texcoord) _TextureSampleAdd) * IN.color; // 核心计算到目标矩形的距离场 float2 pos abs(IN.texcoord - _Center) * 2.0; // 转换到以_Center为中心边长为2的空间 float2 distanceToEdge _Size - pos; float minDistance min(distanceToEdge.x, distanceToEdge.y); // 使用smoothstep创建平滑过渡 float maskAlpha smoothstep(-_Radius, _Radius, minDistance); // 混合颜色背景色 * 遮罩透明度 原始颜色 * (1 - 遮罩透明度) // 但通常我们只使用背景色_MainTex可能是纯色或简单纹理 color _BackgroundColor; color.a * maskAlpha; // 关键将计算出的过渡alpha应用到背景色的透明度上 // UI系统的Alpha裁剪可选 #ifdef UNITY_UI_ALPHACLIP clip (color.a - 0.001); #endif return color; } ENDCG } } }关键点解析_Center和_Size这里我使用了UV空间0~1的坐标和尺寸。这意味着(0.5, 0.5)是屏幕中心(0.2, 0.2)表示矩形宽高各占屏幕UV宽度的20%。这样定义更通用不受屏幕分辨率影响。abs(IN.texcoord - _Center) * 2.0这个操作将像素坐标转换到以_Center为中心且范围在[-Size, Size]内的坐标系方便进行距离计算。乘以2.0是一个缩放因子用于适配UV空间计算你可以根据实际效果调整。smoothstep(-_Radius, _Radius, minDistance)这就是创造内倒角的魔法函数。_Radius控制过渡带的宽度。3.2 创建材质与UI设置在Project窗口中右键创建Material命名为Mat_GuideMask。将它的Shader选择为我们刚创建的UI/GuideMaskWithRoundCorner。在场景中创建一个全屏的UI Image作为遮罩层。将它锚点Anchors设置为拉伸Stretch并让Left, Right, Top, Bottom全部为0确保它覆盖整个Canvas。将这个Image的Material设置为Mat_GuideMask。将其Source Image置空或者赋予一个纯黑色的Sprite。此时你应该能看到整个屏幕被_BackgroundColor默认黑色半透明覆盖。3.3 编写C#控制脚本Shader和材质是静态的我们需要一个脚本来动态更新_Center、_Size等属性以响应我们想要高亮的UI目标。using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(Image))] public class GuideMaskController : MonoBehaviour { private Material _maskMaterial; private RectTransform _targetRect; // 需要高亮的UI目标 [Header(遮罩参数)] [SerializeField] private Color backgroundColor new Color(0, 0, 0, 0.7f); [SerializeField, Range(0, 0.5f)] private float roundRadius 0.05f; [SerializeField] private Vector2 sizePadding new Vector2(0.1f, 0.1f); // 高亮区域比目标大一点 // Shader中属性的ID用于高效访问 private static readonly int CenterId Shader.PropertyToID(_Center); private static readonly int SizeId Shader.PropertyToID(_Size); private static readonly int RadiusId Shader.PropertyToID(_Radius); private static readonly int BackgroundColorId Shader.PropertyToID(_BackgroundColor); void Start() { Image image GetComponentImage(); // 重要必须实例化一份新的材质避免修改影响到所有使用该材质的对象 _maskMaterial new Material(image.material); image.material _maskMaterial; // 初始化材质属性 _maskMaterial.SetColor(BackgroundColorId, backgroundColor); _maskMaterial.SetFloat(RadiusId, roundRadius); } void Update() { if (_targetRect ! null) { UpdateMaskToTarget(_targetRect); } } /// summary /// 设置需要高亮的目标UI /// /summary public void SetTarget(RectTransform target) { _targetRect target; if (target ! null) { UpdateMaskToTarget(target); gameObject.SetActive(true); // 显示遮罩 } else { gameObject.SetActive(false); // 隐藏遮罩 } } /// summary /// 更新遮罩参数使其对准目标RectTransform /// /summary private void UpdateMaskToTarget(RectTransform target) { if (_maskMaterial null) return; // 1. 将目标的世界坐标转换到遮罩Image的本地坐标即UV空间的基础 Canvas canvas GetComponentInParentCanvas(); RectTransform maskRectTransform (RectTransform)transform; // 获取目标在Canvas上的四个角的世界坐标 Vector3[] targetCorners new Vector3[4]; target.GetWorldCorners(targetCorners); // 将世界坐标转换到遮罩RectTransform的本地坐标归一化前的坐标 for (int i 0; i 4; i) { targetCorners[i] maskRectTransform.InverseTransformPoint(targetCorners[i]); } // 2. 计算目标在遮罩本地坐标系中的包围矩形 Vector2 min new Vector2(float.MaxValue, float.MaxValue); Vector2 max new Vector2(float.MinValue, float.MinValue); foreach (Vector3 corner in targetCorners) { min.x Mathf.Min(min.x, corner.x); min.y Mathf.Min(min.y, corner.y); max.x Mathf.Max(max.x, corner.x); max.y Mathf.Max(max.y, corner.y); } // 3. 将本地坐标归一化到[0,1]的UV空间这是Shader计算所需 // 因为遮罩Image是拉伸全屏的所以它的Rect宽高就是Canvas的像素尺寸。 // 我们需要将本地坐标除以其Rect的宽高的一半因为原点在中心再映射到[0,1]。 // 注意这里需要根据你的Canvas Render Mode和锚点设置进行调整以下是一种通用性较强的计算。 Vector2 maskSize maskRectTransform.rect.size; Vector2 centerLocal (min max) / 2f; Vector2 sizeLocal max - min; // 添加内边距 sizeLocal sizePadding * 2f; // padding是单边值所以*2 // 转换为UV空间中心点从[-0.5,0.5]映射到[0,1]尺寸除以画布尺寸 Vector2 centerUV new Vector2( 0.5f (centerLocal.x / maskSize.x), 0.5f (centerLocal.y / maskSize.y) ); Vector2 sizeUV new Vector2( sizeLocal.x / maskSize.x, sizeLocal.y / maskSize.y ); // 4. 传递给Shader _maskMaterial.SetVector(CenterId, centerUV); _maskMaterial.SetVector(SizeId, sizeUV); } /// summary /// 供外部调整倒角半径 /// /summary public void SetRoundRadius(float radius) { roundRadius Mathf.Clamp(radius, 0, 0.5f); if (_maskMaterial ! null) _maskMaterial.SetFloat(RadiusId, roundRadius); } /// summary /// 供外部调整背景色 /// /summary public void SetBackgroundColor(Color color) { backgroundColor color; if (_maskMaterial ! null) _maskMaterial.SetColor(BackgroundColorId, backgroundColor); } }脚本核心逻辑与避坑点材质实例化在Start中我们使用new Material(image.material)创建了材质的一个实例。这是至关重要的一步如果不实例化直接修改image.material的属性会改变所有使用该原始材质的UI元素导致难以预料的渲染错误。实例化确保了每个遮罩控制器独立操作自己的材质副本。坐标转换这是整个脚本中最容易出错的部分。我们需要将目标UI_targetRect的世界坐标GetWorldCorners转换到遮罩Image的本地坐标系中再归一化为UV坐标。这里假设遮罩Image的锚点是拉伸全屏且Canvas的Render Mode是Screen Space - Overlay。如果你的Canvas设置不同如World Space坐标转换的逻辑需要相应调整。我提供的UpdateMaskToTarget方法是一种较为通用的计算方式通过InverseTransformPoint进行层级间的坐标转换通用性更强。sizePadding参数这个参数很实用。它让高亮区域比实际的目标UI大一圈避免镂空边缘紧贴着按钮视觉效果更舒适。你可以根据需求调整。4. 实战中的优化与高级技巧基础功能跑通后我们还需要考虑性能、易用性和扩展性。以下是我在项目中实际应用时总结的几个要点。4.1 性能优化避免每帧无意义的计算上面的脚本在Update中持续调用UpdateMaskToTarget即使目标没有移动。对于静态的引导这是浪费。我们可以增加一个脏标记Dirty Flag。private bool _isDirty false; private Vector3 _lastTargetPosition; private Vector2 _lastTargetSize; void Update() { if (_targetRect ! null _isDirty) { // 检查目标的位置或尺寸是否发生变化 Vector3 currentPos _targetRect.position; Vector2 currentSize _targetRect.rect.size; if (currentPos ! _lastTargetPosition || currentSize ! _lastTargetSize) { UpdateMaskToTarget(_targetRect); _lastTargetPosition currentPos; _lastTargetSize currentSize; } } } public void SetTarget(RectTransform target) { _targetRect target; _isDirty true; // 标记为需要更新 // ... 其他逻辑 }更进一步如果引导目标完全静止比如指向一个不会动的UI按钮你甚至可以在设置目标后只计算一次然后关闭GuideMaskController组件或脚本的enabled状态彻底消除Update开销。4.2 支持不规则形状与动画我们的Shader目前只支持矩形区域。如果想高亮一个圆形按钮或者一个复杂的多边形图标呢这就需要升级我们的距离场计算。圆形镂空计算像素到圆心的距离即可。float distanceToCenter length(IN.texcoord - _Center); float circleRadius _Size.x; // 假设_Size.x代表半径 float minDistance circleRadius - distanceToCenter; // 正数在内负数在外 // 后续的smoothstep不变圆角矩形镂空这是更常见也更优雅的效果。我们需要一个计算到圆角矩形距离的函数。可以使用max和length的组合来实现虽然精确的SDF有向距离场更复杂但一个近似的、视觉效果不错的实现如下float2 q abs(pos) - (_Size - _Radius); // pos是之前计算的中心化坐标 float distanceField length(max(q, 0.0)) min(max(q.x, q.y), 0.0) - _Radius; // 此时distanceField就是到圆角矩形边缘的有向距离 float alpha smoothstep(-_Feather, _Feather, distanceField); // 用_Feather控制过渡动画效果引导往往需要动态出现比如镂空区域从小放大或者背景遮罩渐入。这可以通过在C#脚本中插值LerpShader的参数来实现。// 在GuideMaskController中添加协程 public IEnumerator ShowMaskAnimated(RectTransform target, float duration) { SetTarget(target); // 初始状态倒角半径很大几乎全遮罩或尺寸很小 float startRadius 0.5f; float endRadius roundRadius; float timer 0; while (timer duration) { timer Time.deltaTime; float t timer / duration; float currentRadius Mathf.Lerp(startRadius, endRadius, EasingFunction.EaseOutCubic(t)); // 使用缓动函数更自然 _maskMaterial.SetFloat(RadiusId, currentRadius); yield return null; } _maskMaterial.SetFloat(RadiusId, endRadius); }4.3 与UI事件系统的兼容性一个常见的需求是点击镂空区域即高亮的按钮应该触发按钮事件而点击遮罩的黑暗区域则不应该触发甚至应该阻止事件穿透比如弹出一个提示“请先点击这里”。UGUI的事件系统基于Graphic Raycaster和EventSystem。我们的遮罩是一个全屏的Image默认会拦截所有点击。为了实现“仅镂空区域可点击”我们需要让遮罩的Image组件不响应射线检测即Raycast Target取消勾选但同时我们又需要知道点击是否发生在镂空区域。一个更合理的架构是遮罩Image的Raycast Target设为false。在高亮的目标UI上确保其Raycast Target为true。如果需要点击遮罩区域有反馈如提示可以在遮罩GameObject上再挂载一个透明的、Raycast Target为true的Image作为事件捕获层然后通过代码判断点击位置是否在镂空区域之外再执行相应逻辑如播放一个错误音效。判断逻辑可以利用RectTransformUtility.ScreenPointToLocalPointInRectangle将屏幕点击坐标转换到遮罩的本地坐标系然后复用Shader中的距离场逻辑进行计算。4.4 多目标与复杂引导序列在实际项目中引导往往是一连串的步骤。你需要管理多个高亮目标以及它们之间的切换。我的建议是抽象一个GuideStep类包含目标RectTransform、提示文本、箭头位置等信息。然后由一个GuideManager单例来管理当前步骤并调用GuideMaskController的SetTarget方法。在切换步骤时可以加入上述的动画让体验更流畅。5. 常见问题排查与性能压测即使按照步骤实现了你可能还是会遇到一些奇怪的问题。这里列出几个我踩过的坑和解决方法。问题一镂空位置不对或者随着屏幕分辨率变化而偏移。根因99%是坐标转换逻辑错误。UpdateMaskToTarget方法中的转换假设了特定的Canvas渲染模式和锚点设置。排查首先确认你的遮罩Image锚点是否为Stretch且四边偏移均为0。在UpdateMaskToTarget方法中添加Debug.Log打印出计算过程中的关键值centerLocal,sizeLocal,centerUV,sizeUV。在目标位于屏幕中心时centerUV应接近(0.5, 0.5)。拖动目标到屏幕四个角观察centerUV是否在(0,0)到(1,1)范围内合理变化。如果Canvas是Screen Space - Camera或World Space世界坐标到屏幕坐标的转换需要使用Camera.WorldToScreenPoint然后再进行后续计算逻辑会更复杂。问题二倒角过渡边缘看起来有锯齿不够平滑。根因在低分辨率设备上或_Radius值设置过小时smoothstep的过渡区间像素太少就会产生锯齿。解决适当增大_Radius值。但注意不要太大否则镂空区域会显得“模糊”。更高级的解决方案是使用抗锯齿Anti-aliasing的smoothstep或者自己写一个更平滑的插值函数。一个简单的改进是使用smoothstep的三次方版本或者使用fwidth函数来根据像素密度动态调整过渡宽度但这需要更深入的Shader知识。问题三在真机上特别是低端机感觉卡顿。根因全屏的遮罩意味着每个像素都要执行一遍我们的Shader。虽然计算量不大但在低端机的Fill Rate填充率可能成为瓶颈尤其是Canvas下有很多UI元素时。优化减少Canvas的Draw Call确保遮罩Image和它下面的UI元素在同一个Canvas下吗如果不是合并在一个Canvas里可以减少一次Draw Call。但也要注意一个Canvas的任何元素变化都会导致整个Canvas重建需要权衡。降低遮罩的渲染精度可以尝试将遮罩Image的缩放缩小一点比如0.99或者使用一个分辨率稍低的Render Texture如果采用多摄像机方案。但对于我们的Shader方案这点优化有限。最重要的优化及时禁用。当引导不需要显示时一定要将遮罩的GameObject设置为SetActive(false)或者将Image组件的enabled设为false。这能立即移除该物体的渲染和Shader计算开销。性能压测在Unity Profiler的Rendering区域观察Batches和SetPass Calls。启用/禁用你的遮罩看这两个数字的变化。如果启用遮罩导致Batches增加很多检查Canvas的合批情况。问题四遮罩挡住了所有UI包括本来应该在高层的提示框。根因Unity UI的渲染顺序由Hierarchy中的顺序和Canvas的Sort Order决定。后渲染的会覆盖先渲染的。解决将遮罩的GameObject放在一个独立的、Sort Order较低的Canvas上。而引导的提示文本、箭头等元素放在另一个Sort Order更高的Canvas上。这样遮罩只会遮挡它所在Canvas及更低层级的UI而不会影响高层级的提示。实现一个带内倒角的UGUI引导镂空效果从理解距离场和smoothstep的原理到搞定繁琐的坐标转换再到处理性能与兼容性问题每一步都需要仔细推敲。但一旦跑通这套方案的可复用性和效果都非常出色。它不仅仅用于新手引导任何需要视觉聚焦的场景比如功能解锁、强提示、教学视频的聚焦框等都可以直接复用或稍加修改来使用。希望这篇近万字的详细拆解能帮你彻底掌握这个实用又精致的效果。