目录
一、什么是 UI 系统？
UI 全称 User Interface (用户界面)。开始菜单界面、设置界面、背包界面等等都属于 UI 界面。
【扩展】UMG 全称 Unreal Motion Graphics UI Designer (虚幻示意图形界面设计器)，用于实现游戏中的 HUD 元素和前端菜单等等 UI 功能。
二、创建 UI 控件蓝图
三、控件介绍
3.1 通用控件介绍
3.1.1 图像
3.1.2 文本
3.1.3 按钮(可交互)
3.1.4 滑条(可交互)
常用的事件：【值变更时】
3.1.5 进度条
3.1.6 勾选框(可交互)
- 勾选框：添加文本子控件
- 切换按键：一般不添加文本子控件
3.1.7 多格式文本块
- 创建数据表格，选择 RichTextStyleRow。
- 在数据表格中添加数据，第一行名为 Default，其余行设置其他字体样式。注意：经过测试，需要选择字体族系才能生效。
- 在多格式文本块中选择对应的数据表格。
- 在文本中使用 <字体样式名称> 要修改的文本 </>。
3.1.8 边界
边界控件是个只能包含一个子控件的容器，可以用来做元素的背景。
当给边界控件添加子控件后，子控件将不具备自由设置锚点、位置、尺寸等特性。
3.1.9 自定义控件
3.1.10 命名插槽
当用户创建的 UI 成为其他 UI 的子控件时，默认是不能拥有子控件的。但我们可以事先给用户创建的 UI 添加命名插槽，这样就可以拥有子控件。
3.2 输入控件介绍
3.2.1 文本框(可交互)
用于给用户提供输入文本的控件。
注：文本框（多行） 可以用于给用户输入多行文本，按住 Enter 键可以实现换行。
3.2.2 组合框(可交互)
可以用于实现下拉选项。
3.3 面板控件介绍
面板控件下的子控件是没有锚点、尺寸等属性的，所以只能通过 填充和对齐 来调整位置。
补充：其实上方说的尺寸指的是控件细节栏中 尺寸X、尺寸Y，但比如说文本、图像等子控件，我们实际上是可以调整它的尺寸的。统一网格面板、网格面板例外。
3.3.1 覆层
可以实现多个子控件的堆叠。
3.3.2 包裹框
可以实现多个子控件的排列，有自动换行功能。
- 可以通过 内部插槽填充 设置子控件之间的间距。
- 可以通过 包裹尺寸 设置包裹框的实际宽度。
注：其实包裹框是有锚点、尺寸等属性的，但是当它放在覆层下时，这些属性会失效，所以才会通过 包裹尺寸 来设置。
3.3.3 控件切换器
用于显示指定索引（从 0 开始）的子元素。
3.3.4 统一网格面板
可以实现多个子控件的排列，每个子控件的尺寸是相同的，默认所有子控件都堆叠在一起，可以通过调节上下左右控制元素位置。
- 可以通过 插槽填充 设置子控件之间的间距。
- 统一网格面板下的子控件调整尺寸大小是无效的。
3.3.5 网格面板
可以实现多个子控件的排列，每个子控件的尺寸是可以调整的，默认所有子控件都堆叠在一起，可以通过调节上下左右控制元素位置。
- 可以通过 插槽填充 设置子控件之间的间距。
- 网格面板下的子控件调整尺寸大小是无效的，需要通过网格面板中 填充规则 来修改。
3.3.6 水平框
用于在水平方向管理多个子控件，子控件的类型可以不同，位置可以左右切换。
7.3 登陆界面搭建中部分模块使用水平框演示。
3.3.7 垂直框
用于在垂直方向管理多个子控件，子控件的类型可以不同，位置可以上下切换。
略。
3.3.8 尺寸框
- 用于设置子控件尺寸，只能有一个子控件
- 需要勾选 大小到内容，子布局 属性才能生效。
3.3.9 滚动框
当子控件的总宽度或总高度超出滚动框时，超出部分隐藏，显示滚动条。
四、动态修改控件的值
4.1 通过直接获取控件变量修改
选择你要修改的控件，勾选【是变量】选项
4.2 通过创建绑定修改
创建绑定。
系统自动生成一个绑定的相关函数。
在事件构造的地方直接设置与控件绑定的变量的值。
注：也可以直接与已有变量进行绑定。
五、UI动画基础
5.1 为控件(一般为面板控件)创建动画
5.2 实现播放动画
但其实我们点击按钮时并不会播放缩放动画，原因出在哪里呢？如下所示：
六、将 UI 控件蓝图渲染到关卡
注：添加显示鼠标指针操作
七、小案例
7.1 搭建开始菜单
需求：添加背景图片、添加标题、添加开始/退出游戏按钮
7.2 搭建Loadding界面
需求：添加背景图片、添加描述文本、添加进度条
7.3 登陆界面搭建
需求：搭建背景、标题、用户名和密码、创建用户信息结构体、给用户名和密码添加输入完成事件、添加登录按钮事件
7.4 面板切换
添加按钮事件并且播放动画。
但是上方这样简单的写法存在bug，我切换动画的时候，原有动画不会消失。
7.5 背包系统
- 搭建背包 UI 界面
- 搭建背包物品界面
- 定义背包物品数据
- 实现背包拾取功能
补充一下，函数输出为 UI_knapsack_item 类型。
注意：这里也用到了跨蓝图通信，方式与我之前总结的略有不同。
扫一扫
5811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
