虚幻5技能栏UI优化教程：从拖拽到显示背景UI的完整实现

虚幻5技能栏UI优化教程：从拖拽到显示背景UI的完整实现

引用

CSDN

1.

https://blog.csdn.net/djh7758258520184/article/details/141713856

这是一篇关于虚幻引擎5中技能栏UI优化的详细教程，主要介绍了如何实现技能的添加、删除以及拖拽功能。文章内容详尽，包含了具体的步骤和蓝图节点的截图，对于游戏开发人员来说具有较高的参考价值。但需要注意的是，文章发布于2024年8月，虚幻引擎的版本和功能可能已经更新，部分内容可能已经过时。

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

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

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. 打开技能界面，添加统一网格面板，作垂直框的子级
   命名为技能列表，勾选变量
   打开图表
   添加一个数组变量，技能列表数组，变量类型是技能结构，并编写蓝图
   数组不要忘
   为了能够使用技能列表数组里的东西，就需要用到控件

五. 创建绑定

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 Drog
   编辑以下蓝图
   这里如果你跟我一样创建技能栏格子控件出现了技能图标2D，技能名字和技能分类的结点
   如果存在这些结点会导致创建控件的内容为空，如何取消这些结点呢？
   方法一：我们需要在左侧位置，将对应结点的变量的可编辑和生成时公开都取选，然后再刷新这个创建控件
   为什么要在这里取选这些变量，其他地方也创建了一样名称的变量耶？
   因为我们创建控件，引用的Class就是技能栏格子，干好我们还在技能栏格子UI进行这些设计，在同一个地方。
   如果方法一不行，就用方法二
   方法二：只需要从cast to 再链接一个技能，将其分割为引脚，再对应链接即可
   好的，继续编辑
   运行编译一下，尝试把技能栏格子里的技能拖出去删除，再把技能界面的技能图标拖进技能栏格子，使用，释放技能
   我的是成功的
   但我们发现，1.将另一个技能拖进去，还是会播放上一个技能
   2.讲技能拖出删除后，技能仍能播放