[언리얼] 학원 16일차: UMG: 언리얼 UI

이전 글 보기

https://mountain-noroo.tistory.com/62

[언리얼] 학원 15일차: AI Controller 플레이어 추적

 

 

UMG

https://docs.unrealengine.com/5.1/ko/umg-ui-designer-for-unreal-engine/

UMG UI 디자이너

UMG란 언리얼 모션 그래픽을 뜻한다. UI 제작 툴로써 Unity의 UGUI와 비슷한 역할을 하고 있다.

UE5에서는 UMG를 사용하고 있지만 이전 버전에서는 HUD, Slate를 사용해 UI를 만들었다고 한다.

유니티도 아직 NGUI를 사용하는 곳이 있는 만큼, 시간이 있다면 HUD, Slate도 공부해 보는 것도 나쁘지 않을 듯하다.

 

우클릭 -> 유저 인터페이스 -> 위젯 블루프린트

(위의 경우는 UserWidget을 상속받아 직접 만든 C++클래스에서 파생시켜서)

UI 편집기를 만들 수 있다.

 

UMG 핵심요소

 

스케일 박스

해상도가 바뀌더라도 UI 크기가 비율대로 조절된다. (유니티 캔버스의 UI Scale Mode - Scale With Screen Size 기능같음)

우측 상단의 화면 크기에서 선택한 해상도 비율로 조절됨.

 

크기 박스: 밖에 여백이 생길지언정 스케일박스 크기가 달라져도 비율은 유지한다. (Screen Match Mode 기능 같음)

자손 레이아웃에서 원하는 크기 설정 가능

캔버스 패널: 자식을 여러 명 가질 수 있는, 실질적으로 UI가 그려지는 패널. (Panel)

 

 

사용자 생성 위젯

위젯 시스템은 위젯 안에 위젯을 넣을 수 있는 구조로 직접 만든 위젯을 다른 위젯 안에 넣을 수 있다.

 

 

앵커

 

앵커 드롭다운을 누르면 앵커의 위치를 쉽게 바꿀 수 있다.

https://docs.unrealengine.com/4.27/ko/InteractiveExperiences/UMG/UserGuide/Anchors/

앵커

유니티를 다뤘던 경험이 있다면 앵커를 어렵지 않게 다룰 수 있겠지만 언리얼로 처음 접한다면... UI를 다룰 때 중요한 개념이기 때문에 앵커에 대해 깊이 이해하는 것이 중요할 것 같다...

 

 

UI를 화면에 띄우기

AUnreal_3thGameModeBase::AUnreal_3thGameModeBase()
{	
	ConstructorHelpers::FClassFinder<UUserWidget> ManHUD(TEXT("/Script/UMGEditor.WidgetBlueprint'/Game/BlueprintClass/UMG/HUD/MainHUD.MainHUD_C'"));

	if (ManHUD.Succeeded())
	{
		m_MainHudClass = ManHUD.Class;
	}

}

void AUnreal_3thGameModeBase::BeginPlay()
{
	Super::BeginPlay();

	if (IsValid(m_MainHudClass))
	{
		m_MainHUD = Cast<UMainHUD_Base>(CreateWidget(GetWorld(), m_MainHudClass));
		if (!IsValid(m_MainHUD))
		{
			// 다운캐스팅 실패 ==> UMainHUD_Base 로부터 파생된 블루프린트가 아니다.
			LOG(LogTemp, Error, TEXT("MainHUD_Base 캐스팅 실패"))
		}
		else
		{
			m_MainHUD->AddToViewport();
		}
	}
}

MainHUD를 GameMode에서 가지고 있으며 화면에 띄우도록 하였다.

일단 위젯도 블루프린트 클래스이기 때문에 클래스 파인더로 가져왔다.

 

CreateWidget(게임월드, 생성할 위젯) 함수를 통해 위젯을 클래스로부터 생성할 수 있고

화면에 띄우고 싶은 위젯의 AddToViewport() 멤버함수를 통해 위젯을 화면에 띄울 수 있다.

 

+ 블루프린트를 이용하여 뷰포트에서 위젯을 보이게 하고 싶을 때

 

 

위젯 C++ 클래스

C++ 클래스로는 UserWidget을 상속받아 만들 수 있다.

UCLASS()
class UNREAL_3TH_API UMainHUD_Base : public UUserWidget
{
	GENERATED_BODY()


private:
	UPlayerInfo_Base* m_PlayerInfo;


public:
	void SetPlayerHPRatio(float _Ratio);

public:
	virtual void NativeConstruct() override;
	virtual void NativeTick(const FGeometry& _geo, float _DT) override;
	
};

NativeConstruct, NativeTick이라는 가상 함수를 상속받아 구현할 수 있는데

순서대로 생성자, 매 프레임 호출되는 역할을 한다.

 

 

상속받은 블루프린트에서 넣은 위젯을 부모 C++ 클래스에서 가져오는 법

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

	m_PlayerInfo = Cast<UPlayerInfo_Base>(GetWidgetFromName(FName("PlayerInfo")));
	if (!IsValid(m_PlayerInfo))
	{
		LOG(LogTemp, Error, TEXT("PlayerInfo"));
	}

}

GetWidgetFromName(FName 위젯 이름)으로 이 클래스를 상속받은 블루프린트에서 넣은 하위 위젯을 가져올 수 있다.

UserWidget 타입으로 반환되기 때문에 실제 타입으로 다운캐스팅하여 사용하면 된다.

위 MainHUD 블루프린트 클래스는 MainHUD_Base를 상속받았으며 PlayerInfo라는 이름의 PlayerInfo_Base를 상속한 사용자 생성 위젯을 가지고 있다.

 

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

	m_Image = Cast<UImage>(GetWidgetFromName(FName("PlayerImg")));
	m_HPBar = Cast<UProgressBar>(GetWidgetFromName(FName("HPBar")));
	m_MPBar = Cast<UProgressBar>(GetWidgetFromName(FName("MPBar")));
}

위 코드는 PlayerInfo_Base에서 언리얼에서 기본 제공되는 위젯 타입인 이미지, 프로그레스바를 가져오는 부분이다.

이런 위젯들도 손쉽게 C++ 클래스로 가져올 수 있다.

 

 

다른 클래스에서 위젯클래스를 가져오기

AUnreal_3thGameModeBase* GameMode = Cast<AUnreal_3thGameModeBase>(UGameplayStatics::GetGameMode(GetWorld()));
GameMode->MainHUD()->SetPlayerHPRatio(0.01f);

여기서는 게임 모드에서 MainHUD를 관리하고 있기 때문에 GamePlayStatics에서 제공하는 GetGameMode함수로 게임 모드를 가져와 UI에 접근할 수 있다.

 

 

텍스처 스트리밍

https://docs.unrealengine.com/4.27/ko/RenderingAndGraphics/Textures/Streaming/Config/

텍스처 스트리밍 환경설정

r.Streaming.PoolSize

엔진에서 텍스처에 할당하는 MB 단위 풀 크기입니다. 이 풀에는 UI 텍스처, NeverStream 텍스처, 큐브맵, 스트리밍 텍스처가 들어갑니다. 일부 플랫폼의 경우 이 풀에 GPU 파티클 버퍼나 버텍스 버퍼같은 텍스처 이외 리소스도 들어갈 수 있습니다. 0 으로 설정되면, 풀 크기가 무제한입니다.

 

기본적으로 텍스처에 할당되는 용량이 작기 때문에 해당 명령어를 하단 cmd 창에 작성하여 사이즈를 늘릴 수 있다.

r.Streaming.PoolSize 2048 (한 칸 띄고 원하는 용량(MB 단위) 적기)