去年Q3，我接手了一个已经上线三个月的SLG手游项目。DAU稳定在500万左右，数据看着漂亮，但后台每天收到上千条投诉——「主城界面滑动像幻灯片」「打开背包手机能煎鸡蛋」。项目组之前的UI是用UE5的Widget Blueprint搭的，美术同学拖拖拽拽做了三百多个控件，功能全有，就是卡。我花了六周时间做了一轮彻底的UI架构重构，包体没变，帧率从平均28帧拉到了58帧，发热降低了40%。这篇文章，就是那次「救火」的完整复盘。
如果你也在用UMG（Unreal Motion Graphics，UE5的UI系统）做项目，或者正准备从Unity的UGUI转过来，这篇复盘里的每一个坑，你可能都会踩一遍。我会把当时怎么想的、怎么试错的、最后怎么解决的，原原本本讲清楚。
一、需求分析：美术想要的「丝滑」，到底卡在哪？
项目是典型的SLG主城+养成+战斗的框架。UI层大概分为：HUD（常驻信息层）、主城功能面板、二级弹窗（背包、英雄、商城）、飘字系统、以及战斗内的技能指示器。问题最严重的是主城界面——美术同学为了效果，在一个Canvas Panel里塞了超过120个Image控件，每个都带半透明叠加，还有十几个用Widget Animation做的循环呼吸光效。
我先做了三件事：抓帧、看Draw Call、读Stat命令。用stat startfile抓了30秒的滑动操作，再用Unreal Insights打开，结果触目惊心：单帧UI的Draw Call峰值到了217个，Slate（UE5的底层UI框架）的Tick时间占了12ms。这意味着光UI就把16.6ms的帧预算吃掉了一大半，GPU那边因为半透明Overdraw，压力也巨大。
技巧提示：很多人只看
stat fps，但排查UI性能一定要用stat slate和stat umg（需在引擎里开启），前者看Slate层的耗时，后者看Widget的Tick和Paint开销。Unreal Insights里的Slate Trace是金矿。
二、技术选型：为什么我没直接换Coherent或者Noesis？
当时团队讨论过要不要引入第三方UI中间件。我的判断是：不换。原因有三：第一，项目已经上线，换UI框架等于重做所有界面，工期不允许；第二，UMG的底层Slate其实性能上限很高，问题出在使用方式上；第三，UE5.1之后UMG加入了Invalidation Box和Retainer Box的优化路径，只要用对，完全能扛住。事实证明这个判断是对的。
但选型上我做了一个关键决策：把UI按「静态层」和「动态层」彻底分离。静态层用Invalidation Box包裹，只画一次；动态层才允许每帧更新。这个思路后面会详细讲。
三、踩坑实录：我们犯过的五个致命错误
坑1：滥用Widget Animation做循环动效
美术同学喜欢用Widget Animation做呼吸光、流光扫过。问题是，Widget Animation在UMG里是每帧驱动Slate属性更新的，一个循环动画会让整个Widget树标记为Dirty。120个控件里有20个带循环动画，等于每帧都在重绘整棵树。解决方案：把循环动效全部换成Material驱动的UV动画，在Image的材质里用Time节点做偏移，Slate层完全不动。这一项就省了6ms。
坑2：Overlay嵌套地狱
为了布局方便，美术用了大量Overlay和SizeBox嵌套，最深的地方有7层。Slate的布局计算是递归的，每层都要做Measure和Arrange。我后来强制规定：布局层级不超过4层，能用Canvas Panel定位的绝不用Overlay套。重写后布局耗时从3.2ms降到0.8ms。
坑3：每个控件都勾选「Is Variable」
这个坑特别隐蔽。蓝图里勾选Is Variable会让控件在Widget Tree里注册为可引用变量，但也会增加蓝图编译和GC的压力。三百多个控件全勾上，蓝图编译一次要40秒。清理后只保留真正需要引用的，编译降到8秒。
坑4：不用Invalidation Box
这是最大的性能杀手。UMG默认每帧重绘所有Widget，但大部分UI（比如主城的背景图、静态文字）根本不会变。用Invalidation Box包裹后，Slate会缓存这些控件的绘制指令，只在标记Invalidate时才重画。注意：Invalidation Box里的控件不能有每帧变化的属性，否则会失效。
坑5：字体和材质没做共享
每个Text控件如果用了不同的字体资产实例，Slate会为每个创建独立的Font Proxy。我们统一了字体资产，材质也做了Material Instance共享。Draw Call从217降到了89。
注意事项：Invalidation Box和Retainer Box的区别——Invalidation Box缓存Slate绘制指令，Retainer Box把整个子树渲染到Render Target。前者适合静态UI，后者适合需要整体做后处理（比如模糊）的UI。别用混了。
四、核心重构方案：三层架构落地
我最终把UI重构为三层：
- Static Layer（静态层）：用Invalidation Box包裹，包含所有不变化的背景、边框、静态文字。只在界面打开时构建一次。
- Dynamic Layer（动态层）：每帧可能变化的数值、进度条、动画图标。用Retainer Box做局部缓存，降低重绘范围。
- Overlay Layer（叠加层）：飘字、提示、战斗指示器。独立于主UI树，用单独的Widget管理，避免污染主树的Dirty标记。
这个架构的核心思想是「脏标记隔离」——让变化的部分最小化，让不变的部分彻底静止。Slate的Invalidation机制本质上是脏标记系统，理解这一点，优化就有方向了。
另外，数据绑定我全部改成了手动刷新，放弃了Property Binding。因为Property Binding每帧都会执行Getter函数，哪怕值没变。手动在数据变化时调用SetText或SetPercent，性能可控得多。
| 优化项 | 优化前 | 优化后 | 收益 |
|---|---|---|---|
| UI Draw Call | 217 | 89 | ↓59% |
| Slate Tick耗时 | 12ms | 3.5ms | ↓71% |
| 平均帧率 | 28fps | 58fps | ↑107% |
| 设备温度 | 45°C | 38°C | ↓7°C |
五、交付与复盘：那些没写进文档的经验
重构上线后，崩溃率没变，但用户评分从3.2涨到了4.6。团队后来把这次经验沉淀成了《UMG开发规范》，我挑几条最重要的：
- 任何超过50个控件的界面，必须做Invalidation Box分层。
- 禁止在Widget Animation里做无限循环，动效走材质。
- Property Binding只用于低频更新的数据，高频数据手动Set。
- 每个界面打开时用
stat slate过一遍，Tick超过5ms打回重做。
最后说一句掏心窝的话：UMG不是性能差，是太灵活，灵活到容易写出灾难。理解Slate的脏标记和布局机制，比背一百个优化技巧都有用。
关于火星人教育
这次项目复盘里的很多底层思路，其实和我平时在火星人教育教学时反复强调的一样——懂原理，才能做优化。火星人教育创办24年来，一直专注数字艺术与AIGC实战职业技能培训，开设的课程包括AI漫剧创作、AIGC视觉设计、UE5游戏特效、室内全屋定制、MAYA三维动画、C4D动态设计、工业设计、NUKE影视后期、摄影摄像实训。我们在北京、深圳双校区开设线下面授班，面向美术生、在校大学生及意向转行的职场人群，以项目化实训教学，夯实专业技能，助力就业与职业提升。如果你也想做出像这样经得起500万DAU考验的UI系统，欢迎来聊聊。咨询电话：010-65918670。
评论(0)