设计需求
解决大量(1000个)HUD创建,更新的性能问题
- 创建1000个的开销控制在3ms
- 更新1000个的开销控制在2ms
有多种HUD的排序策略
- 通过x,y,z排序
- 通过指定顺序
- 通过函数排序
支持动静分离
支持三种控件,Image, Text和Slider
需要支持动态图集(可选)
文字支持描边和投影(可选)
支持布局器(可选)
UGUI分析
UGUI的核心类主要包括:
Canvas相关
- Canvas: UI渲染的根节点,负责管理UI的渲染顺序、渲染模式等
- CanvasRenderer: CanvasRenderer的具体作用是将UI元素转换为可渲染的网格数据,并将其提交到渲染管线中。Unity底层会对这些Quad进行排序和合并,以提高渲染效率,而不是每个UI元素单独渲染。
- CanvasUpdateRegistry: 管理UI元素的重建和更新
- CanvasScaler: 用于控制UI的缩放
基础组件
- Graphic: 所有可视UI元素的基类,提供基础的渲染功能
- MaskableGraphic: 支持遮罩功能的Graphic基类
- Image: 图片渲染组件
- RawImage: 原始图片渲染组件
- Text: 文本渲染组件
交互组件
- Selectable: 所有可交互UI元素的基类
- Button: 按钮组件
- Toggle: 开关组件
- Slider: 滑动条组件
- Scrollbar: 滚动条组件
- ScrollRect: 滚动视图组件
布局系统
- LayoutGroup: 布局组基类
- HorizontalLayoutGroup: 水平布局组件
- VerticalLayoutGroup: 垂直布局组件
- GridLayoutGroup: 网格布局组件
- LayoutElement: 布局元素属性定义
核心工作流程
- Canvas更新流程:
- 注册需要重建的组件到CanvasUpdateRegistry
- 执行PerformUpdate处理重建请求
- 调用Layout、Graphic重建流程
- UI元素渲染流程:
- Graphic组件标记重建
- CanvasUpdateRegistry收集重建请求
- 执行重建生成Mesh数据
- CanvasRenderer将Mesh提交到渲染管线
- 布局计算流程:
- 自顶向下遍历布局树收集LayoutElement信息
- 计算每个元素所需尺寸
- 自底向上分配空间确定最终布局
具体流程可以参考UGUI源码