当前位置：首页 > article >正文

UE5学习笔记 FPS游戏制作26 UE中的UI

article 2026/2/14 21:12:46

文章目录

- 几个概念
- 创建一个UI蓝图
- 添加UI
- 获取UI的引用切换设计器和UI蓝图
- 将UI添加到游戏场景
- 锚点
- 轴点
- slot
- SizeToContent
- 三种UI数据更新方式(Text、Image)
- - 函数绑定
  - 属性绑定
  - 事件绑定
- 九宫格分割图片
- 按钮
- - 设置图片
  - 绑定按下事件
- 下拉框
- - 创建
  - 添加数据
  - 修改样式
  - 常用函数
- 滚动框
- - 创建
  - 添加数据
  - 修改样式
  - - 样式
    - 条样式
    - 滚动

几个概念

UMG：UE的UI编辑器
slate UI: UE的UI的编辑语言

创建一个UI蓝图

右键用户界面/控件蓝图，选择UserWidget父类
在这里插入图片描述

添加UI

添加UI前先添加一个画布，拖进场景里或者拖进层级里均可

在这里插入图片描述

在这里插入图片描述
然后需要什么UI直接往场景里拖就可以，也可以拖到别的UI上成为子级UI
例如先拖一个按钮，再拖一个text到按钮上，这样text自动成为按钮的子物体

获取UI的引用切换设计器和UI蓝图

选中一个UI，勾选右上角是变量
在这里插入图片描述
点击右上角切换到事件图表

在变量里就可以看到UI

注意变量的名字是这里的名字，而不是层级面板里的名字

将UI添加到游戏场景

在GameModel里，创建UI并添加到游戏
在这里插入图片描述

锚点

和Unity的锚点是一样的，锚点是可以直接拖得
在这里插入图片描述

在这里插入图片描述

轴点

和untiy的0.5,0.5不同，UE的轴点默认对齐是0，0，位置是UI的左上角
这是轴点为0，0，位置也为0，0的情况，可以看到UI的左上角和锚点对齐
在这里插入图片描述
我们把轴点改为0.5,0.5，位置仍然是0，0，现在可以看到UI的中心和锚点对齐

slot

我们创建的按钮的对齐方式里有一个插槽属性，后边显示为画布面板槽，这是因为它的父物体是画布，父物体不同，他们的插槽的可选内容是不同的
在这里插入图片描述
这是按钮下的一个text，它的slot是按钮槽，而不是画布槽

SizeToContent

勾选后尺寸属性失去作用，完全由填充图片或者子级文本长度来控制大小
在这里插入图片描述

三种UI数据更新方式(Text、Image)

函数绑定

对于UI中可变更的部分，例如数值，文本，点击后边的绑定按钮，会自动在事件蓝图中创建一个函数，函数的返回值会自动更行到UI上，函数将每帧调用
在这里插入图片描述
例如这里调用了一个GethealthPercent的函数，来获取血量的百分比

函数内部实现，Player是自己创建的变量

属性绑定

属性绑定和函数绑定类似，也是每帧调用，区别在于函数绑定是让UI同步函数的返回值，属性绑定是让UI同步属性字段的值
要求属性的数据类型必须和UI所需要的值相同

点开绑定，选择一个属性
以血量为例，虽然player中有当前血量，但是health的类型是float，不是string，所以不能直接用，我们需要在UI蓝图里新建要给HealthText的属性，类型为text或string,然后在UI蓝图的tcik事件里每帧转换数据类型给HealthText，最后再给UI绑定属性
在这里插入图片描述