UE4UMG系统入门

最新推荐文章于 2024-07-23 17:10:08 发布

老干妈拌雪梨喂薛博凯

最新推荐文章于 2024-07-23 17:10:08 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/Pizrim/article/details/114988304

版权

UI的创建

如何在屏幕上显示UI

先创建一个UI，内容浏览器里如图找到控件蓝图
在这里插入图片描述
在人物蓝图里面，
蓝图这个样子
这样就简单的把一个UI添加到了屏幕上

添加flip flop这个函数可以进行压T键进行创建移除，从父项移除不仅可以把UI从屏幕移除，还可以把UI从父类中移除。

Canvaspanel(画布)控件及其属性

在这里插入图片描述
感觉中文翻译挺详细的
那个工具提示工具常常用于物品栏的开发
绑定是按帧绑定，用于逻辑处理得到某一个值后返回到里面

Text控件讲解

锚点

锚点决定了UI 在屏幕哪个位置显示,可以进行自行尝试，分别把锚点放到左边右边中间，可以发现区别，因为由控件和锚点的距离决定，把锚点放到中间，这样就会保持到中间

线和点的区别，线是进行一定程度的拉伸，通常使用进度条进行拉伸

对齐

在这里插入图片描述
计算所有距离以这个距离进行计算

外观

在这里插入图片描述
注意添加材质后字体没了，是因为经过ue4的各种渲染后，消失了，其他东西自己理解

UI相应玩家输入以及相应机制

之前在人物蓝图中输入键盘会有一些键盘，但是在控件蓝图里面是没有这个函数的。
控件蓝图中的监听键盘事件的函数是
在图表面板里面函数旁边的重载里面有很多函数
在这里插入图片描述
诺，这个就好了!
最后那个已处理意味着输入流已经完成
但如果单单这样运行是无法在屏幕上输出那个字符串的，我们需要添加焦点，在事件图标里的事件构造里面拖出设置焦距，然后在UI里面的交互里的为可焦距点上对勾，这样我们就实现了在UI面板里面相应玩家输入
在这里插入图片描述
如果有很多字母的？我们可以使用switch，对于text可以先拖出tostring，然后可以拖出switch了

通过对handle和unhandle的多次试验，我们可以得出，输入流先流入UI在流入人物控制器

输入模式和鼠标指针

虚幻引擎里自带三个输入模式的函数
在这里插入图片描述
先讲解第三个

把它连接到人物蓝图里面去，按下T键发现UI和鼠标显示出来了，但注意鼠标应该只显示了一次，再次点击鼠标，鼠标指针就消失了，那应该如何显示鼠标指针呢？
从玩家控制器的返回值里面拖出set show mouse cursor函数把它连上并且勾选就好了
在这里插入图片描述
第一个选项对鼠标没有任何限制
第二个被捕获时（左键单击啊，右键点击屏幕啊之类的），不会让鼠标越过这个边界框
第三个，无论是否捕获，都在锁定
第四个，全屏时锁定。

设置仅输入UI模式，在人物蓝图中连好之后运行。
运行按下T在按下K键上面仅仅显示出UI中print函数的字符串

设置仅输入游戏输入就是游戏不接受UI的输入了

在这里插入图片描述
在UI里面这么写，记得删除人物蓝图里的flip flop，否则会报错。

progressBar与Image控件（进度条和图像控件）

当我们把进度条和文本框重叠在一起时，虽然Zorder都是同一级，但是却发现渲染先后顺序不同，这是因为，如果Zorder属于同一级，那渲染顺序取决于层级面板。
如果想要改变这种，那就改变Zorder，越大的Zorder越靠后渲染，也就是在顶层，越小的Zorder越先渲染，也就是底层。

把进度条的背景设置成UE4的logo，发现好像不对劲
在这里插入图片描述
选择了以盒子绘制，成了一个三成三的框并进行了延伸，把上述调成000就好了

一般绘制成图像即可

进度里面的为边框点上之后，自己可以尝试查看一下，这个常常用于游戏加载过程中的那个动画图！

尺寸，水平与控制窗

把image放入尺寸框后，会发现image会受到尺寸框的影响
在这里插入图片描述
这八个属性中前六个只有在大小到内容启用之后才可以使用
最下面两个意思这是否以1:1的纵横比进行拉伸
size box只能容纳一个子控件

按钮

在这里插入图片描述
这里有一些基础的外观设置，可以对其设置音效等等。
使用以下里面的event操作

这样可以实现最简单的关卡蓝图切换

这里可以设置对鼠标最简单的交互设置

外部图片的导入和设置

导入方式一：拖入导入
导入方式二：点击import
导入方式三：使用资源迁移，请注意，资源迁移迁移的是资源工程文件夹

当我们把图片导入ue4中，会发现图像不一样，是因为默认导入的世界贴图组，如果需要，应该改成UI贴图组，把默认压缩组改成改成2d资源使用，将它作为一个2d资源使用，这样资源就可以正常使用了。

基础UI动画制作与调用

以例子进行说明，创作一个淡入淡出的字幕/
在这里插入图片描述

控件蓝图设计器下端可以进行一些简单动画的实现，创建一个文本，实现淡入淡出，在时间轴里天剑两个关键帧，把不透明度分别调到0和1，打开自动K帧，拖动进度条，就可以看见字幕的淡入淡出，为了方便演示，现在设计一个按钮，点击时播放淡出淡出的动画

在这里插入图片描述
讲解一下播放动画的各个属性

目标在目前而言可以理解为作用于哪一个蓝图，具有多态性
第二个是执行是哪一个动画
Start at Time是执行的开始时间
下面的是播放次数，如果设置为0，那就会无限制循环播放，如果要停止，需要另一个函数stop animation，进行停止
播放模式有三个，注意最先面的pingpong意思是正着播放一段，在返回播放一段。
第三个是播放速率，类似于倍速
最后一个是恢复模式，意味着你的播放完毕后，你的动画所驱动的控件是你播放之后的状态还是你播放前的动态。

实战环节，制作一个状态条

在这里插入图片描述
这是我的最终样子，进行一个最大程度的复刻

在这里插入图片描述
考虑到左边可能会有图片进行导入，这里将修改边界左边的填充设置成150，注意到填充背景与长度的不符，这就是为什么要在覆层里面添加除了进度条之外还要添加image的原因
倾斜效果在变换里的修建可以进行更改
考虑到需要在游戏刚开始时就显示，所以，最后在人物蓝图里面写入添加到视口的蓝图。
在这里插入图片描述

UI中关联数据的几种方式

就以前面创建的状态栏为例，首先先给人物添加这些属性
这里由于时间关系，仅仅制作一个生命值的数据，先给人物添加变量，
下面进行数据关联，数据关联有两种方式，第一种时直接绑定变量，第二种时绑定一个函数
对于第一种直接绑定变量，点击bind，并没有出现一个可供选择的变量，这是因为没有一个变量可以获取的上面，得先获取，小白人蓝图中的变量，把信息传递到HUD面板中
最简单的的方法是
在这里插入图片描述
通过蓝图投射，把最简单的获取玩家角色转化为了小白人蓝图，显然也是需要游戏刚开始时候时就打开这个UMG面板，在小白人蓝图里我们运用的是事件开始运行这一函数，通过ctrl cv我们发现这一函数并不能在UI面板里面使用，保存编译，现在我们就可以在绑定里面发现变量。