UE5 C++ Widget练习 Button 和 ProgressBar创建血条

一.

1.C++创建一个继承Widget类的子类， 命名为MyUserWidget

2.加上Button 和 UserWidget的头文件

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

3.声明两个按钮 组件，两个浮点数。每次按Start按钮，当前生命值就减一。和两个准备用来代理调用的函数Start，Quit。减少并更新生命值状态的函数UpdateLife。

并且重写Initialize函数，实现初始化。相当于Actor里个Begin（）。

	UPROPERTY(meta = (BindWidget))
		UButton* ButtonStart;
	UPROPERTY(meta = (BindWidget))
		UButton* ButtonQuit;
	UPROPERTY(EditAnywhere,BlueprintReadWrite,Category = "MyHealth")
	//UPROPERTY(EditAnywhere, BlueprintReadWrite, Category = "MyTestDataTableStruct")
	float CurrentLife = 100.f;
	UPROPERTY(EditAnywhere,BlueprintReadWrite,Category = "MyHealth")
	float MaxLife = 100.f;
	void UpdateLife();
 
	virtual bool Initialize()override;
	UFUNCTION()
	void Start();
	UFUNCTION()
	void Quit();

4.使用Button里的，OnClicked 绑定代理。

bool UMyUserWidget::Initialize()
{
	if (!Super::Initialize())
	{
		return false;
	}
	//ButtonStart->OnClicked.AddDynamic(this,&MyUserWid);  //代理绑定
	ButtonStart->OnClicked.AddDynamic(this,&UMyUserWidget::Start);
	ButtonQuit->OnClicked.AddDynamic(this, &UMyUserWidget::Quit);
	return true;
}

5.代理时，按下按钮里的函数再套用减少血量的函数。

void UMyUserWidget::Start()
{
	UpdateLife();
	GEngine->AddOnScreenDebugMessage(-1,5.f,FColor::Red,TEXT("Start"));
}
 
void UMyUserWidget::Quit()
{
	GEngine->AddOnScreenDebugMessage(-1, 5.f, FColor::Red, TEXT("Quit"));
}

二 蓝图里操作

1.创建一个Widget Blueprint。

2.加入三个组件，按钮组件需要和C++里命名一样。

3.将新建的UMG_Widget里的classsetting里的继承的父类，修改为MyUserWiget。这样C++里的逻辑就在这里了。

4.将ProgessBar里Percent，创建绑定的蓝图函数。

5.这里的C++声明过的参数可以直接访问到，计算现阶段血量的百分比，赋值给ProgressBar

6.在PlayerController里面，添加这个Widget。之前PlayerController里曾设置Pawn，并绑定相机。

官方文档：

C++里的写法如下：

新添加Blueprint/UserWidget.h的头文件

#include "MyPlayerController.h"
#include "MyPawn.h"
#include"Blueprint/UserWidget.h"

UClass指针 指向 动态加载LoadClass类（MyUserWidget），UserWidget指针 指向 用CreateWidget实例化UClass指向的类。并将它 AddToViewport。

void AMyPlayerController::BeginPlay()
{
	Super::BeginPlay();
	UClass* widgetClass = LoadClass(NULL,TEXT("/Script/UMGEditor.WidgetBlueprint'/Game/UMG_Widget.UMG_Widget_C'")); //动态加载
	UUserWidget* MyWidgetClss = nullptr;
	MyWidgetClss = CreateWidget(GetWorld(),widgetClass); //创建UUserWidget
	MyWidgetClss->AddToViewport();
}

7.效果如下：

点击