84. UE5 RPG 创建技能面板

在前面，总算完成了角色属性的功能，并实现了分配属性值的功能。在这一篇文章，我们开始创建技能相关的功能，我们已经有了角色技能，现在还需要一个角色面板，这篇文章里我们将首先创建技能的UI面板，在面板中我们可以设置技能，升级技能等。
首先展示一下我们要最终完成的效果

接下来我们将实现这个效果。

创建控件

我们首先要创建对应的空间，先创建一个显示技能的按钮。
格式如下

注意设置按钮每一种状态下的样式

有了按钮的控件后，我们要创建主动技能，被动技能和装配技能的组合，我们创建了SpellMenu文件夹，创建对应的三个用户控件

主动技能这里，我们主要用到了包裹框进行区分，将技能分成了三列，包裹框内可以让控件按自身的宽高显示，不会被拉伸，在超出长度时，会自动换行或者换列

被动技能为三个，我们使用间隔区将其分开

装配技能这里区分了主动和被动的两个区域

创建技能面板

有了技能面板后，我们就将其组合起来，首先将大的框架区分出来，我们在覆层这里，首先设置好背景和边框，然后添加包裹框添加标题“技能”，然后添加一个水平框，区分出左右两部分，左边是显示技能图标的区域，右侧是鼠标悬停在技能按钮上时，显示技能的描述，还有技能升级后的属性显示。

在显示技能左侧，我们首先创建显示当前剩余技能点的ui和重置点击技能的按钮。并在下面添加技能标题和之前创建的用户控件

在显示技能描述的右侧，我们首先添加标题，然后添加两个尺寸框，用于显示对技能的描述和技能升级的描述，由于技能描述有可能过长，所以我们增加一个滚动框，可以查看长文。

最后再添加一个关闭按钮，用于关闭当前的技能面板

我们给关闭按钮增加一个关闭事件，用于删除技能面板

为了防止外部的开启技能面板的按钮可以多次开启技能面板，我们增加一个事件分发器

并在面板删除事件回调中，调用事件分发，我们便可以在外部绑定对应的回调

添加开启关闭技能面板

为了实现在界面上可以打开技能面板，我们需要在WBP_Overlay蓝图中增加一个开启技能面板的按钮。

在按钮的点击回调里，调用我们创建的自定义的事件

在自定义事件里面，我们将按钮设置关闭激活，创建技能面板UI，添加到界面上。然后绑定我们之前关闭的回调。

处理打开面板后，还可以移动的问题

现在，我们发现了一个问题，在打开属性面板和技能面板后，我们点击场景的地面，还是可以移动的，我们要解决这个问题，先创建两个变量，用于表示当前面板是否打开

然后我们在打开面板的事件时，将对应变量设置为true

然后在关闭回调里将变量设置为false

接着，我们增加两个自定义事件，一个是关闭可以输入操作场景

另一个是开启输入影响场景，在两个面板的变量都为false时，我们开启可以影响场景和UI，我们还要将HideCursorDuringCapture设置为false，如果开启，在鼠标点击场景时，鼠标将隐藏。

设置输入仅影响UI的事件我们在开启面板后进行调用

在面板关闭时，会调用设置输入可以影响场景和UI，如果两个面板都关闭，鼠标则可以操作场景移动和攻击敌人。

这样，我们就将技能面板创建完成，还完成了一些bug修复。这里由于和之前的文章重复的太多，我记录的比较简单，下一篇，我们将实现技能面板专用的控制器。