Unreal - 버프창

미리보기

구현내용

아이템을 사용했을때 이펙트 표시와

버프 시간만큼 버프칸에 시간만큼 표시되도록 제작하였습니다.

메이플스토리의 버프칸을 모티브로 삼았습니다

 

예시가 된 버프칸

 

구현

버프의 지속시간만큼 회색표시가 점점 올라가도록 설계하였습니다

프로그래스바로 Bottom to Top 으로 제작하였습니다

 

사용된클래스

사용된 클래스	사용목적
BuffWidget(위젯)	플레이어의 MainWidget에 표시될 버프칸
BuffSlotWidget(위젯)	BuffWidget에 들어갈 버프 한 칸

 

구현

위젯의 NativeTick을 사용하여 ProgressBar 의 퍼센트를 제어해주었습니다

#pragma once

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


UCLASS()
class PORTFOLIOMS_API UBuffSlotWidget : public UUserWidget
{
	GENERATED_BODY()
	
public:
	virtual void NativeConstruct() override;
	virtual void NativeTick(const FGeometry& MyGeometry, float InDeltaTime) override;

public:
	UPROPERTY(meta = (BindWidget))
	class UImage* Image_BuffSlot;

	UPROPERTY(meta = (BindWidget))
	class UProgressBar* ProgressBar_Percent;

public:
	float totalDuration = 0.f;
	float elapsedTime = 0.f;

	bool bActive = false;

public:
	UFUNCTION()
	void StartBuff(UTexture2D* buffIcon, float duration);

	UFUNCTION()
	void EndBuff();
};

 

#include "BuffSlotWidget.h"
#include "Components/Image.h"
#include "Components/ProgressBar.h"

void UBuffSlotWidget::NativeConstruct()
{
	Super::NativeConstruct();

	ProgressBar_Percent->SetPercent(0.f);
}

void UBuffSlotWidget::NativeTick(const FGeometry& MyGeometry, float InDeltaTime)
{
	Super::NativeTick(MyGeometry, InDeltaTime);

	if (!bActive)
		return;

	elapsedTime += InDeltaTime;
	float buffPercent = elapsedTime / totalDuration;
	ProgressBar_Percent->SetPercent(FMath::Clamp(buffPercent, 0.f, 1.f));
	if (elapsedTime >= totalDuration)
		EndBuff();
}

void UBuffSlotWidget::StartBuff(UTexture2D* buffIcon, float duration)
{
	if (!buffIcon || duration <= 0.f)
		return;

	Image_BuffSlot->SetBrushFromTexture(buffIcon);
	Image_BuffSlot->SetVisibility(ESlateVisibility::Visible);

	totalDuration = duration;
	elapsedTime = 0.f;
	bActive = true;

	ProgressBar_Percent->SetPercent(0.f);

}

void UBuffSlotWidget::EndBuff()
{
	bActive = false;
	elapsedTime = 0.f;
	totalDuration = 0.f;

	ProgressBar_Percent->SetPercent(0.f);
	Image_BuffSlot->SetVisibility(ESlateVisibility::Collapsed);
}

 

사용될 버프위젯의 컨테이너입니다

#include "BuffWidget.h"
#include "Components/WrapBox.h"
#include "BuffSlotWidget.h"

void UBuffWidget::NativeConstruct()
{
	Super::NativeConstruct();
}

void UBuffWidget::AddBuff(UTexture2D* buffIcon, float duration)
{
	if (!WrapBox_BuffSlot || !buffslotWidgetClass)
		return;

	UBuffSlotWidget* setSlot = CreateWidget<UBuffSlotWidget>(GetWorld(), buffslotWidgetClass);
	if (!setSlot)
		return;


	setSlot->StartBuff(buffIcon, duration);
	WrapBox_BuffSlot->AddChild(setSlot);

	FTimerHandle th_buffTimer;
	GetWorld()->GetTimerManager().SetTimer(th_buffTimer, [setSlot]()
		{
			setSlot->RemoveFromParent();
		}, duration, false);
}

 

 

메인위젯에 추가해주었습니다

 

결과

아이템을 먹으면 그에맞는 이펙트가 표시되며 아이템의 효과가 발동합니다

 

 

아이템을 먹으면 좌측하단의 버프칸에 추가되며 시간만큼 표시됩니다

 

영상