Done is better than perfect

0%

HUD实现

设计需求

  1. 解决大量(1000个)HUD创建,更新的性能问题

    • 创建1000个的开销控制在3ms
    • 更新1000个的开销控制在2ms
  2. 有多种HUD的排序策略

    • 通过x,y,z排序
    • 通过指定顺序
    • 通过函数排序
  3. 支持动静分离

  4. 支持三种控件,Image, Text和Slider

  5. 需要支持动态图集(可选)

  6. 文字支持描边和投影(可选)

  7. 支持布局器(可选)

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: 布局元素属性定义

核心工作流程

  1. Canvas更新流程:
  • 注册需要重建的组件到CanvasUpdateRegistry
  • 执行PerformUpdate处理重建请求
  • 调用Layout、Graphic重建流程
  1. UI元素渲染流程:
  • Graphic组件标记重建
  • CanvasUpdateRegistry收集重建请求
  • 执行重建生成Mesh数据
  • CanvasRenderer将Mesh提交到渲染管线
  1. 布局计算流程:
  • 自顶向下遍历布局树收集LayoutElement信息
  • 计算每个元素所需尺寸
  • 自底向上分配空间确定最终布局

具体流程可以参考UGUI源码

HUD设计与实现