Ue4 UI优化文档整理理解

1.名词解释

User Widget：对应一个用户界面。

Widget Tree：每一个 User Widget 都是存储成树状结构。

Panel Widget：不会渲染出来，用于对 Child Widget 进行布局，如 Canva Panel, Grid Panel, Horizontal Box 等。

Common Widget：用于渲染，会生成到最后的 Draw Elements 中，如 Button, Image, Text 等。

2.渲染流程

在游戏线程（Game Thread），Slate Tick 每一帧会遍历两次 Widget Tree。

Prepass：从下到上遍历树，计算每一个Widget的理想尺寸（Desired Size）。

OnPaint：从上到下遍历树，计算渲染所需的 Draw Elements 。这个过程中，会根据 Common Widget 的类型和参数生成相应的 Vertex Buffer，将 Common Widget 的 Render Transform 计算到 Vertex Buffer 中，并根据 Layer ID 和 Material 等信息进行批次合并。最后一个 User Widget 会生成1个或多个 Draw Element，并将 Draw Elements 传递给渲染线程进行渲染，其中每个 Draw Element 对应一个 Draw Call。

在渲染线程 （Render Thread），Slate 渲染分为两步：

Widget Render：执行 UI 的 RTT，如果使用了 Retainer Box，这里会将 Draw Elements 渲染到 Retainer Box 的 Render Target。

Slate Render：将 Draw Elements 渲染到 Back Buffer，如果使用了 Retainer Box，会将 Retainer Box 对应的 Texture Resource 渲染到 Back Buffer。

3.优化：游戏线程

1.invalidationBox

使用 Invalidation Box 封装 User Widget，从而缓存 Slate Tick 数据，不需要每帧都进行计算。在 Invalidation Box 下的所有 Prepass 和 OnPaint 计算结果都会被缓存下来。如果某个 Child Widget 的渲染信息发生变化，就会通知 Invalidation Box 重新计算一次 Prepass 和 OnPaint 更新缓存信息。

当某个 Widget 的渲染信息变化时，会通知所在的 Invalidation Box 重新缓存 Vertex Buffer。在一个复杂的 User Widget 中，Invalidation Box 频繁缓存整个 Widget Tree 会带来很高的性能开销，有两种方式可以解决这个问题。

解决方法: i) 拆分InvalidationBox

ii)将 Widget 设定成 Is Volatile，这样上层的 Invalidation Box 在缓存时就会排除这个 Widget，该 Widget 每帧都会 Tick 并计算 Prepass 和 OnPaint，但整体 Widget Tree 的缓存不会受到影响。

如果在影响 Draw Element 的属性上使用了 Widget Binding，会导致引擎每帧都要 Tick 查询是否属性发生变化，从而判断是否需要更新 Draw Element，因此应该避免使用 Widget Binding。

Debug: 可以通过 Slate.InvalidationDebugging 查看是否正确地设置了 Invalidation Box 和 Volatile。Slate.AlwaysInvalidate 命令可以强制 Invalidation Box 每帧更新缓存，可以用于测试是否会造成突然的卡顿。如果一个 User Widget 过于复杂，可以拆分成多个 Invalidation Box，将 Widget 按照更新频率的高低放入不同的 Invalidtion Box。

2. 合理设置（Widget Visibility）

Widget 可见性有 5 种：

Visible： 可见、可点击

HitTestInvisible： 可见、当前 Widget 不可点击、所有 Child Widget 不可点击

SelfHitTestInvisible： 可见、当前 Widget 不可点击、不影响 Child Widget

Hidden： 不可见、占用布局空间

Collapsed： 不可见、不占用布局空间

很多 Widget 默认属性是 Visible,需要手动设置成 HitTestInvisible 和 SelfHitTestInvisible。如果大量 Widget 设置成 Visible，那么引擎在点击响应时的效率就会大大下降，这也会增加游戏线程的开销。

Collapsed 不占用布局空间（Layout Space），因此在隐藏后不会进行 Prepass 的计算，性能优于 Hidden。

可以使用 Widget Reflector 帮助检查是否有错误设置的 Visibility 属性

3.Widget Binding

在分析 Volatile 时提到过 Widget Binding 会导致 Volatile 从而降低 UI 性能。另外 Widget Binding 是每帧 Tick 执行，性能比较低。不建议在项目中使用这个功能，建议通过 C++（或蓝图）调用函数的方式传值。

RemoveFromViewport/AddToViewport 会销毁以及重新构建 User Widget，使用 Collapsed/SelfHitTestInvisible 可以得到更好的性能。

另外，在移动平台上建议将蓝图 Tick 中复杂的运算逻辑移动到 C++ 中。

4.优化：渲染线程优化

1.合并批次

CanvasPanel在4.15之前不支持合并。

4.15 增加了对 Canvas Panel 合并批次的支持，开启方式位于 Project Settings 中："Engine->Slate Settings->Constraint Canvas->Explicit Canvas Child ZOrder"。

接着可以通过设定 Canvas Panel 的 Child Widget 的 ZOrder 属性，ZOrder 相同（渲染参数也相同）的会合并批次，比起 Grid Panel 和 Horizontal Box，Canvas Panel 没有额外的布局计算，OnPaint 效率会稍微高一些（游戏线程）。

2.合并贴图

在 UE4 中的 Sprite 很方便地支持合并贴图的编辑和使用

3. Retainer Box

通过合并批次和合并贴图的方式，UI 的 Draw Call 数量可能减少到比较低，但仍然会有很高的像素填充率。

在很多情况下，UI 不需要每帧都渲染，因此可以通过 Retainer Box 缓存渲染结果，每隔几帧更新一次。Retainer Box 的原理就是将 UI 渲染缓存在 Render Target上，再将 Render Target 渲染到屏幕。

i)目前 Retainer Box 需要指定每隔几帧强制更新一次，但某些情况下 User Widget 不需要按照固定频率更新，只会在用户操作（且操作不频繁）时才更新。这种情况下就可以通过扩展 Retainer Box 来支持事件驱动的方式。

实现思路是继承 URetainerBox 和 SRetainerWidget，并在 PaintRetainedContent（在 4.16 之前的版本函数名是 OnTickRetainers）中判断是否有事件触发更新，如果需要更新则调用父类的 PaintRetainedContent，否则 return。

5.UI Bug

释放贴图内存的一个前提是不要在编辑中设置贴图（下图中的 Image 项），而是通过程序进行手动的贴图加载、贴图设置、以及贴图销毁。不在编辑器中设置贴图，可以避免在 CDO（Class Default Object）中引用这个贴图对象。CDO 的引用会使得 SharedPtr 的引用计数至少为1，并且退出应用前不会销毁。

如果在 Editor 中设置了 Image 属性，同时又希望销毁这个贴图，Epic Games 的王弥提供了一个思路，可以在 Cook 阶段解除 UImage 和 UTexture 的引用关系，从而这个 User Widget 的 CDO 不会引用到 UTexture。