腾讯游戏客户端公开课笔记——UMG系统

UE4提供的界面开发系统

• HUD

• Slate （UE4早期版本的UI系统）

  • 缺点：用来“编写”界面布局非常麻烦

• UMG （Unreal Motion Graphics UI Designer）

  • 基于Slate，有图形开发界面（编辑器中）

 

UMG 基本概念

1. 控件 Widget

预先封装好的功能单元：Button、Image

2. UI 蓝图

编写 UI 逻辑

3. 槽 Slot

控件容器

4. 锚点 Anchor

子控件相对位置

5. 对齐点

6. 可见性

• 折叠 （不占用空间）

• 隐藏 （占用空间）

• 不可点击

• 完全显示

7. 渲染变形

渲染变形可对拜访好的空间进行变形而不用更改布局信息，一般适用于不规则的形状（常用作动画）

8. 基本控件

• 按钮 Button

• 复选框 Check Box

• 进度条 Progress Bar

• 图片 Image

• 文字 Text

9. 面板控件 Panel

• 画布面板 Canvas Panel

• 网格面板 Grid Panel

• 水平框 Horizontal Box

• 纵向框 Vertical Box

• 滚动框 Scroll Box

• 控件切换器 Widget Switcher

10. 优化控件

• 无效框 Invalidation Box：对UI进行缓存，提高绘制效率

• 限位框 Retainer Box：不同UI不同渲染频率

 

使用和控制界面

UI蓝图、Lua

 

扩展控件库

C++实现、纯UMG实现

 

内存与性能

内存

• 引用形成

  • 直接摆放在UI的Tree中

  • 变量类型

  • 创建UI时选择的类型

• 解耦

  • 避免在蓝图中直接访问类型中的方法，通过基类、接口调用

  • 不要将各种使用的资源都配置在UI上或者蓝图里

  • 使用弱引用

  • 使用类似MVC的设计模式，独立实现界面的数据、视图以及控制逻辑

性能

• 不用或少用属性绑定

• 尽量不在UI蓝图中实现Tick

• 复杂蓝图逻辑转C++，然后在蓝图中调用C++实现的函数

• 正确设置“隐藏”（Hidden 有消耗 <==> Collapsed 消耗小）

• 无效框：无效框可以缓存UI绘制的中间数据，减少绘制的CPU消耗

• 合理结构提升渲染性能：减少UI层级，从而减少UI绘制过程的递归调用，合理规划UI层级，合并图集，批量渲染以减少 DarwCall