在上一篇文章里,实现了通过选中技能,然后点击下方的装备技能插槽实现了技能的装配。为了丰富技能装配功能,在这一篇里,我们实现一下通过拖拽技能,实现拖拽功能,我们需要修改两个用户控件,一个就是技能按钮,我们需要在里面增加拖拽的功能,并且不能够与点击事件产生冲突,然后我们还需要在装配插槽增加拖拽放入的事件处理,在拖入技能装配插槽后,处理对应的逻辑。
具体操作流程,在拖拽技能时,技能能够根据装配的插槽来修改大小(主动技能插槽比被动技能插槽大),如果当前技能没有处于焦点,我们在拖拽时,会自动将其设置为焦点状态,然后触发拖拽后,可以装配的位置会高亮显示,当将技能拖拽到可放入的槽位时,拖拽的技能也会高亮,松手后,技能将应用到目标槽位,实现就用上一篇文章里的点击装配即可。
实现拖拽时对应装配部位可以高亮显示
首先,我们实现拖拽,可装配的槽位高亮显示,增加一个新的委托类型
然后在技能面板控制器增加一个新的委托变量,用于装配栏监听
然后我们增加两个函数,用于在拖拽开始时调用,和在拖拽结束时调用
这两个函数,主要用于广播委托,我们可以在蓝图里监听委托,根据委托设置是否需要显示隐藏高亮效果,委托广播的是输入标签和技能类型,在设置高亮时,我们可以根据这两个值来判断当前是否需要设置高亮
然后我们在装配技能插槽里添加一个函数,用于设置当前插槽是否需要高亮,并判断输入标签如果一致,将无法高亮(没必要重复设置技能)
在高亮时,插槽显示一到光圈
这里我是编写了一个材质,可以根据运行时间调整亮度,类似于呼吸灯的效果
然后,我们在技能面板控制器里监听委托回调,调用设置高亮函数
设置高亮函数里,根据技能类型这里,根据匹配标签设置是否高亮,并将输入标签传入
然后将所有插槽调用自身的设置高亮
修改按钮
如果我们在一个用户控件里实现拖拽,并且,在里面添加了按钮,那么大概无法激活拖拽效果,因为鼠标事件将会被按钮阻挡,用户控件无法获取到对应的事件触发拖拽。
为了能够让拖拽事件顺利激活,这里我将按钮ui移出,使用一张图片替代
替换完成后,我们还是需要实现对应的按钮点击的效果,我们通过覆写鼠标相应的操作来模拟出鼠标点击按钮的效果。
在鼠标按下时,我们给定一个拖拽指针事件,当产生拖拽时,可以触发拖拽函数进行执行,然后我们添加了一个变量,用于定义鼠标被按下,并添加一个自定义事件,用来取消变量。
在自定义事件这里如果多次调用,在没到达延迟的时间时,将会重新延迟时间,在到达延迟时间后,将变量设置为false,在此时间后,抬起鼠标,将不会触发鼠标点击事件。
接下来就是处理鼠标悬停效果,我们可以通过鼠标进入和离开来判断鼠标是否悬停在UI上
后面设置就是指定一张图,然后在切换时,切换成对应的图片笔刷
接着就是在鼠标抬起事件里,我们其实就是复制了之前的鼠标点击事件,只是在前面添加了一个布尔判断,如果上面MouseDown变量被设置了false,就无法执行后面的点击事件
通过这样的一套操作,我们实现了模拟button的点击事件和鼠标悬停事件,如果还需要更细致的模拟,大家可以继续。
实现拖拽功能
接下来,到了重头戏了,就是拖拽功能,我们在技能按钮覆写发现拖动时,如果鼠标在按钮上按下,按照我们之前的配置,这个函数会被触发
在这个函数里,我们先判断是否是鼠标左键触发的拖拽
如果当前没有选中技能,我们需要激活当前技能的选中,(主要是为了让控制器保存我们拖拽的节点的技能标签,方便应用)
接着判断当前技能是否可以装配
调用我们之前编辑的让对应的可装配插槽高亮效果
我们还需要创建一个跟随拖拽的用户控件,这里,我对主动技能和被动技能做了区分,(因为它们的大小不一样),并设置显示的背景和图标
接下来,就是最重要的一步,通过内容创建拖拽操作,操作类我们可以进行自定义,这里直接使用的默认的,并将self作为自定义数据传输,并将创建的控件作为拖拽显示控件
接着,我覆写拖拽取消时,如果玩家放弃拖拽,我们需要将技能装配插槽恢复默认状态
实现拖拽事件的接收
接下来,我们需要在技能装配插槽里实现对拖拽事件的接收,对于拖拽事件的接收,有三个,发现拖拽进去,发现拖住啊离开,以及放置时
我们在拖动进入时,从数据中获取我们创建的对应数据
这里,我们对Payload转换为技能按钮,并判断当前是否能够高亮显示,判断条件就是输入标签不同,技能类型相同
然后就是对拖拽生成的UI上调用它的高亮函数
高亮的实现和技能装配插槽的高亮实现逻辑相同,额外增加一张图片,控制它的显示隐藏
如果拖拽离开此控件,我们将拖拽物体上的高亮效果取消
接着,我们再覆写放置时,就是玩家正确的放置了技能
我们在触发放置时,就和触发点击时一样,直接使用点击的事件即可
注意,将装配高亮效果取消掉,然后返回处理完成
接下来就是验证功能查缺补漏
处理委托的多次绑定
现在,我们关闭技能面板,然后再打开,会发现事件会被多次触发。
出现这个原因是,我们在创建控件时进行的委托绑定,但在关闭面板时,没有销毁。
解决这个问题,有两种方案,我先说第一种,就是我不会用的
我们可以在蓝图里,销毁控件是,调用取消绑定,可以指定函数取消指定回调事件,或者将所有委托全部取消掉,这种在蓝图实现起来有点乱。
接着就是介绍第二种方式,那就是实现一个函数,供蓝图调用,在控件销毁时,调用即可
我们在控制器基类里增加一个函数,用于清除委托绑定
并将在基类里绑定的委托清除掉
在派生类里,我们首先覆写函数,
然后在实现里,首先调用父类函数执行清除,接着实现在派生类里的委托变量的清除