文章目录
- 几个概念
- 创建一个UI蓝图
- 添加UI
- 获取UI的引用 切换设计器和UI蓝图
- 将UI添加到游戏场景
- 锚点
- 轴点
- slot
- SizeToContent
- 三种UI数据更新方式
- 函数绑定
- 属性绑定
- 事件绑定
- 九宫格分割图片
几个概念
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数据更新方式
函数绑定
对于UI中可变更的部分,例如数值,文本,点击后边的绑定按钮,会自动在事件蓝图中创建一个函数,函数的返回值会自动更行到UI上,函数将每帧调用
例如这里调用了一个GethealthPercent的函数,来获取血量的百分比
函数内部实现,Player是自己创建的变量
属性绑定
属性绑定和函数绑定类似,也是每帧调用,区别在于函数绑定是让UI同步函数的返回值,属性绑定是让UI同步属性字段的值
要求属性的数据类型必须和UI所需要的值相同
点开绑定,选择一个属性
以血量为例,虽然player中有当前血量,但是health的类型是float,不是string,所以不能直接用,我们需要在UI蓝图里新建要给HealthText的属性,类型为text或string,然后在UI蓝图的tcik事件里每帧转换数据类型给HealthText,最后再给UI绑定属性
事件绑定
参考这个
九宫格分割图片
参考unity的Slice模式的图片,用于保持背景图片边框在拉伸时不会变化
选择图片,将他的绘制为由图像改为盒体,并设置边缘