《UE5_C++多人TPS完整教程》学习笔记36 ——《P37 拾取组件（Pickup Widget）》

---

本文为B站系列教学视频 《UE5_C++多人TPS完整教程》 —— 《P37 拾取组件（Pickup Widget）》 的学习笔记，该系列教学视频为计算机工程师、程序员、游戏开发者、作家（Engineer, Programmer, Game Developer, Author） Stephen Ulibarri 发布在 Udemy 上的课程 《Unreal Engine 5 C++ Multiplayer Shooter》 的中文字幕翻译版，UP主（也是译者）为 游戏引擎能吃么。

---

---

P37 拾取组件（Pickup Widget）

本节课我们将为我们的武器类制作一个拾取组件（Pickup widget），该组件将显示可以拾取的武器，我们还将基于武器状态设置该组件的可见性（Visibility）。

---

37.1 创建拾取控件类

1. 在虚幻引擎的内容浏览器 “/内容/Blueprints/HUD” 目录下新建一个 “控件蓝图” 类（Widget Blueprint） “WBP_PickupWidget”。
   

2. 双击 “WBP_PickupWidget”，进入用户控件设计器窗口。如果在左下 “层级” 面板中有 “画布画板” （Canvas Panel），需要将其删除，接着在 “控制板” 面板中将 “通用” 选项卡下的 “文本”（Text）组件拖拽到设计器中，重命名为 “PickupText”；然后在右侧 “细节” 面板的 “内容”（Content）选项卡下设置 “文本”（Text）为 “E-Pick Up”，在“字体”（Font）选项卡下设置 “字号“（Size）为 48，“字体样式”（Typeface）为 “常规”（Regular），设置 “对齐”（Justification）为 “居中对齐”（Align center text）；最后调整其大小（Resize），并进行编译、保存。
   

3. 打开头文件 “Weapon.h”，在武器类私有属性中声明所有地方可见（VisibleAnywhere）、归类为武器属性 “Weapon Properties” 的拾取组件 ”PickupWidget“。

   /*** Weapon.h ***/...UCLASS()
   class BLASTER_API AWeapon : public AActor
   {GENERATED_BODY()...private:UPROPERTY(VisibleAnywhere, Category = "Weapon Properties")	// 添加所有地方可见的骨骼网格组件，这样就可以通过蓝图进行编辑武器，归类为 Weapon Propertiesclass USkeletalMeshComponent* WeaponMesh;				UPROPERTY(VisibleAnywhere, Category = "Weapon Properties")	// 添加一个重叠体积（Overlap Volume），这里使用球体组件 “包裹” 武器骨骼体组件，用于判定人物是否碰到球体，若碰到人物将会拾取该武器class USphereComponent* AreaSphere;UPROPERTY(VisibleAnywhere, Category = "Weapon Properties")	// 添加新声明的武器状态枚举类型EWeaponState WeaponState;									/* P37 拾取组件（Pickup Widget）*/UPROPERTY(VisibleAnywhere, Category = "Weapon Properties")	// 添加拾取组件class UWidgetComponent* PickupWidget;			/* P37 拾取组件（Pickup Widget）*/
   };
   

4. 打开源文件 “Weapon.cpp”，添加头文件 “Components//WidgetComponent.h” 在 “Weapon” 类构造函数中 “AWeapon()”，基于拾取组件类创建 “PickupWidget“ 对象，并将 PickupWidget 附加到武器类的根组件上。最后进行编译。

   /*** Weapon.cpp ***/// Fill out your copyright notice in the Description page of Project Settings.#include "Weapon.h"	// 原来自动生成的代码是 #include "HUD/OverheadWidget.h"，这里需要把 "GameMode/" 去掉，否则找不到文件 "LobbyGameMode.h"
   #include "Components/SphereComponent.h"/* P37 拾取组件（Pickup Widget）*/
   #include "Components//WidgetComponent.h"
   /* P37 拾取组件（Pickup Widget）*/// Sets default values
   AWeapon::AWeapon()
   {// Set this actor to call Tick() every frame.  You can turn this off to improve performance if you don't need it....AreaSphere = CreateDefaultSubobject<USphereComponent>(TEXT("AreaSphere"));		// 基于球体组件类创建 AreaSphere 对象AreaSphere->SetupAttachment(RootComponent);										// 将 AreaSphere 附加到武器类的根组件上AreaSphere->SetCollisionResponseToAllChannels(ECollisionResponse::ECR_Ignore);	// 忽略球体组件的碰撞响应，以便于当玩家靠近武器时我们可以检测玩家是否碰到武器（而不是武器被弹开）AreaSphere->SetCollisionEnabled(ECollisionEnabled::NoCollision);				// 先暂时关闭碰撞检测和碰撞响应，物体之间不会发生任何碰撞，我们将在服务器端启用/* P37 拾取组件（Pickup Widget）*/PickupWidget = CreateDefaultSubobject<UWidgetComponent>(TEXT("PickupWidget"));	// 基于球体组件类创建 PickupWidget 对象PickupWidget->SetupAttachment(RootComponent);									// 将 PickupWidget 附加到武器类的根组件上/* P37 拾取组件（Pickup Widget）*/
   }...
   

---

37.2 创建拾取组件重叠事件

1. 在虚幻引擎打开 “BP_Weapon” 蓝图编辑器，在左侧 “组件”（Component）面板中可以看到拾取组件 “Pickup Widget” 已经附加到根组件武器骨骼网格体 “Weapon Mesh (WeaponMesh)” 上，点击它，并在右侧 “细节”（Details）面板 “用户界面”（USER INTERFACE）选项卡下将 “空间”（Space）从 “世界”（World） 设置为 “屏幕”（Screen），将 “控件类”（Widget Class）设置为 “WBP_OverheadWidget”，勾选 “以所需大小绘制”（Draw at Desired Size），这样我们就不必手动设置（Manually set）这个部件的大小；接着在 “视口”（Viewport）面板调整 “Pickup Widget” 到骨骼网格体 “Weapon Mesh (WeaponMesh)” 的上方。
   

2. 打开游戏关卡 “BlasterMap”，点击工具栏的 “播放”（▶）按钮启动运行，可以看到在监听服务器中和两个客户端中武器上方均出现了文本 “E-Pick Up”。
   

3. 我们想要在人物与球体组件 “AreaSphere” 发生重叠时才显示 “E-Pick Up”。现在暂时不需要头顶组件 “OverheadWidget” 上显示网络角色（之后将用来显示玩家昵称），进入 “WBP_OverheadWidget” 用户控件设计器窗口，在左下 “层级” 面板中点击 “DisplayText”，接着在右侧 “细节” 面板的 “内容”（Content）选项卡下设置 “文本”（Text）为 空。
   

4. 打开头文件 “Weapon.h”，声明覆写球体重叠事件 “OnSphereOverlap“ 函数。

   /*** Weapon.cpp ***/...UCLASS()
   class BLASTER_API AWeapon : public AActor
   {GENERATED_BODY()public:	// Sets default values for this actor's propertiesAWeapon();protected:// Called when the game starts or when spawnedvirtual void BeginPlay() override;public:	// Called every framevirtual void Tick(float DeltaTime) override;/* P37 拾取组件（Pickup Widget）*/UFUNCTION()					// 需要动态绑定到 OnComponentBeginOverlap 的委托上，因此需要将函数设置为 UFunctionvirtual void OnSphereOverlap(UPrimitiveComponent*  OverlappedComponent,AActor* OtherActor,UPrimitiveComponent* OhterComponent,int32 OtherBodyIndex,bool bFromSweep,const FHitResult& SweepResult);/* P37 拾取组件（Pickup Widget）*/...}
   

5. 在源文件 “Weapon.cpp” 中将其动态绑定到球体组件 “AreaSphere” 的委托 “OnComponentBeginOverlap” 上，“OnComponentBeginOverlap” 是 “FComponentBeginOverlapSignature“ 类型的变量，在 VS 中我们查看 “FComponentBeginOverlapSignature“ 的文档，可以发现为实现动态绑定到委托，“OnSphereOverlap“ 函数需要的入参和文档中要求的入参需要保持一致。
   为实现人物 “ABlasterCharacter” 与球体组件 “AreaSphere” 发生重叠时显示 “E-Pick Up”，首先在 “BeginPlay” 先设置拾取组件不可见，然后在 “OnSphereOverlap” 中设置当人物与球体组件发生重叠时拾取组件可见。

   /*** Weapon.cpp ***/// Fill out your copyright notice in the Description page of Project Settings.#include "Weapon.h"	// 原来自动生成的代码是 #include "HUD/OverheadWidget.h"，这里需要把 "GameMode/" 去掉，否则找不到文件 "LobbyGameMode.h"
   #include "Components/SphereComponent.h"/* P37 拾取组件（Pickup Widget）*/
   #include "Components/WidgetComponent.h"
   #include "Blaster/Character/BlasterCharacter.h"
   /* P37 拾取组件（Pickup Widget）*/...
   // Called when the game starts or when spawned
   void AWeapon::BeginPlay()
   {Super::BeginPlay();// 服务器将负责掌管（in charge of）所有武器权限if (HasAuthority()) {															// 判断是否拥有权威角色，等同于 if (GetLocalRole() == ENetRole::ROLE_Authority) AreaSphere->SetCollisionEnabled(ECollisionEnabled::QueryAndPhysics);		// 既进行碰撞检测，也进行碰撞响应。物体之间会检测是否发生碰撞，同时会产生物理效果AreaSphere->SetCollisionResponseToChannel(ECollisionChannel::ECC_Pawn, ECollisionResponse::ECR_Overlap);/* P37 拾取组件（Pickup Widget）*/AreaSphere->OnComponentBeginOverlap.AddDynamic(this, &AWeapon::OnSphereOverlap);/** Delegate for notification of start of overlap with a specific component *//* DECLARE_DYNAMIC_MULTICAST_SPARSE_DELEGATE_SixParams(FComponentBeginOverlapSignature, UPrimitiveComponent, OnComponentBeginOverlap, UPrimitiveComponent*, OverlappedComponent, AActor*, OtherActor, UPrimitiveComponent*, OtherComp, int32, OtherBodyIndex, bool,bFromSweep, FHitResult&, SweepResult);*//* P37 拾取组件（Pickup Widget）*/}/* P37 拾取组件（Pickup Widget）*/if (PickupWidget) {									// 确保 PickupWidget 不是空指针PickupWidget->SetVisibility(false);				// 先设置拾取组件不可见}/* P37 拾取组件（Pickup Widget）*/
   }/* P37 拾取组件（Pickup Widget）*/
   void AWeapon::OnSphereOverlap(UPrimitiveComponent* OverlappedComponent, AActor* OtherActor, UPrimitiveComponent* OhterComponent, int32 OtherBodyIndex, bool bFromSweep, const FHitResult& SweepResult)
   {// 需要先添加头文件 "Blaster/Character/BlasterCharacter.h"ABlasterCharacter* BlasterCharacter = Cast<ABlasterCharacter>(OtherActor);	// 类型转换为 OtherActorif (BlasterCharacter && PickupWidget) {										// 确保 BlasterCharacter 和 PickupWidget 都不是空指针PickupWidget->SetVisibility(true);										// 设置拾取组件可见}
   }
   /* P37 拾取组件（Pickup Widget）*/
   

   注意
   委托以及动态绑定的相关概念可以参阅笔者之前的学习笔记《UE5_C++多人TPS完整教程》学习笔记9 ——《P10 创建会话（Creating A Session）》以及《UE5_C++多人TPS完整教程》学习笔记20 ——《P21 更多的子系统委托（More Subsystem Delegates）》。

6. 分别进行三次测试，可以看到无论是视口面板中的服务器端上的角色还是另外两个小窗中的客户端的角色，当他们分别与武器发生重叠时， “E-Pick Up” 均只显示在视口面板中的服务器端上，这是我们期待发生的，因为重叠事件只在服务器上调用。
   
   
   
   

---

37.3 Summary

本节课我们为武器类添加交互式拾取组件，该组件将显示可以拾取的武器。首先我们新建了 “WBP_PickupWidget” 控件蓝图，在武器 C++ 类中声明 “UWidgetComponent* PickupWidget”，通过构造函数初始化并附加到武器根组件。接着，为了使得游戏人物与球体组件 “AreaSphere” 发生重叠时才显示 “E-Pick Up”，我们在武器 C++ 类的 “BeginPlay()” 函数中通过 “PickupWidget->SetVisibility(false)" 设置初始时拾取组件不可见，然后在服务器端绑定重叠事件“OnSphereOverlap” 到球体组件 “AreaSphere” 的碰撞委托上，当人物进入球体范围时，通过 “PickupWidget->SetVisibility(true)” 显示 “E-Pick Up”，并且仅由服务器触发，客户端通过属性复制同步状态。在后续测试中，无论是视口面板中的服务器端上的角色还是另外两个小窗中的客户端的角色，当他们分别在测试中与武器发生重叠时， “E-Pick Up” 均只显示在视口面板中的服务器端上，因为重叠事件只在服务器上调用。

在 37.2 创建拾取组件重叠事件 中，关于委托以及动态绑定的相关概念可以参阅笔者之前的学习笔记《UE5_C++多人TPS完整教程》学习笔记9 ——《P10 创建会话（Creating A Session）》以及《UE5_C++多人TPS完整教程》学习笔记20 ——《P21 更多的子系统委托（More Subsystem Delegates）》。

---