UE4 UI性能优化

ainatipen

UMG和Slate

概述

• SWidget在SlateCore模块中，控件的绘制、点击以及大部分控件逻辑都集中在这里面
  
• UWidget在UMG模块中，UWidget持有SWidget，继承UObject,有UObject的GC系统，支持反射和蓝图功能
  
• User Widget：对应一个用户界面
  
• Widget Tree：每一个 User Widget 都是存储成树状结构
  
• Panel Widget：不会渲染出来，用于Child Widget 布局，如 Canva Panel, Grid Panel, Horizontal Box 等
  
• Common Widget：用于渲染，会生成到最后的 Draw Elements 中，如 Button, Image, Text 等
  

Salte渲染流程

UI性能分析

stat slate

• Total Slate Tick Time：GameThread FSlateApplication::Tick总时间
  
• SlatePrepass： DrawPrepass自底向上计算Size时间 SWidget::SlatePrepass
  
• Draw Window And Children Time：自顶向下tickwidget paintUI的总时间
  
• Game UI Paint : TickPaint子Widget的时间 SViewport::OnPaint
  
• Tick Widgets：SWidget:Tick时间
  
• Add Elements Time：简单裁剪、生成批数据SlateRenderBatch、顶点数据的总时间
  
• Slate RT: Rendering RT中合批更新顶点数据BuildRenderingBuffers生成RHICommand的总时间
  
• Update Buffers RT： 合批和更新顶点数据的时间 BuildRenderingBuffers
  
• Slate RT: Draw Batches RT绘制生成RHICommand的时间 FSlateRHIRenderingPolicy::DrawElements
  
• Num Layers : 总的批次层级
  
• Num Batches： 总的批次
  
• Num Vertices： FSlateVertexArray 顶点数量
  
• Elements：总的element的数量
  
• Invalidation: Recached Elements：重新cached的element数量
  

Slate.Showbatching




Slate.Showbatching 0/1：关闭或打开批次颜色，根据颜色看当前批次

Slate.showOverDraw




Slate.showOverDraw 0/1：关闭或打开OverDraw颜色，越白OverDraw越厉害

Slate.ShowClipping




Slate.ShowClipping 0/1： 显示裁剪

Slate.InvalidationDebugging

• 白线框：Widget has a tick function. 动画或者需要tick的节点
  
• 绿线框：Widget has an active timer that needs to update 当前Widget有激活中的Timer需要更
  
• 蓝线框：Needs repaint because the widget is volatile。每帧tick
  
• 黄色框:  Widget was invalidated.当前Widget需要重绘,. 黄色到红色渐变，越接近红色，越是最近发生重绘
  
• 红线框：说明这个Widget一直被刷新
  

renderdoc

• renderdoc.CaptureAllActivity 1
  
• Renderdoc.CaptureFrame
  

Slate Insights

4.26版本， Slate Insights插件扩展了Unreal Insights
用法

• 关卡编辑器->运行>Play in Standalone Game，-trace=slate输入到Additional Launch Parameters
  
• 主动运行模式（Active Play Mode）设置为独立游戏（Standalone Game）
  
• 启动unreal insights打开Slate Frame View（Slate帧视图）选项卡
  

说明
Invalidation Trace Flags（无效追踪标记）区域报告控件（Widget）信息，数量无效原因

• L布局标记。True表示将会更改控件的所需大小。
  
• P绘制标记。True表示控件需要重新绘制，但不会影响其大小。
  
• U易变标记。True表示控件易变性发生了变化。
  
• C子顺序标记。True表示已添加或移除子项，暗示存在布局。
  
• R渲染转换标记。True表示控件渲染转换发生了变化。
  
• V可视性标记。True表示控件可视性发生了变化，暗示存在布局。
  

Update Trace Flags（更新追踪标记）区域报告控件（Widget）信息，包括相应的数量以及控件更新的原因

• UTick标记。True表示控件已更新。
  
• T活跃定时器更新标记。True表示控件具有活跃定时器。
  
• P重新绘制标记。True表示控件受到污染，将会重新绘制。
  
• V易变标记。True表示控件易变，已重新绘制。
  

优化方案

合批

合图，开启CanvasPanel开启Explicit Canvas Child ZOrder优化，其中的Zorder要相等
合批的注意事项非常重要：
InvalidationBox优化

RetainerBox优化

可见性

设置合适的可见性

• Widget Visibility     是否可见    点击测试
  
• Visible                     可见           可点击
  
• HItTestInvisible       可见           当前控件子控件都不可点击
  
• SelfHitTestInvisible 可见           当前控件不可点，不影响子控件
  
• Hidden                   不可见        占据布局控件
  
• Collapsed                不可见       不占据布局控件
  

注意事项

• Widget Binding会每帧Tick执行，会导致对应Widget被放入Volatile List， 少用
  
• 两个InvalidationBox中的内容不能合批
  
• SCompoundWidget会使LayerID+1打断合批