虚幻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.讲技能拖出删除后，技能仍能播放