在前面,总算完成了角色属性的功能,并实现了分配属性值的功能。在这一篇文章,我们开始创建技能相关的功能,我们已经有了角色技能,现在还需要一个角色面板,这篇文章里我们将首先创建技能的UI面板,在面板中我们可以设置技能,升级技能等。
首先展示一下我们要最终完成的效果
接下来我们将实现这个效果。
创建控件
我们首先要创建对应的空间,先创建一个显示技能的按钮。
格式如下
注意设置按钮每一种状态下的样式
有了按钮的控件后,我们要创建主动技能,被动技能和装配技能的组合,我们创建了SpellMenu文件夹,创建对应的三个用户控件
主动技能这里,我们主要用到了包裹框进行区分,将技能分成了三列,包裹框内可以让控件按自身的宽高显示,不会被拉伸,在超出长度时,会自动换行或者换列
被动技能为三个,我们使用间隔区将其分开
装配技能这里区分了主动和被动的两个区域
创建技能面板
有了技能面板后,我们就将其组合起来,首先将大的框架区分出来,我们在覆层这里,首先设置好背景和边框,然后添加包裹框添加标题“技能”,然后添加一个水平框,区分出左右两部分,左边是显示技能图标的区域,右侧是鼠标悬停在技能按钮上时,显示技能的描述,还有技能升级后的属性显示。
在显示技能左侧,我们首先创建显示当前剩余技能点的ui和重置点击技能的按钮。并在下面添加技能标题和之前创建的用户控件
在显示技能描述的右侧,我们首先添加标题,然后添加两个尺寸框,用于显示对技能的描述和技能升级的描述,由于技能描述有可能过长,所以我们增加一个滚动框,可以查看长文。
最后再添加一个关闭按钮,用于关闭当前的技能面板
我们给关闭按钮增加一个关闭事件,用于删除技能面板
为了防止外部的开启技能面板的按钮可以多次开启技能面板,我们增加一个事件分发器
并在面板删除事件回调中,调用事件分发,我们便可以在外部绑定对应的回调
添加开启关闭技能面板
为了实现在界面上可以打开技能面板,我们需要在WBP_Overlay蓝图中增加一个开启技能面板的按钮。
在按钮的点击回调里,调用我们创建的自定义的事件
在自定义事件里面,我们将按钮设置关闭激活,创建技能面板UI,添加到界面上。然后绑定我们之前关闭的回调。
处理打开面板后,还可以移动的问题
现在,我们发现了一个问题,在打开属性面板和技能面板后,我们点击场景的地面,还是可以移动的,我们要解决这个问题,先创建两个变量,用于表示当前面板是否打开
然后我们在打开面板的事件时,将对应变量设置为true
然后在关闭回调里将变量设置为false
接着,我们增加两个自定义事件,一个是关闭可以输入操作场景
另一个是开启输入影响场景,在两个面板的变量都为false时,我们开启可以影响场景和UI,我们还要将HideCursorDuringCapture设置为false,如果开启,在鼠标点击场景时,鼠标将隐藏。
设置输入仅影响UI的事件我们在开启面板后进行调用
在面板关闭时,会调用设置输入可以影响场景和UI,如果两个面板都关闭,鼠标则可以操作场景移动和攻击敌人。
这样,我们就将技能面板创建完成,还完成了一些bug修复。这里由于和之前的文章重复的太多,我记录的比较简单,下一篇,我们将实现技能面板专用的控制器。