虚幻5|技能栏UI优化(3)——优化技能UI并实现显示背景UI,实现技能界面设计,实现技能栏的删除和添加

实现技能栏添加:将技能界面里的技能拖到技能栏格子

一.调整,在拖出技能的时候,还会有边框

1.打开拖拽的技能格子UI

除了技能按钮,下面的子级都放到垂直框的子级,然后删除技能按钮

2.将垂直框替换成包裹框

你会发现有点屏闪

子级问题,展开包裹框,改成下图即可

结果,运行一下

二.设计UI并显示鼠标时,同时显示背景UI

1.打开Player_Hub UI

添加一个边界,命名为背景,勾选为变量

锚点选择最后一个填充

设置ZOrder为-1,颜色及其透明度

设置可视性为隐藏,等会到角色蓝图编译显示鼠标的蓝图时,需要将这边界显示出来

2.打开主角的角色蓝图,找到之前显示鼠标的事件位置,我的是Alt键

运行尝试一下

三.将技能图标拖拽到背景上,并直接删除技能图标

1.打开Player_Hud的图表

函数重载一个放置时,On Drog

2.打开On Drog函数重载,编辑蓝图

运行,测试一下,按Alt显示背景把技能图标移出,即可删除技能

三.添加技能界面

1.添加一个控件蓝图,用户界面UI,命名为技能界面

2.打开技能界面UI

添加一个边界

细节栏,设置着色和不透明度

添加一个尺寸框作边界子级

选中尺寸框,右侧细节栏,设置如下

屏幕上所需不要忘了

3.再添加三个层级,分别是垂直框作尺寸框的子级,边界作垂直框的子级,文本作边界的子级

给边界设置一下

设置文本块

结果张这样,当然你也可以选择你喜欢的样子做

4.打开技能结构,添加两个变量

技能介绍,变量文本;消耗量,变量整数

5.打开技能表数据

填写技能介绍和消耗量

6.打开技能界面,添加统一网格面板,作垂直框的子级

命名为技能列表,勾选变量

打开图表

添加一个数组变量,技能列表数组,变量类型是技能结构,并编写蓝图

数组不要忘

为了能够使用技能列表数组里的东西,就需要用到控件

7.创建一个控件蓝图UI,命名为技能列表格子

打开后创建两个层级

点击尺寸框,右侧细节栏设置,注意屏幕上所需要选

点击边界,细节设置如下

添加垂直框和水平框,用于盛放技能的名字和介绍

在水平框里添加两个同级的图像和文本,分别命名为技能图标和技能名字,并都勾选为变量

再给垂直框添加两个文本块,分别命名为技能名字和消耗量,都要勾选为变量

我们按自己所需对垂直框和水平框的这些子级,设置调整,按自己所需调整就行,如果你不调也许,这样会不太好看

四.创建绑定

1.选中技能图标,给其创建一个绑定

打开后,创建一个变量,类型为技能结构,命名为技能结构,并编写以下蓝图

2.打开设计器,在层级里选中技能名字,创建一个绑定

打开后

编辑如下

3.打开设计器,选中层级里的技能内容,再创建一个绑定

打开后,编辑如下

4.打开设计器,选中层级里的消耗量文本,右侧细节栏创建一个绑定

打开后,编辑如下

五.类似技能栏格子的设计,设计技能界面里的格子列行

1.打开技能界面UI,打开图表,编辑如下

设计好之后

2.我们需要把这个技能界面,显示在我们的界面上,需要把技能界面放到Player_Hud的画布画板上

打开Player_Hud的UI,用户创建

3.发现是填充的,就需要把层级里的技能界面放到画布画板之内

下面这里已经放进去了

4.选中这个技能界面,右侧细节,勾选大小到内容

这样,技能界面就能正常的显示在画布画板上了

运行一下

可以看到,直接显示在界面上

为了让他不出现,跟上面最开始的背景,一样,先设置为隐藏

5.打开Player_Hud的UI,选中技能界面,右侧细节栏,找到行为,设置可视性为隐藏

6.设置技能界面在游戏界面的显示和隐藏,跟最上面开头设置背景一样

运行,尝试显示鼠标,从而显示技能界面

为了能拖拽技能界面的内容,下面内容

六.拖拽技能界面里的内容

1.打开技能列表格子UI,打开图表

添加一个函数重载,按下鼠标按钮时

编辑以下蓝图

2.再添加一个函数重载,按下鼠标按钮预览时,并编辑以下蓝图

3.再添加一个函数重载,发现拖动时 On Drag Detected

并编辑以下蓝图

运行测试一下

但是,拖到技能栏格子位置,不能添加技能,或者更换技能

这就需要回到技能栏格子UI进行设置

七.将技能界面的技能拖到技能栏格子位置,添加技能,或者更换技能,跟刷新格子有关联

1.打开技能栏格子UI,打开图标,打开函数重载On Drag

编辑以下蓝图

这里如果你跟我一样创建技能栏格子控件出现了技能图标2D,技能名字和技能分类的结点

如果存在这些结点会导致创建控件的内容为空,如何取消这些结点呢?

方法一:我们需要在左侧位置,将对应结点的变量的可编辑和生成时公开都取选,然后再刷新这个创建控件

为什么要在这里取选这些变量,其他地方也创建了一样名称的变量耶?

因为我们创建控件,引用的Class就是技能栏格子,干好我们还在技能栏格子UI进行这些设计,在同一个地方。

如果方法一不行,就用方法二

方法二:只需要从cast to 再链接一个技能,将其分割为引脚,再对应链接即可

好的,继续编辑

运行编译一下,尝试把技能栏格子里的技能拖出去删除,再把技能界面的技能图标拖进技能栏格子,使用,释放技能

我的是成功的

但我们发现,1.将另一个技能拖进去,还是会播放上一个技能

2.讲技能拖出删除后,技能仍能播放

相关推荐
结衣结衣.1 小时前
Linux——进程状态
linux·运维·服务器·c语言·笔记·学习
云边有个稻草人1 小时前
【刷题】Day4--密码检查
开发语言·数据结构·笔记·算法
居安思危_Ho1 小时前
【Android笔记】Android Studio打包 提示Invalid keystore format
android·笔记·gradle·android studio·android 打包
sml_54212 小时前
【笔记】1.2 弹性变形
笔记
~在杰难逃~2 小时前
Day15笔记-函数返回值&函数的封装&匿名函数
开发语言·笔记·python·pycharm·数据分析
少杰是小白2 小时前
计算机二级自学笔记(程序题1部分)
c语言·笔记
charon87782 小时前
虚幻引擎 | (类恐鬼症)玩家和NPC语音聊天(中)
游戏引擎·虚幻
图像处理大大大大大牛啊2 小时前
使用mingw64 编译 QT开发流程
开发语言·c++·qt·命令模式
爱上杨小厨2 小时前
MFC实现对话框与控件的自适应调节
c++·mfc
WPG大大通3 小时前
新能源汽车BMS 学习笔记篇—AFE 菊花链通信中电容隔离 & 电感隔离的使用
网络·经验分享·笔记·汽车·新能源·bms