Unreal 5 实现UI制作

news2024/12/23 22:33:22

这一篇讲解一下unreal engine里面的内置ui插件UMG，虚幻示意图形界面设计器（Unreal Motion Graphics UI Designer）(UMG) 是虚幻引擎内置的一套ui制作工具，通过它我们能够实现平面ui，场景hud内容
在这里插入图片描述

实现背景图片填充整个屏幕

首先将图片拖入到屏幕，然后设置锚点为全屏
在这里插入图片描述
然后将其它值设置为0 ，这样就可以自动平铺整个平面

设置可视可交互和隐藏

在控件的右侧细节，找到可视性，可以设置自身可视，隐藏，以及交互的设置（包括自身的子类）
在这里插入图片描述

修改颜色

在笔刷里面找到着色，可以将颜色应用到图像。
在这里插入图片描述

制作按钮蓝图

如果ui上面有很多个按钮，正常的制作方式是需要制作一个按钮蓝图，然后再需要使用的地方多次放置按钮蓝图组件去实现。
首先创建一个新的用户组件蓝图，然后尺寸调整成固定大小
在这里插入图片描述
在层级列表拖入一个按钮，然后再拖入一个文本

选择按钮，在右侧找到它的外观

打开普通，将其着色的透明度改成0，按钮将没有了默认颜色

当鼠标悬停上面的效果，我们也可以单独设置

还可以设置鼠标悬停到按钮上面的音效，以及点击的音效
在这里插入图片描述
记得将按钮的轮廓设置为0，如果有轮廓，按钮周围会边缘虚化

在文本这里，我们可以修改文字的字体，大小，颜色，以及增加字体的阴影

添加文本动画，点击动画，选中文本块，添加一个动画，在轨迹里面，将文本节点添加轨道
在这里插入图片描述
选择右侧的轨道，可以增加多种属性

这里我增加了一个变换，变换里面去修改缩放的值

将时间轴拖拽到目标时间，然后去修改缩放的值

动画的使用需要在按钮上面绑定事件，然后在事件中调用

点击后面的+号，会在图表中默认创建对应的事件
在这里插入图片描述
在变量里面找到创建的按钮动画

将变量拖入图表中，然后调用播放动画去播放即可

在未悬停时，我们需要倒序播放，来实现默认，在play Mode那里改成翻转即可，它将从结束位置向开始位置播放

接着将在悬停时要实现修改文本的颜色，那么要先将文本设置为变量，选择文本，将是变量勾选，这样在图表中就可以使用
在这里插入图片描述
在图表中，选择需要修改的节点

选择设置颜色和不透明度，新创建一个颜色设置

因为每个文本上的显示的内容不一样，我们需要实现按钮内容可以在外部修改，创建一个文本变量

细节上设置可编辑实例，生成时公开，这样使用按钮蓝图时，可以在使用时编辑显示的文本内容
在这里插入图片描述
在文本块属性找到文本，选择绑定此文本内容，文本块就可以显示设置的内容

官方不推荐这种方式，官方推荐只绑定一次的事件去设置

这种只运行一次，而且不会每帧去更新文本内容。