BossFight - Player UI(HP)

Player UI(HP)

이번에는 플레이어UI을 작성하고, 화면에 출력 시켜보자, 추가로 HP를 연동시켜, HP가 감소될때마다 UI가 갱신되는 기능도 구현 해보자.

BFWidgetBase를 상속받아 TWBP_Bar를 생성하고, 위와같이 PreConstruct를 구현 해주었다. 이를 통해, Bar의 크기와, 채워지는 색상을 정의 할수 있게 되었다.

그후 BFWidgetBase를 상속 받아 실제 PlayerUI가 될 WBP_Player_UI를 작성 하고 아래 사진과 같이 배치 해주었다.

색상을 초록색으로 크기를 500 x 20으로 설정 하였다.

다음으로 플레이어 캐릭터의 HP를 연동 해야한다. 이는 PlayerUIComponent에서 델리게이트를 선언 하여 구현 해보도록 하겠다.

🎮 UPlayerUIComponent.h

DECLARE_DYNAMIC_MULTICAST_DELEGATE_OneParam(FOnPercentChangedDelegate, float, NwePercent);

class IInteractablePropInterface;

UCLASS()
class BOSSFIGHT_API UPlayerUIComponent : public UPawnUIComponent
{
	GENERATED_BODY()
	// 중략
	UPROPERTY(BlueprintAssignable)
	FOnPercentChangedDelegate OnCurrentHealthChanged;
};

위와 같이 델리게이트를 선언하고, UPROPERTY(BlueprintAssignable)을 통해 블루프린트에서 할당 할 수 있도록 하였다.

다음으로 AttributeSet애서 HP가 감소 될때마다 현재 HP와 최대 HP의 비율을 구하고 Brodcast를 통해 델리게이트를 실행 시키도록 코드를 작성 하자.

void UBFAttributeSet::PostGameplayEffectExecute(const FGameplayEffectModCallbackData& Data)
{
	if (!CachedPawnUIInterface.IsValid())
	{
		CachedPawnUIInterface = TWeakInterfacePtr<IPawnUIInterface>(Data.Target.GetAvatarActor());
	}

	if (Data.EvaluatedData.Attribute == GetCurrentHPAttribute())
	{
		const float NewCurrentHP = FMath::Clamp(GetCurrentHP(), 0.0f, GetMaxHP());
		SetCurrentHP(NewCurrentHP);

		if (UPlayerUIComponent* PlayerUIComponent = CachedPawnUIInterface->GetPlayerUIComponent())
		{
			PlayerUIComponent->OnCurrentHealthChanged.Broadcast(GetCurrentHP() / GetMaxHP());
		}
	}
    // 중략
}

위와같이 Player의 HP가 변동 할 때 OnCurrentHealthChanged델리게이트를 Broadcast() 하도록 코드를 작성 하였다.

이후 WBP_PlayerUI에서 해당 델리게이트에 아래와같이 노드를 연결 하였다.

마지막으로 GameplayAbility를 통해 Widget을 생성 및 부착 해보자.

GameplayAbility를사용하는 이유는 BeginPlay에서 UI를 부착해도 AttributeSet이 아직 초기화 되지 않아서, UI가 갱신되지 않기 때문에, Ability를 OnGiven으로 설정하여, AbilitySystem 및 AttributeSet이 초기화 되고나서 작동 하도록 하였다.

위와 같이 Base Ability를 작성하고, 자식 Ability를 생성 WidgetClass를 할당하여, DA_Player에 추가해주었다.

실행 결과

게임을 실행하면 HP Bar가 가득 찬 상태로 시작 한다.

임시로 H키에 HP를 감소 시키는 GameplayEffect를 작동 시키도록 하고 실행 시켜본 결과, 감소된 만큼 HP_Bar가 줄어드는 것을 확인 하였다.

다음에는 스테미나 UI를 구현 하고, 달리기 작동시 스태미나가 지속적으로 감소 하는 것을 구현 해보겠다.