[UE5] UI

UI

• 언리얼 엔진에서는 UMG(Unreal Motion Graphics)라는 도구를 이용해 UI를 설계하고 블루프린트 또는 C++로 UI 기능을 구현할 수 있습니다.

Widget Blueprint 만들기

• 우클릭 -> User Interface -> Widget Blueprint

HpBar Widget 만들기

• SizeBox와 ProgressBar 추가

SizeBox의 크기를 오버라이드 해서 정할 수 있다.

• Is Variable을 체크하면 외부에서 변수로 사용할 수 있다.
• 변수로 만들어 블루프린트 혹은 C++로 사이즈를 수정할 수 있다

캐릭터의 머리 위에 HpBar 추가하기

• 캐릭터에 Widget Component 추가
• Widget Class를 만들어둔 WBP_HpBar로 설정
• Space를 Screen으로 설정하면 UI가 항상 카메라를 보도록 설정할 수 있다
• Draw at Desired Size를 선택하면 Widget Blueprint에서 만든 사이즈로 설정된다.

C++이랑 연동하기

• AnimInstacne처럼 블루프린트에서는 C++ 클래스를 상속받아서 사용하면 된다.
• Build.cs에 UMG 모듈 추가

User Widget을 상속받은 클래스 생성

• 앞으로 해당 클래스를 상속받아 블루프린트 클래스를 만들어 사용한다.
• 추후 공용 코드를 넣어두면 유용하다.

// h
UCLASS()
class R1_API UMyHpBarWidget : public UMyUserWidget
{
	GENERATED_BODY()
	
public:
	UMyHpBarWidget(const FObjectInitializer& ObjectInitializer = FObjectInitializer::Get());

	virtual void NativeConstruct() override;

public:
	void SetHpRatio(float Ratio);

protected:
	UPROPERTY(meta=(BindWidget), BlueprintReadWrite)
	TObjectPtr<class UProgressBar> HpBar;
};

// cpp
void UMyHpBarWidget::SetHpRatio(float Ratio)
{
	if (HpBar)
	{
		HpBar->SetPercent(Ratio);
	}
}

• UserWidget을 상속받은 MyUserWidget 클래스를 상속받아서 만든다.
• NaviteConstruce는 Beginplay와 같은 시작 시 초기화해주는 용도로 사용된다.
• meta=(BindWidget) 키워드를 통해 변수 이름과 Widget Blueprint의 위젯 이름과 바인딩해준다.

캐릭터에 HpBar를 업데이트 해주는 함수 추가

// h
void RefreshHpBarRatio();

// cpp
void AMyCharacter::RefreshHpBarRatio()
{
	if (HpBarComponent)
	{
		float Ratio = static_cast<float>(Hp) / MaxHp;
		UMyHpBarWidget* HpBar = Cast<UMyHpBarWidget>(HpBarComponent->GetUserWidgetObject());
		HpBar->SetHpRatio(Ratio);
	}
}