简介一份面向 Unity 开发者的 UGUI 特效插件资源包聚焦游戏界面中常用且易上手的 UI 特效实现适合希望提升界面表现力、又不想从零编写 Shader 的初中级开发者。压缩包大小 53.35MB共 158 个文件34 个 C# 脚本与 5 个 Shader、2 个 CGINC 着色器描述文件负责核心特效逻辑13 个 sample 示例场景、9 个 png 和 2 个 controller 用于演示与预览另有 6 个 md 文档及 3 个 asmdef 程序集定义便于按模块阅读和工程集成。已有 1050 人学习下载配套专栏提供了详细的使用方法。资源包含可直接运行的 Demo 场景读者既能快速看到特效效果也能对照脚本与文档理解 UGUI 和 Shader 的结合方式从而在自己的项目中灵活复用这些 UI 效果。1. UIEffect 是什么你的 UGUI 特效为什么总差一口气做过界面验收的人都会遇到同一个场景功能都齐了但按钮按下没有扫描光弹窗关闭像硬切卡面缺一层玻璃模糊怎么看都差一口气。自己写 Shader 加脚本边界问题永远调不完让美术出序列帧包体和内存双烧。UIEffect 就是这类问题的标准答案它是一套 Unity 开源的 UI 特效资源把模糊、色调、高光扫过、溶解过渡全部封装成 UGUI 组件直接挂在 Image 或 Button 上就能用不用碰全屏后处理管线也不会和场景摄像机特效互相污染。适合做游戏 HUD、背包、弹窗、卡牌界面以及想要一套可维护特效层的 UI 框架开发者。下面从接入、调参、避坑到集成按一线项目的顺序讲清楚。2. 接入 UIEffect资源导入、首个特效与材质顶点原理2.1 两种导入方式unitypackage 和仓库源码差别比你想象的小在 Unity 里接 UIEffect最常见的是从资源商店或项目发布页下载 unitypackage 直接导入把UIEffect文件夹拖进 Assets 目录即可。另一种做法是把仓库源码拉进项目使用里面的 UIEffect 文件夹两者的运行时内容完全一致脚本、Shader、内置贴图都在同一个文件夹里打包。我一般倾向直接引源码而不是 unitypackage。原因很现实UIEffect 这类资源在项目后期大概率要二次开发比如给 Shader 加自定关键字、调整噪点贴图的采样方式。如果引的是 unitypackage重新导入容易把改过的文件覆盖回去源码方式至少能保证改动一直在版本控制里。导入后在任意 UGUI 对象上 Add Component输入UIEffect能看到一串组件UIEffect 是基类负责色调叠加UIBlur 做模糊UIShiny 做高光扫过UITransition 做溶解过渡UIHsvModifier 做色相饱和度调节。它们都继承自 UGUI 的 BaseMeshEffect跟你熟悉的 Shadow、Outline 是同一套机制可以多个叠加在一个节点上。也就是说一个按钮可以同时挂 UIShiny 扫光和 UIBlur 模糊互不覆盖。2.2 原理为什么它能在单个 UI 元素上做特效而不碰全局后处理UIEffect 的核心机制可以拆成两件事改材质、改顶点。组件启用时会把一份带特效 Shader 的材质替换到 CanvasRenderer 上同时作为 UGUI 的 IMeshModifier 接口组件会把当前 Graphic 的顶点数据扩展多写进几组向量作为模糊半径、溶解阈值、高光方向等参数的传递通道。真正的计算发生在 Shader 的片元阶段用顶点流里带的数据逐像素算效果。这就是为什么 UIEffect 在 UI 项目里比全屏后处理更实用。全屏后处理要锁定相机、处理分辨率适配还会把整个画面都糊一遍UIEffect 是把计算范围限制在单个 UI 元素内不破坏其他 UI 的批次结构。代价也很明确每个挂了特效的对象都需要单独一张材质。同屏特效节点越多Canvas 的 DrawCall 就越高。这在你验收性能时是一条不能忽略的预算后面第 6 章会讲怎么测。2.3 最小跑通一张图加一个组件再看一段运行时代码新建一个 Canvas随便放一张 Image背景铺一张大图然后给 Image 挂 UIBlur。这时你在编辑器里可能看不到任何变化因为 UIEffect 的很多组件在编辑模式下默认不预览效果需要勾选检视面板里的预览开关或者直接进 Play 模式。下面是运行时动态挂载的示例用代码代替手工操作// UIEffectDemo.cs // 在运行时给一个 UGUI 对象动态挂 UI 特效组件。 // 注意不同版本包的属性名会有差异此处按官方公开 API 的语义来写。 using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(CanvasRenderer))] public class UIEffectDemo : MonoBehaviour { [SerializeField] private Image targetImage; void Start() { if (targetImage null) return; // 加一个高光扫过组件UIShiny 本身也是 BaseMeshEffect // 挂到已存在的 Image 上不会破坏 Image 的原有渲染 var shiny targetImage.gameObject.AddComponentUIShiny(); // position 控制扫光位置width 是光带宽度angle 是扫光方向 // 这三个属性在不同版本里字段名略有差异以你引用的包源码为准 shiny.position -0.5f; shiny.width 0.35f; shiny.angle 30f; // 再加一层色调UIEffect 是基类组件color 属性控制叠加颜色 var fx targetImage.gameObject.AddComponentUIEffect(); fx.color new Color(0.3f, 0.8f, 1f, 0.15f); } }这里几个参数要解释清楚。shiny.position从 -0.5 起步是因为扫光动画通常从左侧开始后续用时间值从 -0.5 推到 1.5 就能模拟光带划过width用的是相对宽度0.35 大约等于按钮横向三分之一的区域angle控制在扫光方向旋转30 度适合斜向扫光效果。UIEffect的color走的是 alpha 叠加0.15 的透明度不会盖住原图文字只是加一层冷色氛围。跑通这个 Demo 后建议做一个验证步骤在 Profiler 里看 Canvas 的渲染耗时变化。你会发现这一个按钮从普通批次里被拆了出来多出一到两个 DrawCall。这就是后面所有调优的起点。3. UIEffect 调参模糊、高光、溶解的参数表和动态配置3.1 核心参数速查表四个组件的调参思路UIEffect 的组件多参数杂但实际项目里真正天天调的就那么几个。我整理了一张速查表按组件、核心参数、建议起点和常见误用四列来写组件核心参数建议起点常见误用UIEffect叠加颜色、过渡强度颜色 alpha 0.1~0.2把 UIEffect 当透明度组件用反而盖住原图细节UIBlur模糊强度、边缘采样强度 4~8边缘值 0.5强度开到 20图片内容糊成色块层级信息全丢UIShiny位置、宽度、角度宽度 0.2~0.4角度 30°宽度低于 0.2低分辨率真机出现一帧亮一帧暗的闪烁UITransition进度值、过渡类型线性 0 到 1动画播完不关组件节点持续占用特效材质和 DrawCall这张表不针对某一个版本因为 UIEffect 在 3.x 和 4.x 之间改过命名早期的 UIDissolve 后来并入了 UITransition字段名也有调整。调参前先看包里的源码以实际 SerializeField 为准这和查第三方插件的通用方法一样。以 UIBlur 为例它做的是单张图片内部的卷积采样模糊强度 4 到 8 已经是 UI 场景里比较舒服的范围。强度超过 12 后图片边缘会开始出现半透明羽化再往上就直接糊成一片层次感丢失。边缘参数控制的是采样范围衰减曲线0.5 表示从中心到边缘平滑过渡做卡片投影时建议调小到 0.2 左右。3.2 动态调参让扫光和时间轴各归其位静态效果验收通过后下一步就是把特效接进交互流程。我的常用做法是在 UI 管理器里写一个统一的进度控制页面切换时旧页面的 UITransition 从 1 回到 0新页面从 0 到 1所有子节点共享同一个进度这样入场动画看起来是一个整体而不是各玩各的。// UITransitionGroup.cs // 让一个容器下的全部 UITransition 按统一进度播放适合做面板入场溶解 using System.Collections; using System.Collections.Generic; using UnityEngine; public class UITransitionGroup : MonoBehaviour { private ListUITransition transitions new ListUITransition(); void Awake() { // 把子节点上所有 UITransition 收进列表 // GetComponentsInChildren 第二个参数传 true能取到隐藏节点 transitions.Clear(); GetComponentsInChildrenUITransition(true); } public void Play(float duration) { StartCoroutine(PlayCoroutine(duration)); } private IEnumerator PlayCoroutine(float duration) { // 用 unscaledTime避免游戏暂停时 UI 入场卡在半截 float start Time.unscaledTime; while (Time.unscaledTime - start duration) { float p Mathf.Clamp01((Time.unscaledTime - start) / duration); // 统一推进所有子节点的进度 // 旧版包里这个属性在 UIDissolve 上字段名以源码为准 foreach (var tr in transitions) { if (tr ! null) { tr.progress p; } } yield return null; } } }这个脚本的核心是Time.unscaledTime不用Time.time。因为 UI 入场动画在游戏暂停时应该继续播完否则玩家暂停回来看到界面卡在半透明的中间态体验很差。duration建议控制在 0.2 到 0.4 秒之间短于 0.15 秒人眼几乎感觉不到溶解过程长于 0.6 秒则拖节奏。另外要注意GetComponentsInChildrenUITransition(true)会把隐藏子节点的组件也取出来。如果你的容器下有大量未激活的缓存节点这里的列表会被撑大循环推送进度时会白白消耗 CPU。建议在 Awake 后加一层过滤只保留 IsActive 的节点。3.3 模糊的边界UIBlur 不是真毛玻璃用 UIBlur 做毛玻璃是 UIEffect 最常见的误解。它采样的是当前 Image 自身的纹理不是背后整个 Canvas 的内容。也就是说你在一张半透明底图上挂 UIBlur得到的是这张底图内部模糊背景上的文字和图标并不会真的被糊掉。真想做出背后内容被模糊的毛玻璃要用 UIEffectCapturedImage它会把当前 Canvas 渲染到 RenderTexture 上再采样。但 CapturedImage 会引入额外的 RenderTexture 分配和 GPU 开销更关键的是整个 Canvas 都要为此重建一次性能敏感页面慎用。我的建议是UIBlur 用来做卡片本身的质感比如给一张图片叠一层内发光、给按钮加被按下的模糊反馈真毛玻璃留给 CapturedImage并且只用在需要表现层级关系的顶层弹窗上。两者混搭一个页面里不要超过两个毛玻璃节点。4. UIEffect 避坑指南材质紫红、Mask 错乱与内存泄漏的排查4.1 特效组件加上去了但屏幕上没有任何变化现象给 Image 挂上 UIBlur 或 UIShinyScene 和 Game 视图里都没有任何反应组件确实是启用状态材质也没设错。原因排查分三档。第一档组件挂上后 UGUI 没有触发 Canvas 重建这是最常见的黑匣子现象把 Canvas 组件的 enabled 关掉再打开就能触发一次全量重建。第二档Image 上已经有自定义材质UIEffect 替换材质时被 UGUI 的材质优先级挡住。第三档组件挂在 Text 等特殊的 Graphic 上某些字体 Shader 不允许再叠第二层材质。解决先确认当前 Graphic 的 Material 字段是 None然后在 Inspector 里把 Canvas 的 enabled 切换一次最后再检查这个组件是不是被另一个 UIEffect 子类覆盖了优先级比如同时挂 UIHsvModifier 和 UIEffect后者的色调会被前者吃掉。4.2 打包后特效材质变紫红编辑器里却正常现象编辑器里预览正常打出 Android 或 iOS 包后所有 UIEffect 区域的材质变成紫红色。这是 Unity 开发者最熟悉的紫红 Shader问题。原因UIEffect 的材质是运行时动态创建的场景资源和预制体里并没有直接引用这些 Shader。一旦项目开启 Strip Engine Code 或 Shader 变体裁剪那些没有被显式引用的 Shader 会被当作无用资源裁掉运行时找不到 Shader渲染管线就回退到默认的错误材质也就是紫红色。解决把 UIEffect 文件夹下所有的 .shader 文件加入 Project Settings Graphics 的 Always Included Shaders 列表。更稳妥的做法是做一个公共材质模板在模板里引用这些 Shader并把这个材质放到 Resources 目录或直接挂在某个常驻场景的隐藏节点上确保打包时 Shader 被硬引用。这两种方式选一种即可我习惯做公共材质模板因为 Always Included Shaders 列表一旦变多后续排查打包体积增加会比较费劲。4.3 和 Mask / 滚动列表一起用特效显示错乱现象ScrollView 的 content 子节点加了 UIEffect拖动滚动时特效区域边缘被 Mask 裁掉一半或者特效穿透了 Mask 的裁剪范围在遮罩外还能看到残影。原因UGUI 的 Mask 依赖 Stencil 缓冲区做裁剪裁剪时要求所有子节点的 Shader 都支持对应的 Stencil 操作。UIEffect 替换材质后新 Shader 如果没有处理 Stencil 关键字裁剪就会失效反过来如果 Shader 保留 Stencil 位但操作指令写错就会出现一半被裁、一半残留的诡异效果。解决优先把特效挂在 Mask 节点外部也就是不参与裁切的层级。如果特效必须出现在列表项内部需要用 UIEffect 支持 Stencil 的 Shader 变体并在材质上开启对应的 Mask 通道。常见的做法是在 Shader 源码里搜 Stencil 相关代码确认是否有按关键字切换的开关。这个改动不要在傍晚改因为 Mask 加自定义 Shader 的排列组合太多很容易改出一个看起来正常、换台低端机就花屏的变体。4.4 动态刷界面内存一路涨GC 回收无效果现象运行时频繁创建和销毁带 UIEffect 的 UI 对象Profiler 里内存曲线持续向上GC 堆无明显回收甚至出现卡顿。很多项目把原因归到粒子特效内存泄露实际排查下来UiEffect 的动态材质缓存和 RenderTexture 没释放才是主要原因。原因UIEffect 在运行时给组件创建新材质AddComponent 一次就生成一份。如果你用 Destroy 来清理对象材质不会被 UGUI 立刻释放而是挂在 CanvasRenderer 的引用上等待回收。UIEffectCapturedImage 更明显它创建的 RenderTexture 表面上是对象属性实际上生命周期没有和对象销毁绑定必须在 OnDisable 或专门的释放接口里手动 RenderTexture.Release。解决不要再用 AddComponent 和 Destroy 控制特效生命周期改成对象池。池在回收对象时先把所有 UIEffect 组件的 enabled 设为 false触发组件的材质释放流程再把对象 SetActive(false)。CapturedImage 则要在回收时手动调用 Release 并重新分配。这一段经验是从一个背包频繁开关的项目里得到的那一版内存从 400MB 涨到 800MB最后定位到 60 多个未释放材质每帧还在增长。4.5 真机扫光闪烁帧率掉得莫名其妙现象UIShiny 扫光在小尺寸真机上出现一帧亮一帧暗的闪烁同时整个页面的帧率比预想低。编辑器里看不出来真机必现这就是特效调参里最玄学的部分。原因UIShiny 的宽度参数低于 0.2 时光带在低分辨率屏幕只占三四个像素每帧位置移动时明暗变化被放大视觉上就是闪烁。帧率下降则出在 Canvas 重建上UIEffect 改顶点后要求 Canvas 重新生成对应网格如果页面里同时十几个特效节点每秒都在改顶点Canvas.SendWillRenderCanvases 会被反复触发CPU 耗时直线上升。解决UIShiny 宽度保持在 0.25 以上扫光动画优先用 Shader 的 UV 偏移实现而不是每帧修改组件的 position 参数。后者的本质是逐帧改顶点会让 Canvas 持续重建而 UV 偏移只更新材质属性不触发顶点重算。检查方法是在 Profiler 里看名为 Canvas.SendWillRenderCanvases 的耗时项这项占比超过 5% 就要开始控制特效节点数量。5. 把 UIEffect 接进 UI 框架批量控制、软遮罩冲突与变体裁剪5.1 用一个特效对象池统一管理不再运行时创建销毁UI 框架集成 UIEffect 的第一个改造点是所有特效对象都走对象池而不是各自 AddComponent。这两者的差异在页签频繁切换的界面里会被放大十倍。一个简单特效池的写法如下// UIEffectPool.cs // 管理特效对象避免运行时高频 AddComponent 带来的材质堆积 using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class UIEffectPool : MonoBehaviour { [SerializeField] private GameObject effectPrefab; private readonly StackGameObject pool new StackGameObject(); public GameObject Take() { GameObject go pool.Count 0 ? pool.Pop() : Instantiate(effectPrefab); go.SetActive(true); return go; } public void Release(GameObject go) { // 回收前关掉所有特效组件材质才会走 OnDisable 释放流程 var effects go.GetComponentsInChildrenUIEffect(true); foreach (var fx in effects) { fx.enabled false; } go.SetActive(false); pool.Push(go); } }这个池子没有做复杂的容量扩容核心是一个 Stack。Take 时如果池里有货就直接弹出来没有才去实例化Release 时先禁用所有 UIEffect 组件再 SetActive(false)归还进栈。为什么 Release 要先禁用特效组件而不是直接隐藏对象因为 UIEffect 在 OnDisable 里会释放对动态材质的引用直接 SetActive(false) 虽然也会触发 OnDisable但如果对象可能被二次复用组件还连着旧材质下次 Take 出来时 CanvasRenderer 不一定会重新走材质替换流程。先手动把 enabled 关掉再走对象隐藏逻辑更干净。5.2 和 SoftMask、图集共存的三条经验UIEffect 在 UI 框架里最常见的冲突对象是 SoftMask 和图集。SoftMask 组件会修改子节点的材质而 UIEffect 也要修改两者的 Shader 关键字不合并时效果会互相覆盖或者完全失效。第一条经验把 UIEffect 挂在 SoftMask 的外层兄弟节点而不是挂在 SoftMask 内部。大多数软遮罩的实际需求是给一张图的边缘做柔和渐变这个效果完全可以通过 UIEffect 自己的过渡通道实现不需要同时叠 SoftMask。只有滚动列表和裁切场景必须用 SoftMask 时才去处理 Shader 合并。第二条经验使用 UIEffect 后Image 的 material 字段会被替换成动态材质原图集的引用关系不会变但打包时图集裁剪逻辑可能因为这个动态材质而失效。遇到图集引用丢失的现象先检查动态材质是否按 templateUrl 引用正确图集纹理。第三条经验一个节点同时挂 UIShiny 和 UIHsvModifier 时两个组件都会改顶点执行顺序影响最终效果。UGUI 的 BaseMeshEffect 执行顺序不是按组件排列顺序而是按添加顺序。需要稳定视觉结果时在代码里用 Graphic 的 ModifyMesh 接口手动指定执行序列不要依赖检视面板的添加顺序。5.3 包体优化变体裁剪时保留 UIEffect 的一组固定资源项目做包体优化时通常会开 Shader 变体裁剪UIEffect 的 Shader 第一次被裁掉就出现第 4 章说的紫红材质。除了把 Shader 塞进 Always Included还有两个针对包体的细节。第一个是噪点贴图。UITransition 做溶解过渡依赖内置的噪点贴图这张图如果被压缩成 DXT 或 ETC 格式溶解边缘会出现明显的色块看起来像毛边。要把它单独加进图集或者放到 StreamingAssets 里以原始格式加载Texture Import 的压缩格式设为 RGBA 无损或给单独的压缩白名单。第二个是变体数量。UIEffect 的 Shader 里如果开了多个混合关键字每个关键字都会生成对应变体包体体积会被成倍放大。建议只保留项目用到的模式比如只保留模糊、色调、溶解三组变体把不用的关键字注释掉或用 Shader 的 multi_compile 指令裁剪。这两个细节配合 Always Included Shaders基本能解决 UI 包体优化里 75% 的特效材质问题。剩下的 25% 是 URP 迁移项目从内置管线换 URP 后UIEffect 的 Shader 需要重新导入并配置 URP 对应的输入这一步没有快捷键只能一个材质一个材质地检查。6. 用像素验收 UIEffect灰度对比和帧预算的最后一招6.1 截图差值用像素说话替代肉眼验收UI 特效的验收不能靠肉眼同一张图在不同显示器上的色彩和亮度差异太大。我的固定流程是特效开启前后各截一张图文件名后缀标 _before 和 _after在 PS 里建两层做差值混合。差值结果里只有你预期加特效的区域显示非零像素其他区域全黑说明效果范围正确如果差值里有大量意外区域说明特效影响了不该影响的内容。亮度层级用灰度通道看。把截图去饱和后如果模糊层和原图灰阶差太小视觉效果会显得脏灰阶差太大又会让界面看起来像两层拼贴。一般灰阶差控制在 20 到 40 之间这个范围人眼看着舒服也不会破坏 UI 的信息优先级。这个方法同时能排查透明边缘和半透明溢出省去后面在真机上反复调参的返工。6.2 帧预算一屏三个特效节点就是红线性能验收用 Frame Debugger 和 Profiler 两件套。UIShiny 这类动态特效一帧的成本主要消耗在 Canvas 顶点重建上。我常用的红线是一屏同时激活的特效节点不超过三个UITransition 动画播完立即禁用组件CapturedImage 数量不超过一个。超过这个预算就去找 UI 框架的设计问题而不是继续压参数。我这个习惯是从一次血泪教训里养成的。当时项目赶版本把一个用 UIEffect 做的扫光拖进了滚动列表还顺手叠了一层 Mask结果就是第 4 章描述的那个样子编辑器正常、真机花屏、内存缓涨。从那以后每次提交 UIEffect 改动我都会补一张灰度截图和一段 Profiler 截图和代码一起进提交说明。截图不好看但至少半年后回看历史版本还能知道当初为什么这么调参数。也希望这一整套流程能帮你在 UIEffect 这个方向上少走弯路把界面观感稳定地打磨上线。本文还有配套的精品资源点击获取 
长河君 · 2026/10/8 8:29:22 · 阅读 1.2k Unity UGUI特效组件UIEffect：从原理到性能调优的完整指南
简介一份面向 Unity 开发者的 UGUI 特效插件资源包聚焦游戏界面中常用且易上手的 UI 特效实现适合希望提升界面表现力、又不想从零编写 Shader 的初中级开发者。压缩包大小 53.35MB共 158 个文件34 个 C# 脚本与 5 个 Shader、2 个 CGINC 着色器描述文件负责核心特效逻辑13 个 sample 示例场景、9 个 png 和 2 个 controller 用于演示与预览另有 6 个 md 文档及 3 个 asmdef 程序集定义便于按模块阅读和工程集成。已有 1050 人学习下载配套专栏提供了详细的使用方法。资源包含可直接运行的 Demo 场景读者既能快速看到特效效果也能对照脚本与文档理解 UGUI 和 Shader 的结合方式从而在自己的项目中灵活复用这些 UI 效果。1. UIEffect 是什么你的 UGUI 特效为什么总差一口气做过界面验收的人都会遇到同一个场景功能都齐了但按钮按下没有扫描光弹窗关闭像硬切卡面缺一层玻璃模糊怎么看都差一口气。自己写 Shader 加脚本边界问题永远调不完让美术出序列帧包体和内存双烧。UIEffect 就是这类问题的标准答案它是一套 Unity 开源的 UI 特效资源把模糊、色调、高光扫过、溶解过渡全部封装成 UGUI 组件直接挂在 Image 或 Button 上就能用不用碰全屏后处理管线也不会和场景摄像机特效互相污染。适合做游戏 HUD、背包、弹窗、卡牌界面以及想要一套可维护特效层的 UI 框架开发者。下面从接入、调参、避坑到集成按一线项目的顺序讲清楚。2. 接入 UIEffect资源导入、首个特效与材质顶点原理2.1 两种导入方式unitypackage 和仓库源码差别比你想象的小在 Unity 里接 UIEffect最常见的是从资源商店或项目发布页下载 unitypackage 直接导入把UIEffect文件夹拖进 Assets 目录即可。另一种做法是把仓库源码拉进项目使用里面的 UIEffect 文件夹两者的运行时内容完全一致脚本、Shader、内置贴图都在同一个文件夹里打包。我一般倾向直接引源码而不是 unitypackage。原因很现实UIEffect 这类资源在项目后期大概率要二次开发比如给 Shader 加自定关键字、调整噪点贴图的采样方式。如果引的是 unitypackage重新导入容易把改过的文件覆盖回去源码方式至少能保证改动一直在版本控制里。导入后在任意 UGUI 对象上 Add Component输入UIEffect能看到一串组件UIEffect 是基类负责色调叠加UIBlur 做模糊UIShiny 做高光扫过UITransition 做溶解过渡UIHsvModifier 做色相饱和度调节。它们都继承自 UGUI 的 BaseMeshEffect跟你熟悉的 Shadow、Outline 是同一套机制可以多个叠加在一个节点上。也就是说一个按钮可以同时挂 UIShiny 扫光和 UIBlur 模糊互不覆盖。2.2 原理为什么它能在单个 UI 元素上做特效而不碰全局后处理UIEffect 的核心机制可以拆成两件事改材质、改顶点。组件启用时会把一份带特效 Shader 的材质替换到 CanvasRenderer 上同时作为 UGUI 的 IMeshModifier 接口组件会把当前 Graphic 的顶点数据扩展多写进几组向量作为模糊半径、溶解阈值、高光方向等参数的传递通道。真正的计算发生在 Shader 的片元阶段用顶点流里带的数据逐像素算效果。这就是为什么 UIEffect 在 UI 项目里比全屏后处理更实用。全屏后处理要锁定相机、处理分辨率适配还会把整个画面都糊一遍UIEffect 是把计算范围限制在单个 UI 元素内不破坏其他 UI 的批次结构。代价也很明确每个挂了特效的对象都需要单独一张材质。同屏特效节点越多Canvas 的 DrawCall 就越高。这在你验收性能时是一条不能忽略的预算后面第 6 章会讲怎么测。2.3 最小跑通一张图加一个组件再看一段运行时代码新建一个 Canvas随便放一张 Image背景铺一张大图然后给 Image 挂 UIBlur。这时你在编辑器里可能看不到任何变化因为 UIEffect 的很多组件在编辑模式下默认不预览效果需要勾选检视面板里的预览开关或者直接进 Play 模式。下面是运行时动态挂载的示例用代码代替手工操作// UIEffectDemo.cs // 在运行时给一个 UGUI 对象动态挂 UI 特效组件。 // 注意不同版本包的属性名会有差异此处按官方公开 API 的语义来写。 using UnityEngine; using UnityEngine.UI; [RequireComponent(typeof(CanvasRenderer))] public class UIEffectDemo : MonoBehaviour { [SerializeField] private Image targetImage; void Start() { if (targetImage null) return; // 加一个高光扫过组件UIShiny 本身也是 BaseMeshEffect // 挂到已存在的 Image 上不会破坏 Image 的原有渲染 var shiny targetImage.gameObject.AddComponentUIShiny(); // position 控制扫光位置width 是光带宽度angle 是扫光方向 // 这三个属性在不同版本里字段名略有差异以你引用的包源码为准 shiny.position -0.5f; shiny.width 0.35f; shiny.angle 30f; // 再加一层色调UIEffect 是基类组件color 属性控制叠加颜色 var fx targetImage.gameObject.AddComponentUIEffect(); fx.color new Color(0.3f, 0.8f, 1f, 0.15f); } }这里几个参数要解释清楚。shiny.position从 -0.5 起步是因为扫光动画通常从左侧开始后续用时间值从 -0.5 推到 1.5 就能模拟光带划过width用的是相对宽度0.35 大约等于按钮横向三分之一的区域angle控制在扫光方向旋转30 度适合斜向扫光效果。UIEffect的color走的是 alpha 叠加0.15 的透明度不会盖住原图文字只是加一层冷色氛围。跑通这个 Demo 后建议做一个验证步骤在 Profiler 里看 Canvas 的渲染耗时变化。你会发现这一个按钮从普通批次里被拆了出来多出一到两个 DrawCall。这就是后面所有调优的起点。3. UIEffect 调参模糊、高光、溶解的参数表和动态配置3.1 核心参数速查表四个组件的调参思路UIEffect 的组件多参数杂但实际项目里真正天天调的就那么几个。我整理了一张速查表按组件、核心参数、建议起点和常见误用四列来写组件核心参数建议起点常见误用UIEffect叠加颜色、过渡强度颜色 alpha 0.1~0.2把 UIEffect 当透明度组件用反而盖住原图细节UIBlur模糊强度、边缘采样强度 4~8边缘值 0.5强度开到 20图片内容糊成色块层级信息全丢UIShiny位置、宽度、角度宽度 0.2~0.4角度 30°宽度低于 0.2低分辨率真机出现一帧亮一帧暗的闪烁UITransition进度值、过渡类型线性 0 到 1动画播完不关组件节点持续占用特效材质和 DrawCall这张表不针对某一个版本因为 UIEffect 在 3.x 和 4.x 之间改过命名早期的 UIDissolve 后来并入了 UITransition字段名也有调整。调参前先看包里的源码以实际 SerializeField 为准这和查第三方插件的通用方法一样。以 UIBlur 为例它做的是单张图片内部的卷积采样模糊强度 4 到 8 已经是 UI 场景里比较舒服的范围。强度超过 12 后图片边缘会开始出现半透明羽化再往上就直接糊成一片层次感丢失。边缘参数控制的是采样范围衰减曲线0.5 表示从中心到边缘平滑过渡做卡片投影时建议调小到 0.2 左右。3.2 动态调参让扫光和时间轴各归其位静态效果验收通过后下一步就是把特效接进交互流程。我的常用做法是在 UI 管理器里写一个统一的进度控制页面切换时旧页面的 UITransition 从 1 回到 0新页面从 0 到 1所有子节点共享同一个进度这样入场动画看起来是一个整体而不是各玩各的。// UITransitionGroup.cs // 让一个容器下的全部 UITransition 按统一进度播放适合做面板入场溶解 using System.Collections; using System.Collections.Generic; using UnityEngine; public class UITransitionGroup : MonoBehaviour { private ListUITransition transitions new ListUITransition(); void Awake() { // 把子节点上所有 UITransition 收进列表 // GetComponentsInChildren 第二个参数传 true能取到隐藏节点 transitions.Clear(); GetComponentsInChildrenUITransition(true); } public void Play(float duration) { StartCoroutine(PlayCoroutine(duration)); } private IEnumerator PlayCoroutine(float duration) { // 用 unscaledTime避免游戏暂停时 UI 入场卡在半截 float start Time.unscaledTime; while (Time.unscaledTime - start duration) { float p Mathf.Clamp01((Time.unscaledTime - start) / duration); // 统一推进所有子节点的进度 // 旧版包里这个属性在 UIDissolve 上字段名以源码为准 foreach (var tr in transitions) { if (tr ! null) { tr.progress p; } } yield return null; } } }这个脚本的核心是Time.unscaledTime不用Time.time。因为 UI 入场动画在游戏暂停时应该继续播完否则玩家暂停回来看到界面卡在半透明的中间态体验很差。duration建议控制在 0.2 到 0.4 秒之间短于 0.15 秒人眼几乎感觉不到溶解过程长于 0.6 秒则拖节奏。另外要注意GetComponentsInChildrenUITransition(true)会把隐藏子节点的组件也取出来。如果你的容器下有大量未激活的缓存节点这里的列表会被撑大循环推送进度时会白白消耗 CPU。建议在 Awake 后加一层过滤只保留 IsActive 的节点。3.3 模糊的边界UIBlur 不是真毛玻璃用 UIBlur 做毛玻璃是 UIEffect 最常见的误解。它采样的是当前 Image 自身的纹理不是背后整个 Canvas 的内容。也就是说你在一张半透明底图上挂 UIBlur得到的是这张底图内部模糊背景上的文字和图标并不会真的被糊掉。真想做出背后内容被模糊的毛玻璃要用 UIEffectCapturedImage它会把当前 Canvas 渲染到 RenderTexture 上再采样。但 CapturedImage 会引入额外的 RenderTexture 分配和 GPU 开销更关键的是整个 Canvas 都要为此重建一次性能敏感页面慎用。我的建议是UIBlur 用来做卡片本身的质感比如给一张图片叠一层内发光、给按钮加被按下的模糊反馈真毛玻璃留给 CapturedImage并且只用在需要表现层级关系的顶层弹窗上。两者混搭一个页面里不要超过两个毛玻璃节点。4. UIEffect 避坑指南材质紫红、Mask 错乱与内存泄漏的排查4.1 特效组件加上去了但屏幕上没有任何变化现象给 Image 挂上 UIBlur 或 UIShinyScene 和 Game 视图里都没有任何反应组件确实是启用状态材质也没设错。原因排查分三档。第一档组件挂上后 UGUI 没有触发 Canvas 重建这是最常见的黑匣子现象把 Canvas 组件的 enabled 关掉再打开就能触发一次全量重建。第二档Image 上已经有自定义材质UIEffect 替换材质时被 UGUI 的材质优先级挡住。第三档组件挂在 Text 等特殊的 Graphic 上某些字体 Shader 不允许再叠第二层材质。解决先确认当前 Graphic 的 Material 字段是 None然后在 Inspector 里把 Canvas 的 enabled 切换一次最后再检查这个组件是不是被另一个 UIEffect 子类覆盖了优先级比如同时挂 UIHsvModifier 和 UIEffect后者的色调会被前者吃掉。4.2 打包后特效材质变紫红编辑器里却正常现象编辑器里预览正常打出 Android 或 iOS 包后所有 UIEffect 区域的材质变成紫红色。这是 Unity 开发者最熟悉的紫红 Shader问题。原因UIEffect 的材质是运行时动态创建的场景资源和预制体里并没有直接引用这些 Shader。一旦项目开启 Strip Engine Code 或 Shader 变体裁剪那些没有被显式引用的 Shader 会被当作无用资源裁掉运行时找不到 Shader渲染管线就回退到默认的错误材质也就是紫红色。解决把 UIEffect 文件夹下所有的 .shader 文件加入 Project Settings Graphics 的 Always Included Shaders 列表。更稳妥的做法是做一个公共材质模板在模板里引用这些 Shader并把这个材质放到 Resources 目录或直接挂在某个常驻场景的隐藏节点上确保打包时 Shader 被硬引用。这两种方式选一种即可我习惯做公共材质模板因为 Always Included Shaders 列表一旦变多后续排查打包体积增加会比较费劲。4.3 和 Mask / 滚动列表一起用特效显示错乱现象ScrollView 的 content 子节点加了 UIEffect拖动滚动时特效区域边缘被 Mask 裁掉一半或者特效穿透了 Mask 的裁剪范围在遮罩外还能看到残影。原因UGUI 的 Mask 依赖 Stencil 缓冲区做裁剪裁剪时要求所有子节点的 Shader 都支持对应的 Stencil 操作。UIEffect 替换材质后新 Shader 如果没有处理 Stencil 关键字裁剪就会失效反过来如果 Shader 保留 Stencil 位但操作指令写错就会出现一半被裁、一半残留的诡异效果。解决优先把特效挂在 Mask 节点外部也就是不参与裁切的层级。如果特效必须出现在列表项内部需要用 UIEffect 支持 Stencil 的 Shader 变体并在材质上开启对应的 Mask 通道。常见的做法是在 Shader 源码里搜 Stencil 相关代码确认是否有按关键字切换的开关。这个改动不要在傍晚改因为 Mask 加自定义 Shader 的排列组合太多很容易改出一个看起来正常、换台低端机就花屏的变体。4.4 动态刷界面内存一路涨GC 回收无效果现象运行时频繁创建和销毁带 UIEffect 的 UI 对象Profiler 里内存曲线持续向上GC 堆无明显回收甚至出现卡顿。很多项目把原因归到粒子特效内存泄露实际排查下来UiEffect 的动态材质缓存和 RenderTexture 没释放才是主要原因。原因UIEffect 在运行时给组件创建新材质AddComponent 一次就生成一份。如果你用 Destroy 来清理对象材质不会被 UGUI 立刻释放而是挂在 CanvasRenderer 的引用上等待回收。UIEffectCapturedImage 更明显它创建的 RenderTexture 表面上是对象属性实际上生命周期没有和对象销毁绑定必须在 OnDisable 或专门的释放接口里手动 RenderTexture.Release。解决不要再用 AddComponent 和 Destroy 控制特效生命周期改成对象池。池在回收对象时先把所有 UIEffect 组件的 enabled 设为 false触发组件的材质释放流程再把对象 SetActive(false)。CapturedImage 则要在回收时手动调用 Release 并重新分配。这一段经验是从一个背包频繁开关的项目里得到的那一版内存从 400MB 涨到 800MB最后定位到 60 多个未释放材质每帧还在增长。4.5 真机扫光闪烁帧率掉得莫名其妙现象UIShiny 扫光在小尺寸真机上出现一帧亮一帧暗的闪烁同时整个页面的帧率比预想低。编辑器里看不出来真机必现这就是特效调参里最玄学的部分。原因UIShiny 的宽度参数低于 0.2 时光带在低分辨率屏幕只占三四个像素每帧位置移动时明暗变化被放大视觉上就是闪烁。帧率下降则出在 Canvas 重建上UIEffect 改顶点后要求 Canvas 重新生成对应网格如果页面里同时十几个特效节点每秒都在改顶点Canvas.SendWillRenderCanvases 会被反复触发CPU 耗时直线上升。解决UIShiny 宽度保持在 0.25 以上扫光动画优先用 Shader 的 UV 偏移实现而不是每帧修改组件的 position 参数。后者的本质是逐帧改顶点会让 Canvas 持续重建而 UV 偏移只更新材质属性不触发顶点重算。检查方法是在 Profiler 里看名为 Canvas.SendWillRenderCanvases 的耗时项这项占比超过 5% 就要开始控制特效节点数量。5. 把 UIEffect 接进 UI 框架批量控制、软遮罩冲突与变体裁剪5.1 用一个特效对象池统一管理不再运行时创建销毁UI 框架集成 UIEffect 的第一个改造点是所有特效对象都走对象池而不是各自 AddComponent。这两者的差异在页签频繁切换的界面里会被放大十倍。一个简单特效池的写法如下// UIEffectPool.cs // 管理特效对象避免运行时高频 AddComponent 带来的材质堆积 using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class UIEffectPool : MonoBehaviour { [SerializeField] private GameObject effectPrefab; private readonly StackGameObject pool new StackGameObject(); public GameObject Take() { GameObject go pool.Count 0 ? pool.Pop() : Instantiate(effectPrefab); go.SetActive(true); return go; } public void Release(GameObject go) { // 回收前关掉所有特效组件材质才会走 OnDisable 释放流程 var effects go.GetComponentsInChildrenUIEffect(true); foreach (var fx in effects) { fx.enabled false; } go.SetActive(false); pool.Push(go); } }这个池子没有做复杂的容量扩容核心是一个 Stack。Take 时如果池里有货就直接弹出来没有才去实例化Release 时先禁用所有 UIEffect 组件再 SetActive(false)归还进栈。为什么 Release 要先禁用特效组件而不是直接隐藏对象因为 UIEffect 在 OnDisable 里会释放对动态材质的引用直接 SetActive(false) 虽然也会触发 OnDisable但如果对象可能被二次复用组件还连着旧材质下次 Take 出来时 CanvasRenderer 不一定会重新走材质替换流程。先手动把 enabled 关掉再走对象隐藏逻辑更干净。5.2 和 SoftMask、图集共存的三条经验UIEffect 在 UI 框架里最常见的冲突对象是 SoftMask 和图集。SoftMask 组件会修改子节点的材质而 UIEffect 也要修改两者的 Shader 关键字不合并时效果会互相覆盖或者完全失效。第一条经验把 UIEffect 挂在 SoftMask 的外层兄弟节点而不是挂在 SoftMask 内部。大多数软遮罩的实际需求是给一张图的边缘做柔和渐变这个效果完全可以通过 UIEffect 自己的过渡通道实现不需要同时叠 SoftMask。只有滚动列表和裁切场景必须用 SoftMask 时才去处理 Shader 合并。第二条经验使用 UIEffect 后Image 的 material 字段会被替换成动态材质原图集的引用关系不会变但打包时图集裁剪逻辑可能因为这个动态材质而失效。遇到图集引用丢失的现象先检查动态材质是否按 templateUrl 引用正确图集纹理。第三条经验一个节点同时挂 UIShiny 和 UIHsvModifier 时两个组件都会改顶点执行顺序影响最终效果。UGUI 的 BaseMeshEffect 执行顺序不是按组件排列顺序而是按添加顺序。需要稳定视觉结果时在代码里用 Graphic 的 ModifyMesh 接口手动指定执行序列不要依赖检视面板的添加顺序。5.3 包体优化变体裁剪时保留 UIEffect 的一组固定资源项目做包体优化时通常会开 Shader 变体裁剪UIEffect 的 Shader 第一次被裁掉就出现第 4 章说的紫红材质。除了把 Shader 塞进 Always Included还有两个针对包体的细节。第一个是噪点贴图。UITransition 做溶解过渡依赖内置的噪点贴图这张图如果被压缩成 DXT 或 ETC 格式溶解边缘会出现明显的色块看起来像毛边。要把它单独加进图集或者放到 StreamingAssets 里以原始格式加载Texture Import 的压缩格式设为 RGBA 无损或给单独的压缩白名单。第二个是变体数量。UIEffect 的 Shader 里如果开了多个混合关键字每个关键字都会生成对应变体包体体积会被成倍放大。建议只保留项目用到的模式比如只保留模糊、色调、溶解三组变体把不用的关键字注释掉或用 Shader 的 multi_compile 指令裁剪。这两个细节配合 Always Included Shaders基本能解决 UI 包体优化里 75% 的特效材质问题。剩下的 25% 是 URP 迁移项目从内置管线换 URP 后UIEffect 的 Shader 需要重新导入并配置 URP 对应的输入这一步没有快捷键只能一个材质一个材质地检查。6. 用像素验收 UIEffect灰度对比和帧预算的最后一招6.1 截图差值用像素说话替代肉眼验收UI 特效的验收不能靠肉眼同一张图在不同显示器上的色彩和亮度差异太大。我的固定流程是特效开启前后各截一张图文件名后缀标 _before 和 _after在 PS 里建两层做差值混合。差值结果里只有你预期加特效的区域显示非零像素其他区域全黑说明效果范围正确如果差值里有大量意外区域说明特效影响了不该影响的内容。亮度层级用灰度通道看。把截图去饱和后如果模糊层和原图灰阶差太小视觉效果会显得脏灰阶差太大又会让界面看起来像两层拼贴。一般灰阶差控制在 20 到 40 之间这个范围人眼看着舒服也不会破坏 UI 的信息优先级。这个方法同时能排查透明边缘和半透明溢出省去后面在真机上反复调参的返工。6.2 帧预算一屏三个特效节点就是红线性能验收用 Frame Debugger 和 Profiler 两件套。UIShiny 这类动态特效一帧的成本主要消耗在 Canvas 顶点重建上。我常用的红线是一屏同时激活的特效节点不超过三个UITransition 动画播完立即禁用组件CapturedImage 数量不超过一个。超过这个预算就去找 UI 框架的设计问题而不是继续压参数。我这个习惯是从一次血泪教训里养成的。当时项目赶版本把一个用 UIEffect 做的扫光拖进了滚动列表还顺手叠了一层 Mask结果就是第 4 章描述的那个样子编辑器正常、真机花屏、内存缓涨。从那以后每次提交 UIEffect 改动我都会补一张灰度截图和一段 Profiler 截图和代码一起进提交说明。截图不好看但至少半年后回看历史版本还能知道当初为什么这么调参数。也希望这一整套流程能帮你在 UIEffect 这个方向上少走弯路把界面观感稳定地打磨上线。本文还有配套的精品资源点击获取