UE4:来为我们的角色制作一个血条吧

2,065 阅读4分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第21天,点击查看活动详情

前言

角色扮演类的游戏免不了要给角色添加一个血条来显示当前角色的生命值,所以血条对于玩家来说也是一个非常重要的提示工具,今天就让我来带大家用 UE4 的进度条制作一个简单的血条吧!

正文

本文制作血条分为俩个部分,分别是通过蓝图来设计UMG,然后再通过 C++ 代码去实现血条生命值。

蓝图

打开我们的虚幻编辑器,然后右键选择 UserInterface->Widget Blueprint 来创建一个UI,取名 Health_Widget。

image

双击打开它,然后我这边血条用的是Progress Bar来实现,于是找到控件 Progress Bar,将其拖入到UI中,并调整大小。

image

然后为了测试我们的血条是有进度的,我在UI中添加了一个测试按钮,点击按钮后,血条就会慢慢回血。最后的效果图如下:

image

接下来需要将这个 UI 关联到我们的代码,新建一个 C++ 类继承自 UserWidget, 我们取名 HealthWidget:

image

回到我们的 Health_Widget 中,然后在类设置中将其 Parent Class 设置为我们新创建的类:HealthWidget。

image

代码

蓝图设置完成以后,接下来就要来写我们的代码逻辑了,通过 VS 打开我们的UE项目工程,然后在 HealthWidget 中,通过UE的反射机制来获取控件的实例。这里为了测试,我使用了定时器的方式来给血条回血,代码比较简单,如下:

HealthWidget.h

#pragma once

#include "CoreMinimal.h"
#include "Blueprint/UserWidget.h"
#include "Components/Button.h"
#include "Components/ProgressBar.h"
#include "Components/TextBlock.h"
#include "HealthWidget.generated.h"

/**
 * 
 */
UCLASS()
class DP_API UHealthWidget : public UUserWidget
{
	GENERATED_BODY()

public:
    virtual bool Initialize() override;

	UFUNCTION()
	void TestLoadEvent();

	void Repeating();

public:
	UPROPERTY(Meta = (BindWidget))
	UProgressBar *HealthProgressBar;
	UPROPERTY(Meta = (BindWidget))
	UButton *TestBtn;
	UPROPERTY(Meta = (BindWidget))
	UTextBlock *processValue;

	float pValue;

	FTimerHandle MemberTimerHandle;
};

HealthWidget.cpp

// Fill out your copyright notice in the Description page of Project Settings.


#include "HealthWidget.h"
#include "TimerManager.h"

bool UHealthWidget::Initialize()
{
	if (!Super::Initialize())
	{
		return false;
	}

	if(TestBtn != nullptr)
	{
		TestBtn->OnClicked.__Internal_AddDynamic(this, &UHealthWidget::TestLoadEvent, FName("TestLoadEvent"));
	}

	return true;
}


void UHealthWidget::TestLoadEvent()
{
	FTimerManager& timerManager = GetWorld()->GetTimerManager();
	timerManager.SetTimer(MemberTimerHandle, this, &UHealthWidget::Repeating, 2.0f, true, 0);
}

void UHealthWidget::Repeating()
{
	pValue += 2.0f;
	if(pValue > 100)
	{
		GetWorld()->GetTimerManager().ClearTimer(MemberTimerHandle);
		return;
	}
	HealthProgressBar->SetPercent(pValue/100);
}

这里需要注意的是,通过 UPROPERTY(Meta = (BindWidget)) 来获取控件实例的时候,在我们的UMG里名称需要与我们的代码保持一致,如图:

image

最后

最终效果如图:

image

一个简单的角色血条就做好了,你学会了吗?

我是杰少,如果您觉的我写的不错,那请给我 点赞+评论+收藏 后再走哦!

往期文章:

请你喝杯 ☕️ 点赞 + 关注哦~

  1. 阅读完记得给我点个赞哦,有👍 有动力
  2. 关注公众号--- HelloWorld杰少,第一时间推送新姿势

最后,创作不易,如果对大家有所帮助,希望大家点赞支持,有什么问题也可以在评论区里讨论😄~**