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<UUserWidget>类（MyUserWidget），UserWidget指针 指向 用CreateWidget实例化UClass指向的类。并将它 AddToViewport。

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

7.效果如下：

点击