文章目录
- 几个概念
- 创建一个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绑定属性
事件绑定
参考这个
九宫格分割图片
参考unity的Slice模式的图片,用于保持背景图片边框在拉伸时不会变化
选择图片,将他的绘制为由图像改为盒体,并设置边缘
按钮
设置图片
需要为普通,悬停,按压分别设置样式,可以用同一张图片改颜色,但是也要改3遍
绑定按下事件
设计界面,选中按钮,右侧细节面板,最下边
事件面板,选中按钮的引用,左侧细节面板,最下边
下拉框
创建
在输入栏下
添加数据
修改样式
列表项的高度
颜色和图片填充
常用函数
拖一个引用出来,输入中文只能输入"组合框",英文只能输入"combo box"
列出来的就是所有的引用
常用返回text的内容,或者索引
滚动框
类似Untiy的Scroll view
创建
添加数据
手动添加,直接添加其他UI模板即可(就是我们自己做的UI蓝图,在UI的"用户创建"栏目里)
可以通过add Child节点来添加其他控件进来
修改样式
样式
条厚度:没用
顶部阴影笔刷:这种阴影兄啊过,可以通过图像大小为0来隐藏,注意他的缩放方式非常特殊,还没有找到规律
条样式
水平背景图:水平滚动时滚动条的底部的图
垂直顶部插槽图像:垂直滚动时,滚动条上半部分的背景图,这个功能和垂直背景图是有一部分冲突的
正常的缩略图:滚动条的图片
厚度:没用,不是滚动条的宽度
滚动
朝向:水平滚还是竖直滚
滚动条厚度:滚动条的宽度,根据滚动方向不同,需要分别设置X或Y