[UE5] 블루아카이브 TPS게임 개발일지 (51) - EX 게이지 제작

이번엔 EX 스킬 게이지를 만들어 볼 것이다.

 

10칸으로 나누어진 게이지가 시간의 흐름에 따라 천천히 차는 것을 볼 수 있다.

 

언리얼 엔진에서 이러한 게이지를 구현하기 위해서는 UProgressBar를 사용하면 된다.

 

일전에 만들어두었던 KannaTPSOverlay 클래스에 EX 게이지에 해당하는 UProgressBar를 새로 만들었다.

 

//KannaTPSOverlay.h에 변수 추가
UPROPERTY(meta = (BindWidget))
UProgressBar* ExGauge;

UPROPERTY(meta = (BindWidget))
UTextBlock* ExNumberText;

 

ExGauge가 그 UProgressBar이다.

ExNumberText는 현재 몇 코스트가 찼는지를 나타내기 위한 UTextBlock이다.

 

그리고 meta = (BindWidget) 지정자를 사용했으므로, 이따가 블루프린트에서 컴포넌트를 만들 때 이름을 저것과 동일하게 해야한다.

 

 

이제 ExGauge가 차오르도록 해야 한다. 

 

다만 단순히 UI의 게이지가 차는 것이 다가 아니고, 실제로 칸나가 현재 EX 게이지 상태에 따라 스킬을 쓸 수 있어야 하기에, 게이지를 관리하며 채우는 것은 칸나의 AttributeComponent에서 하고, KannaTPSOverlay로는 단순히 그 값을 넘겨주기만 할 것이다.

 

EX 게이지도 캐릭터의 성분이므로 AttributeComponent가 담당하는 것이 적절한 것이다.

 

 

따라서 KannaTPSOverlay에는 값을 넘겨받아 UProgressBar를 업데이트하는 함수 하나만 추가할 것이다.

void UKannaTPSOverlay::SetExGaugePercent(float Percent)
{
	ExGauge->SetPercent(Percent);
}

 

 

다음으로 AttributeComponent에 EX 게이지 관련 변수를 추가하였다.

//AttributeComponent.h
UPROPERTY(EditAnywhere, Category = "Actor Attributes")
float ExRegenRate; //회복량

float ExGaugePercent;

 

 

그리고 TickComponent 함수 안에 ExGaugePercent가 시간 흐름에 따라 증가하도록 하는 코드를 추가하였다.

// Called every frame
void UAttributeComponent::TickComponent(float DeltaTime, ELevelTick TickType, FActorComponentTickFunction* ThisTickFunction)
{
	Super::TickComponent(DeltaTime, TickType, ThisTickFunction);

	// 체력 자동회복
	if (IsRecovering)
	{
		CurrentHealth += DeltaTime * RecoverRate;
		if (CurrentHealth > MaxHealth)
		{
			CurrentHealth = MaxHealth;
			IsRecovering = false;
		}
	}
	// EX 게이지 증가
	ExGaugePercent += DeltaTime * ExRegenRate;
	ExGaugePercent = FMath::Clamp(ExGaugePercent, 0, 1.f);
}

 

이제 AttributeComponent, KannaTPSOverlay 두개를 모두 참조하고 있는 KannaCharacter의 Tick 함수에서 게이지 UI를 실제로 업데이트하도록 할 것이다.

// Called every frame
void AKannaCharacter::Tick(float DeltaTime)
{
	Super::Tick(DeltaTime);

	/*생략*/

	if(Attributes && KannaTPSOverlay)
		KannaTPSOverlay->SetExGaugePercent(Attributes->GetExGaugePercent());
}

만약 이렇게 하지 않았다면 KannaTPSOverlay와 연결된 클래스가 하나 더 늘어나, 구조가 조금 더 지저분해지는 결과를 낳았을 것이다.

 

 

그리고 게이지가 차오름에 따라 현재 몇 코스트인지 나타내는 숫자도 업데이트해줘야한다.

이것은 말그대로 업데이트만 해주면 되는 것이므로, KannaTPSOverlay의 틱 함수에서 해주는 것이 적절하다.

 

 

액터의 Tick에 해당하는 UserWidget의 함수는 NativeTick이다.

void UKannaTPSOverlay::NativeTick(const FGeometry& MyGeometry, float InDeltatime)
{
	UE_LOG(LogTemp, Log, TEXT("%d"), (int32)(ExGauge->Percent * 10));
	ExNumberText->SetText(FText::AsNumber((int32)(ExGauge->Percent * 10)));
}

 

 

이렇게 하여 EX 게이지가 완성되었다.

 

이제 이걸 실제 게임에 넣어야하는데, 우선 적절한 게이지의 이미지부터 준비했다.

구글에 검색해도 원하는 모양이 없어, 직접 그림판 3D로 만들었다.

조금 삐뚤빼뚤하긴 하지만, 10칸으로 나뉘어져 있는 원하던 모양이다.

 

엔진의 WBP_KannaTPSOverlay에서 ExGauge, ExNumberText를 각각 만들어주고, ExGauge의 이미지로 이것을 사용해주었다.

 

 

모든 작업은 C++에서 처리해놓았기에, 앵커 설정 외에 별다른 작업은 필요하지 않다.

이름을 잘 맞춰 지어, 성공적으로 컴파일이 된 것을 볼 수 있었다.

 

 

 

 

게이지가 천천히 차고, 숫자도 잘 업데이트 되는 것을 볼 수 있었다.

 

다음 번엔 실제 EX 스킬을 만들어 볼 것이다.