[Unreal C++] UMG로 타이틀 UI 제작하고, 띄우기

UMG 제작하기

솔직히 언리얼 UMG 한글 자료는 거의 없는 것 같다.

아예 감을 못잡다가 유튜브를 통해 잘 정리해주신 NDC 발표 자료를 발견했다.

유튜브는 화질이 안 좋고 소리가 작아서, 그냥 발표자료를 보는 게 편한 것 같다.

 

덕분에 UMG 제작에 대한 갈피를 잡았다. 감사합니당.

 

링크만 달았고, 안에 내용을 캡쳐한 건 아니니까 저작권 침해는 아니겠지??

http://ndcreplay.nexon.com/NDC2019/sessions/NDC2019_0029.html#k%5B%5D=UMG

NDC Replay

디자인에 신경쓰다보면 시간이 금방 가버린다. 기능부터 구현하는 게 우선이다.

나는 간단한 디자인으로 이렇게 만들었다.

 

왼쪽은 UW_NaviMenu, 오른쪽은 UW_Title이다.

왼쪽처럼 개별적으로 만든 뒤, 오른쪽처럼 캔버스에 추가하는 방식으로 제작했다.

UMG 애니메이션도 간단하게 만들었다.

 

UserWidget을 상속받은 클래스(UW_NaviMenu, UW_Title)를 만들어서 상속을 시킨다.

나중에 C++에서 기능을 구현할 수 있도록 연결해주는 작업이다.

함수를 부르면 애니메이션이 실행될 수 있도록 미리 구현해놓았다.

 

UW_NaviMenu 구현

#pragma once

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

UCLASS()
class MYRPG_API UUW_NaviMenu : public UUserWidget
{
	GENERATED_BODY()
	
public:
	virtual void NativeConstruct() override;

private:
	UPROPERTY(Meta = (BindWidgetAnim), Transient)
	class UWidgetAnimation* ShowUp;

public:
	void ShowUpAnim();
};

#include "UW_NaviMenu.h"

void UUW_NaviMenu::ShowUpAnim()
{
	PlayAnimation(ShowUp); // 실제로 애니메이션이 실행되는 코드.
}

UW_Title 구현

#pragma once

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

UCLASS()
class MYRPG_API UUW_Title : public UUserWidget
{
	GENERATED_BODY()

public:
	UPROPERTY(Meta = (BindWidget))
	class UUW_NaviMenu* WB_NaviMenu;

	void StartAnim();
};

#include "UW_Title.h"

#include "UW_NaviMenu.h"

void UUW_Title::StartAnim()
{
	WB_NaviMenu->ShowUpAnim();
}

 

타이틀 UI를 띄울 레벨 만들기

나는 빈 레벨로 만들었다.

 

화면에 띄우기

원래라면 UI는 HUD를 거쳐서 관리하는 게 편하다.

하지만 타이틀 UI는 간단하므로, PlayerController에서 바로 Widget을 관리하는 식으로 만들었다.

 

원래 클래스 하나하나 만들때마다 캡쳐해서 설명했지만, 이제는 그렇게까지 할 필요는 없을 것 같다.

 

PlayerController를 상속받는 클래스(Title_PC)를 생성한다.

Widget을 생성하고, 커서를 보이게 설정한다.

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/PlayerController.h"
#include "Title_PC.generated.h"

UCLASS()
class MYRPG_API ATitle_PC : public APlayerController
{
	GENERATED_BODY()
	
public:
	ATitle_PC();
	virtual void BeginPlay() override;

public:
	UPROPERTY(EditDefaultsOnly, BlueprintReadWrite, Category = UI)
	TSubclassOf<class UUW_Title> TitleUIClass;
	class UUW_Title* TitleUIObject;
};

#include "Title_PC.h"
#include "../UI/UW_Title.h"

ATitle_PC::ATitle_PC()
{
	static ConstructorHelpers::FClassFinder<UUW_Title> WB_Title(TEXT("WidgetBlueprint'/Game/Blueprints/UI/WB/WB_Title.WB_Title_C'"));
	if (WB_Title.Succeeded())
	{
		TitleUIClass = WB_Title.Class;
	}
}

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

	TitleUIObject = CreateWidget<UUW_Title>(this, TitleUIClass);
	TitleUIObject->AddToViewport();
	
	SetShowMouseCursor(true);
	SetInputMode(FInputModeUIOnly());
}

 

애니메이션 기능을 아까 구현했으니,

Widget을 생성하면서 Hidden으로 숨겨놓고, 1초 뒤에 Visible로 바꾸면서 애니메이션이 실행되도록 했다.

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

	TitleUIObject = CreateWidget<UUW_Title>(this, TitleUIClass);
	TitleUIObject->AddToViewport();
	TitleUIObject->SetVisibility(ESlateVisibility::Hidden);

	SetShowMouseCursor(true);
	SetInputMode(FInputModeUIOnly());

	FTimerHandle StartAnimDelayTimerHandle;
	GetWorld()->GetTimerManager().SetTimer(StartAnimDelayTimerHandle, FTimerDelegate::CreateLambda([&]()
		{
			TitleUIObject->SetVisibility(ESlateVisibility::Visible);
			TitleUIObject->StartAnim();
		}), 1.0f , false);
}

GameModeBase를 상속받는 클래스(Title_GM)을 생성한다.

맵이 시작하면 Title_PC가 PlayerController로 부여되게끔 한다.

월드 세팅에서 GameMode를 설정해줘야 한다.

#pragma once

#include "CoreMinimal.h"
#include "GameFramework/GameModeBase.h"
#include "Title_GM.generated.h"

UCLASS()
class MYRPG_API ATitle_GM : public AGameModeBase
{
	GENERATED_BODY()
	
public:
	ATitle_GM();
};

#include "Title_GM.h"
#include "Title_PC.h"

ATitle_GM::ATitle_GM()
{
	PlayerControllerClass = ATitle_PC::StaticClass();
}

 

구현 결과

확실히 UMG에 애니메이션을 넣으니까 투박한 느낌이 없어서 좋은 것 같다.