8. UE5 RPG创建UI（上）

UI是显示角色的一部分属性玩家可以直接查看的界面，通过直观的形式在屏幕上显示角色的各种信息。如何使用一种可扩展，可维护的形式来制作，这不得不说到耳熟能详的MVC架构。
MVC（Model-View-Controller）是一种常见的软件架构模式，用于组织和设计应用程序。它将应用程序分为三个逻辑层：模型（Model）、视图（View）和控制器（Controller）。

1. 模型（Model）层： 主要处理数据相关的内容，和数据库进行读取，写入，更新，删除等操作。并定义了操作和访问这些数据的方法。
2. 视图（View）层： 视图层负责展示模型层的数据给用户，并接收用户的输入。它是用户界面的一部分，负责展示信息、呈现数据、收集用户输入等。视图层通常是根据模型层的数据来动态生成的，以便用户可以直观地与数据进行交互。
3. 控制器（Controller）层： 控制器层接收用户的输入，并根据输入调度和处理请求。它负责处理用户与应用程序的交互逻辑，决定如何更新模型层数据和选择合适的视图层。控制器将用户的请求转发给模型层进行处理，并在完成后更新视图层以显示结果。

通过MVC的方式，我们将各部分模块化分工，将关注点分离，提高应用程序的可维护性，可扩展性和可测试性。模型层只需将相应的接口提供，不需要知道控制层如何如使用它，也不需要知道视图层如何显示它。控制器层去模型层交互获取数据，然后通过广播的形式将消息散发出去，视图层只需要接受广播消息更新数据。形成一种单向依赖关系。

创建基础用户控件类

理论的东西说完了，开始进入实际操作中，首先，我需要创建用于显示的基础ui部件类
新创建一个UserWidget（用户控件）类

接着创建一个基础的Object类，用于作为控制器层。

这个类被用来作为用户控件的控制器层。

用户控件代码

在用户控件中，我们需要添加一个一个参数，用于获取存储控制器层对象。然后添加一个设置控制层对象的方法以及设置成功后的回调，方便后续操作。

	UPROPERTY(BlueprintReadOnly) //蓝图可读取，但不能修改
	TObjectPtr<UObject> WidgetController;

添加一个可以在蓝图里面使用的回调，这个回调函数会在控制器对象被设置后调用。

protected:
	UFUNCTION(BlueprintImplementableEvent) //c++里不能定义，可以调用，蓝图中 无返回值可作为通知，有返回值还可以覆盖重写
	void WidgetControllerSet();

增加一个设置控制器层的方法，可以在蓝图调用去修改控制器。

	UFUNCTION(BlueprintCallable) //蓝图可调用
	void SetWidgetController(UObject* InWidgetController);

SetWidgetController的实现就是赋值，然后调用回调。具体设置会在蓝图中设置。

void UMyUserWidget::SetWidgetController(UObject* InWidgetController)
{
	WidgetController = InWidgetController;
	WidgetControllerSet();
}

MyUserWidget.h

// 版权归暮志未晚所有。

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "MyUserWidget.generated.h"

/**
 * 
 */
UCLASS()
class AURA_API UMyUserWidget : public UUserWidget
{
	GENERATED_BODY()

public:
	UFUNCTION(BlueprintCallable) //蓝图可调用
	void SetWidgetController(UObject* InWidgetController);

	UPROPERTY(BlueprintReadOnly) //蓝图可读取，但不能修改
	TObjectPtr<UObject> WidgetController;

protected:
	UFUNCTION(BlueprintImplementableEvent) //c++里不能定义，可以调用，蓝图中 无返回值可作为通知，有返回值还可以覆盖重写
	void WidgetControllerSet();
};

MyUserWidget.cpp

// 版权归暮志未晚所有。


#include "UI/Widget/MyUserWidget.h"

void UMyUserWidget::SetWidgetController(UObject* InWidgetController)
{
	WidgetController = InWidgetController;
	WidgetControllerSet();
}

控制层对象代码

在WidgetController里面，需要去获取model层的数据。数据在在角色的playerController，playerState，ASC和AS身上。
所以，我们需要在WidgetController里面提前获取到这四个对象，在有需要时，从这些对象上面获取数据。
在这个基类里面，我们先设置它的四个变量。
MyWidgetController.h

// 版权归暮志未晚所有。

#pragma once

#include "CoreMinimal.h"
#include "UObject/NoExportTypes.h"
#include "MyWidgetController.generated.h"

class UAttributeSet;
class UAbilitySystemComponent;

/**
 * 
 */
UCLASS()
class AURA_API UMyWidgetController : public UObject
{
	GENERATED_BODY()

protected:

	UPROPERTY(BlueprintReadOnly, Category="WidgetController")
	TObjectPtr<APlayerController> PlayerController;

	UPROPERTY(BlueprintReadOnly, Category="WidgetController")
	TObjectPtr<APlayerState> PlayerState;

	UPROPERTY(BlueprintReadOnly, Category="WidgetController")
	TObjectPtr<UAbilitySystemComponent> AbilitySystemComponent;

	UPROPERTY(BlueprintReadOnly, Category="WidgetController")
	TObjectPtr<UAttributeSet> AttributeSet;
	
};

创建进度条

我们创建进度条用于显示角色的血量变化。
创建目录ProgressBar，用于存放进度条蓝图

文件夹内，选择创建控件蓝图

基类选择创建的用户控件基类

将ui尺寸调整成所需（当前用户控件需要多少，大小就是多少）

添加一个尺寸框 SizeBox

为了可以自定义每个用户控件的大小，设置高度和宽度重载。并将其勾选是变量。

打开图标，可以在左侧查看到尺寸框的变量，我们接着创建两个变量用来更新尺寸框的尺寸。编译后的尺寸框可以修改宽高。

EventPreConstruct相当于构造函数，在构造时，我们只需要通过变量修改尺寸框的高和宽，实现对每个添加的用户控件进行尺寸修改。

在尺寸框下面添加一个覆层 Overlay，覆层下面的物体可以重叠在一起。
然后覆层下面添加一个图像Image作为背景图片。

修改图片的水平对齐和垂直对齐

接下来，创建一个变量，用来在初始化时修改背景的图像，这里需要用到Slate笔刷。

初始化后链接使用SetBrush节点，去使用变量修改背景图片的brush。

设置变量的默认值。

会发现图片被成功的渲染出来。

我们可以选中右键，折叠到函数，将函数折叠起来。

接着在覆层下面添加一个进度条，这个进度条用来表示

样式这边，添加上对应的材质或者图像。

修改进度的百分比，可以实现修改进度。

但是你会发现颜色不对，是纯黑，需要在外观这里，将所有值都修改为1，颜色表现就对了。


但是颜色却是正方形，需要将填充图绘制为图像，就可以正确显示图像里面效果。

将背景图的着色的A值设置为0，可以去掉背景。

进度过渡我们将条填充类型改为底到顶，实现了从下往上填充。

我们想通过变量去修改进度条的样式，所以将进度条设置为变量，并设置样式。

将样式拖出，选择Make ProgressBarStyle创建一个新的样式。

创建的样式节点对应四个参数。


前面设置，我们将背景颜色的着色的alpha设置为0， 那么我们也需要在节点这里修改透明度。

将填充图像提升为变量，我们可以通过变量修改，来修改填充图像。

我们需要修改填充让进度条大小小一些，防止遮挡住背景图像。通过修改覆层插槽的填充来实现。

先将插槽转换成覆层的插槽，然后设置它的填充，并设置一个变量来可以修改当前的padding的值。

接着在覆层下再添加一个图像，用于在血量图像上次覆盖一层玻璃瓶的效果。

通过Brush去设置图像

稍微调整一下填充，来实现晶莹剔透的效果。如果你感觉玻璃瓶的亮度太高，可以通过调整它的透明度，降低亮度。

到这里，一个血瓶的UI算是拼完了。
现在可以将这个作为药瓶基类，创建血量和蓝量显示ui。

在右侧属性这里，修改图像，即可实现了两个用户控件的创建。

添加到屏幕

创建一个新的用户控件，控件基类为创建的UMyUserWidget 基类，这个控件会覆盖整个屏幕，作为ui的根。

添加一个画布面板

将血量显示控件拖入到场景内，并修改锚点到中间下方。

在关卡蓝图测试

打开关卡蓝图

在事件开始时，输入create Widget，创建控件节点，类设置为创建的WBP_Overlay。

使用Add Viewport添加到视口

运行可以看到已经能够在ui上面显示。

将药瓶UI属性右侧的眼睛打开，可以将私有变量设置为公有变量。

创建UI控制器层

当前角色血量和蓝量显示的用户控件我们已经制作完成，接下来要实现对用户控件显示的更新，基于MVC，我们需要实现控制器层，将View和Model链接起来，前面我们已经创建了控制器层类。接下来，我将基于控制器层基类创建一个UI专用的控制层类供UI使用。

在UI控制器类里，增加了一个结构体，我们后续通过结构体设置控制器层的相关引用。结构体构造函数小括号后面加：可以直接对属性进行初始化。

USTRUCT(BlueprintType)
struct FWidgetControllerParams
{
	GENERATED_BODY()
	FWidgetControllerParams(){}
	FWidgetControllerParams(APlayerController* PC, APlayerState* PS, UAbilitySystemComponent* ASC, UAttributeSet* AS)
	: PlayerController(PC),
	PlayerState(PS),
	AbilitySystemComponent(ASC),
	AttributeSet(AS)
	{}

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	TObjectPtr<APlayerController> PlayerController = nullptr;

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	TObjectPtr<APlayerState> PlayerState = nullptr;

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	TObjectPtr<UAbilitySystemComponent> AbilitySystemComponent = nullptr;

	UPROPERTY(EditAnywhere, BlueprintReadWrite)
	TObjectPtr<UAttributeSet> AttributeSet = nullptr;
};

控制器层类增加一个蓝图可调用函数，通过蓝图调用去设置控制器层的相关参数。

public:
	UFUNCTION(BlueprintCallable)
	void SetWidgetControllerParams(const FWidgetControllerParams& WCParams);

函数实现是直接设置对应参数。

void UMyWidgetController::SetWidgetControllerParams(const FWidgetControllerParams& WCParams)
{
	PlayerController = WCParams.PlayerController;
	PlayerState = WCParams.PlayerState;
	AbilitySystemComponent = WCParams.AbilitySystemComponent;
	AttributeSet = WCParams.AttributeSet;
}

然后创建基于此控制层类创建一个子类，后续作为HUD的控制器层，它可以作为一个单例使用。

创建HUD

HUD是管理UI的基类，我在类中将管理用户控件和用户控件的控制器层内容。
之前直接在关卡蓝图里面将控件添加到视口的方式只是用来测试。正常我们需要赋值HUD类的方式去实现对UI的添加。

创建一个HUD，父类选择HUD

创建一个HUD类

在HUD代码中，创建一个公有属性OverlayWidget用于存储实例化后的用户组件

public:

	UPROPERTY()
	TObjectPtr<UMyUserWidget> OverlayWidget;

创建一个私有的用户组件类OverlayWidgetClass，用于存储需要实力的用户组件类。以及私有的覆层用户控件变量OverlayWidgetController和它的类OverlayWidgetControllerClass，用于创建和存储控制器层。

private:

	UPROPERTY(EditAnywhere)
	TSubclassOf<UMyUserWidget> OverlayWidgetClass;

	UPROPERTY()
	TObjectPtr<UOverlayWidgetController> OverlayWidgetController;

	UPROPERTY(EditAnywhere)
	TSubclassOf<UOverlayWidgetController> OverlayWidgetControllerClass;

创建一个函数，可以通过结构体去获取控制器层实例。控制器层的实例化，我们需要在HUD里面做实例。

UOverlayWidgetController* GetOverlayWidgetController(const FWidgetControllerParams& WCParams);

实现就是OverlayWidgetController没有就创建，存在就直接返回。

UOverlayWidgetController* AMyHUD::GetOverlayWidgetController(const FWidgetControllerParams& WCParams)
{
	if(OverlayWidgetController == nullptr)
	{
		OverlayWidgetController = NewObject<UOverlayWidgetController>(this, OverlayWidgetControllerClass);
		OverlayWidgetController->SetWidgetControllerParams(WCParams);
	}
	return OverlayWidgetController;
}

接着创建一个能够HUD初始化用户控件和控制器层对象的函数，它们的初始化以及创建我们在HUD里面去创建。

void InitOverlay(APlayerController* PC, APlayerState* PS, UAbilitySystemComponent* ASC, UAttributeSet* AS);

如果没有设置对应的类，将抛出错误并给予提示，然后根据类创建对应的实例最后将用户控件添加到视口。

void AMyHUD::InitOverlay(APlayerController* PC, APlayerState* PS, UAbilitySystemComponent* ASC, UAttributeSet* AS)
{
	checkf(OverlayWidgetClass, TEXT("OverlayWidgetClass 未设置，请在HUD上面设置")); //会打印相关信息到log列表
	checkf(OverlayWidgetControllerClass, TEXT("OverlayWidgetControllerClass 未设置，请在HUD上面设置"));
	
	UMyUserWidget* Widget = CreateWidget<UMyUserWidget>(GetWorld(), OverlayWidgetClass); //创建Overlay用户控件
	OverlayWidget = Cast<UMyUserWidget>(Widget);

	const FWidgetControllerParams WidgetControllerParams(PC, PS, ASC, AS); //创建参数结构体
	OverlayWidgetController = GetOverlayWidgetController(WidgetControllerParams); //获取控制器层

	OverlayWidget->SetWidgetController(OverlayWidgetController); //设置用户控件的控制器层
	
	Widget->AddToViewport(); //添加到视口
}

MyHUD.h

// 版权归暮志未晚所有。

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/HUD.h"
#include "MyHUD.generated.h"

class UAttributeSet;
class UAbilitySystemComponent;
struct FWidgetControllerParams;
class UOverlayWidgetController;
class UMyUserWidget;

/**
 * 
 */
UCLASS()
class AURA_API AMyHUD : public AHUD
{
	GENERATED_BODY()

public:

	UPROPERTY()
	TObjectPtr<UMyUserWidget> OverlayWidget;

	UOverlayWidgetController* GetOverlayWidgetController(const FWidgetControllerParams& WCParams);

	void InitOverlay(APlayerController* PC, APlayerState* PS, UAbilitySystemComponent* ASC, UAttributeSet* AS);

private:

	UPROPERTY(EditAnywhere)
	TSubclassOf<UMyUserWidget> OverlayWidgetClass;

	UPROPERTY()
	TObjectPtr<UOverlayWidgetController> OverlayWidgetController;

	UPROPERTY(EditAnywhere)
	TSubclassOf<UOverlayWidgetController> OverlayWidgetControllerClass;
};

MyHUD.cpp

// 版权归暮志未晚所有。


#include "UI/HUD/MyHUD.h"
#include "UI/Widget/MyUserWidget.h"
#include "UI/WidgetController/OverlayWidgetController.h"

UOverlayWidgetController* AMyHUD::GetOverlayWidgetController(const FWidgetControllerParams& WCParams)
{
	if(OverlayWidgetController == nullptr)
	{
		OverlayWidgetController = NewObject<UOverlayWidgetController>(this, OverlayWidgetControllerClass);
		OverlayWidgetController->SetWidgetControllerParams(WCParams);
	}
	return OverlayWidgetController;
}

void AMyHUD::InitOverlay(APlayerController* PC, APlayerState* PS, UAbilitySystemComponent* ASC, UAttributeSet* AS)
{
	checkf(OverlayWidgetClass, TEXT("OverlayWidgetClass 未设置，请在HUD上面设置")); //会打印相关信息到log列表
	checkf(OverlayWidgetControllerClass, TEXT("OverlayWidgetControllerClass 未设置，请在HUD上面设置"));
	
	UMyUserWidget* Widget = CreateWidget<UMyUserWidget>(GetWorld(), OverlayWidgetClass); //创建Overlay用户控件
	OverlayWidget = Cast<UMyUserWidget>(Widget);

	const FWidgetControllerParams WidgetControllerParams(PC, PS, ASC, AS); //创建参数结构体
	OverlayWidgetController = GetOverlayWidgetController(WidgetControllerParams); //获取控制器层

	OverlayWidget->SetWidgetController(OverlayWidgetController); //设置用户控件的控制器层
	
	Widget->AddToViewport(); //添加到视口
}

我们的初始化函数也创建完成了，接下里就是HUD的InitOverlay()函数何时调用，在哪里调用？
由于这个函数需要PC,PS,ASC,AS这四个参数，所以我们需要在这四个值已经创建完成并初始化完成后的地方并且还能够获取HUD的一个对象里面调用。
而ASC初始化完成，需要在客户端和服务器都要初始化结束，我们是在对应的Character里面实现的，所以，我们也需要在对应的Character里面调用即可。
最终，我们选择了在玩家的Character里面，初始化完成ASC后，对HUD进行初始化。
在玩家角色里我们书写了InitAbilityActorInfo()函数，这里面可以获得ASC和AS还有PlayerState，从角色类身上我们也可以获得玩家控制器，那么参数就齐了。

我们可以先获取到PlayerController，可以通过PlayerController获取到HUD，并调用函数初始化。

void AHeroCharacter::InitAbilityActorInfo()
{
	APlayerStateBase* PlayerStateBase = GetPlayerState<APlayerStateBase>();
	check(PlayerStateBase); //检测是否有效，无限会暂停游戏
	//从playerState获取ASC和AS
	AbilitySystemComponent = PlayerStateBase->GetAbilitySystemComponent();
	AttributeSet = PlayerStateBase->GetAttributeSet();
	//初始化ASC
	AbilitySystemComponent->InitAbilityActorInfo(PlayerStateBase, this);

	//获取PC
	if(APlayerControllerBase* PlayerControllerBase = Cast<APlayerControllerBase>(GetController()))
	{
		if(AMyHUD* HUD = Cast<AMyHUD>(PlayerControllerBase->GetHUD()))
		{
			HUD->InitOverlay(PlayerControllerBase, PlayerStateBase, AbilitySystemComponent, AttributeSet);
		}
	}
	
}

应用HUD

在UE里创建一个蓝图类，基类基于创建的c++的HUD

设置Overlay用户控件类和Overlay控制器层类

打开基础游戏模式蓝图，设置HUD类为当前创建的蓝图HUD。

世界场景设置这里的HUD类也会默认改成当前的设置。

总结

上面这些我们主要实现了制作用户控件，并且能够在用户控件里面直接获取到控制器层，后续可以通过控制器层直接获取数据进行数据更新。
具体实现过程：在创建玩家控制角色过程中，初始化完成技能系统后，去调用HUD的InitOverlay()函数，来实现用户组件控制器层的初始化。InitOverlay()中将实现对用户控件和用户控件控制器层的实例化，并将UI添加到屏幕中。

测试

我们在用户组件基类中创建了一个WidgetControllerSet()函数，函数会在控制器层被设置时触发。这个函数可以在C++中调用，在蓝图中如果没有返回值可以当做通知使用，我们可以针对这一点对于当前实现的内容进行测试，查看是否在用户控件中这个通知是否有回调。

在WBP_Overlay的图标中，右键搜索WidgetControllerSet，会发现相应的通知函数

拉出来

获取到控制器层对象。

在设置控制器层对象完成后，打印它的名称。

如果在左上角能够显示当前控制器层的对象名称，证明实现了当前内容的功能。

在debug模式下，我们还可以通过打断点的方式实现调试检测。在代码左侧数字那里，悬停会出现红点，通过点击添加断点。

接着重新运行游戏。
会发现程序停止运行到此处，我们可以以此来检查停止运行之前的值是否有问题，并检查相应的变量设置的是否正确。