91. UE5 RPG 实现拖拽装配技能以及解除委托的绑定

在上一篇文章里，实现了通过选中技能，然后点击下方的装备技能插槽实现了技能的装配。为了丰富技能装配功能，在这一篇里，我们实现一下通过拖拽技能，实现拖拽功能，我们需要修改两个用户控件，一个就是技能按钮，我们需要在里面增加拖拽的功能，并且不能够与点击事件产生冲突，然后我们还需要在装配插槽增加拖拽放入的事件处理，在拖入技能装配插槽后，处理对应的逻辑。

具体操作流程，在拖拽技能时，技能能够根据装配的插槽来修改大小（主动技能插槽比被动技能插槽大），如果当前技能没有处于焦点，我们在拖拽时，会自动将其设置为焦点状态，然后触发拖拽后，可以装配的位置会高亮显示，当将技能拖拽到可放入的槽位时，拖拽的技能也会高亮，松手后，技能将应用到目标槽位，实现就用上一篇文章里的点击装配即可。

实现拖拽时对应装配部位可以高亮显示

首先，我们实现拖拽，可装配的槽位高亮显示，增加一个新的委托类型

DECLARE_DYNAMIC_MULTICAST_DELEGATE_TwoParams(FWaitForEquipSelectionSignature, const FGameplayTag&, InputTag, const FGameplayTag&, AbilityType); //等待技能装备选择

然后在技能面板控制器增加一个新的委托变量，用于装配栏监听

	UPROPERTY(BlueprintAssignable)FWaitForEquipSelectionSignature WaitForEquipSignature; //拖拽选中技能按钮后，广播可拖拽位置高亮显示

然后我们增加两个函数，用于在拖拽开始时调用，和在拖拽结束时调用

	UFUNCTION(BlueprintCallable)void EquipDragStart(); //装配技能按钮按下事件UFUNCTION(BlueprintCallable)void EquipDragEnd(); //装配技能按钮按下事件

这两个函数，主要用于广播委托，我们可以在蓝图里监听委托，根据委托设置是否需要显示隐藏高亮效果，委托广播的是输入标签和技能类型，在设置高亮时，我们可以根据这两个值来判断当前是否需要设置高亮

void USpellMenuWidgetController::EquipDragStart()
{const FRPGAbilityInfo Info = AbilityInfo->FindAbilityInfoForTag(SelectedAbility.Ability);const FGameplayTag& SelectedAbilityInputTag = GetRPGASC()->GetInputTagFromAbilityTag(SelectedAbility.Ability);WaitForEquipSignature.Broadcast(SelectedAbilityInputTag, Info.AbilityType);
}void USpellMenuWidgetController::EquipDragEnd()
{const FRPGGameplayTags GameplayTags = FRPGGameplayTags::Get();WaitForEquipSignature.Broadcast(GameplayTags.Abilities_None, GameplayTags.Abilities_Type_None);
}

然后我们在装配技能插槽里添加一个函数，用于设置当前插槽是否需要高亮，并判断输入标签如果一致，将无法高亮（没必要重复设置技能）
在这里插入图片描述
在高亮时，插槽显示一到光圈

这里我是编写了一个材质，可以根据运行时间调整亮度，类似于呼吸灯的效果

然后，我们在技能面板控制器里监听委托回调，调用设置高亮函数

设置高亮函数里，根据技能类型这里，根据匹配标签设置是否高亮，并将输入标签传入
在这里插入图片描述
然后将所有插槽调用自身的设置高亮

修改按钮

如果我们在一个用户控件里实现拖拽，并且，在里面添加了按钮，那么大概无法激活拖拽效果，因为鼠标事件将会被按钮阻挡，用户控件无法获取到对应的事件触发拖拽。

为了能够让拖拽事件顺利激活，这里我将按钮ui移出，使用一张图片替代
在这里插入图片描述
替换完成后，我们还是需要实现对应的按钮点击的效果，我们通过覆写鼠标相应的操作来模拟出鼠标点击按钮的效果。

在鼠标按下时，我们给定一个拖拽指针事件，当产生拖拽时，可以触发拖拽函数进行执行，然后我们添加了一个变量，用于定义鼠标被按下，并添加一个自定义事件，用来取消变量。
在这里插入图片描述
在自定义事件这里如果多次调用，在没到达延迟的时间时，将会重新延迟时间，在到达延迟时间后，将变量设置为false，在此时间后，抬起鼠标，将不会触发鼠标点击事件。

接下来就是处理鼠标悬停效果，我们可以通过鼠标进入和离开来判断鼠标是否悬停在UI上
在这里插入图片描述
后面设置就是指定一张图，然后在切换时，切换成对应的图片笔刷

接着就是在鼠标抬起事件里，我们其实就是复制了之前的鼠标点击事件，只是在前面添加了一个布尔判断，如果上面MouseDown变量被设置了false，就无法执行后面的点击事件
在这里插入图片描述
通过这样的一套操作，我们实现了模拟button的点击事件和鼠标悬停事件，如果还需要更细致的模拟，大家可以继续。

实现拖拽功能

接下来，到了重头戏了，就是拖拽功能，我们在技能按钮覆写发现拖动时，如果鼠标在按钮上按下，按照我们之前的配置，这个函数会被触发
在这里插入图片描述
在这个函数里，我们先判断是否是鼠标左键触发的拖拽

如果当前没有选中技能，我们需要激活当前技能的选中，（主要是为了让控制器保存我们拖拽的节点的技能标签，方便应用）

在这里插入图片描述
接着判断当前技能是否可以装配

调用我们之前编辑的让对应的可装配插槽高亮效果

我们还需要创建一个跟随拖拽的用户控件，这里，我对主动技能和被动技能做了区分，（因为它们的大小不一样），并设置显示的背景和图标
在这里插入图片描述
接下来，就是最重要的一步，通过内容创建拖拽操作，操作类我们可以进行自定义，这里直接使用的默认的，并将self作为自定义数据传输，并将创建的控件作为拖拽显示控件

接着，我覆写拖拽取消时，如果玩家放弃拖拽，我们需要将技能装配插槽恢复默认状态
在这里插入图片描述

在这里插入图片描述

实现拖拽事件的接收

接下来，我们需要在技能装配插槽里实现对拖拽事件的接收，对于拖拽事件的接收，有三个，发现拖拽进去，发现拖住啊离开，以及放置时
在这里插入图片描述
我们在拖动进入时，从数据中获取我们创建的对应数据

这里，我们对Payload转换为技能按钮，并判断当前是否能够高亮显示，判断条件就是输入标签不同，技能类型相同

然后就是对拖拽生成的UI上调用它的高亮函数
在这里插入图片描述

高亮的实现和技能装配插槽的高亮实现逻辑相同，额外增加一张图片，控制它的显示隐藏

如果拖拽离开此控件，我们将拖拽物体上的高亮效果取消

接着，我们再覆写放置时，就是玩家正确的放置了技能
在这里插入图片描述
我们在触发放置时，就和触发点击时一样，直接使用点击的事件即可

注意，将装配高亮效果取消掉，然后返回处理完成

接下来就是验证功能查缺补漏
在这里插入图片描述

处理委托的多次绑定

现在，我们关闭技能面板，然后再打开，会发现事件会被多次触发。
出现这个原因是，我们在创建控件时进行的委托绑定，但在关闭面板时，没有销毁。

解决这个问题，有两种方案，我先说第一种，就是我不会用的

我们可以在蓝图里，销毁控件是，调用取消绑定，可以指定函数取消指定回调事件，或者将所有委托全部取消掉，这种在蓝图实现起来有点乱。
在这里插入图片描述

接着就是介绍第二种方式，那就是实现一个函数，供蓝图调用，在控件销毁时，调用即可

我们在控制器基类里增加一个函数，用于清除委托绑定

	UFUNCTION(BlueprintCallable)virtual void ClearAllDelegate();  //清除全部委托绑定

并将在基类里绑定的委托清除掉

void URPGWidgetController::ClearAllDelegate()
{AbilityInfoDelegate.Clear();
}

在派生类里，我们首先覆写函数，

virtual void ClearAllDelegate() override;

然后在实现里，首先调用父类函数执行清除，接着实现在派生类里的委托变量的清除

void UAttributeMenuWidgetController::ClearAllDelegate()
{Super::ClearAllDelegate();AttributeInfoDelegate.Clear();AttributePointsChangedDelegate.Clear();
}