[Unreal] UMG

1. UMG

UMG(Unreal Motion Graphic)는 언리얼 엔진에서 사용자 인터페이스를 구성할 수 있는 제작 툴이다.

2. 사용

UMG에서는 UI를 구성하는 구성 요소들을 위젯(Widget)이라는 개념으로 사용하며, 위젯 블루프린트(Widget Blueprint)에서 이 위젯들을 편집하여 UI를 제작할 수 있다.

디자이너탭은 시각적 레이아웃 구성을 위한 편집창이다.
그래프탭은 인터렉션 기능을 위해 마련된 코딩 영역의 편집창이다.

위젯은 계층 구조를 활용하여 구성하는 것이 좋다. 구현하고자 하는 씬을 최상단으로 하여 각각의 구성 요소들을 배치하고 구성 요소가 특정한 기능을 담을 경우엔 위젯으로 묶어서 그룹화한다.

최상위 위젯은 캔버스 패널을 활용하여 위젯들의 레이아웃을 구성한다.
하위 위젯은 특정 기능별로 오브젝트들을 그룹화하여 사용할 수 있게 해 준다. 특별한 기능이 없거나 다른 씬에서 재사용되지 않는다면, 하위 위젯으로 관리하지 않고 해당 씬에서 바로 작업하는 것이 좋다.

1) 위젯 생성

위젯을 생성한 후 팔레트 채널에서 사용자가 생성한 위젯들을 확인할 수 있다. 이 위젯들을 최상위 위젯(씬)에 배치하여 하나의 레이아웃을 구성할 수 있는 것이다.

2) 화면에 최상위 위젯 붙이기

2-1) 레벨 블루프린트 사용

레벨 블루프린트에서 최상위 위젯을 생성하고 그 위젯을 보여주도록 설정한다.

2-2) 게임 모드 사용

게임 모드를 확장하여 게임이 시작되었을 때 위젯을 새로 만들어서 표시하거나 나중에 제거 및 변경할 수 있도록 한다. 게임 모드 사용은 C++로 구현해 볼 것이다.

public:
	UFUNCTION(BlueprintCallable, Category = "UMG_Game")
	void ChangeMenuWidget(TSubclassOf<UUserWidget> NewWidgetClass);

protected:
	virtual void BeginPlay() override;

	UPROPERTY(EditAnyWhere, BlueprintReadOnly, Category = "UMG_Game")
		TSubclassOf<UUserWidget> StartingWidgetClass; // 게임이 시작될 때 표시될 위젯

	UPROPERTY()
		UUserWidget* CurrentWidget; // 현재 표시되고 있는 위젯

#include <Blueprint/UserWidget.h>

void AGameModeBase::BeginPlay()
{
	Super::BeginPlay();
	ChangeMenuWidget(StartingWidgetClass);
}

void AGameModeBase::ChangeMenuWidget(TSubclassOf<UUserWidget> NewWidgetClass)
{
	if (CurrentWidget != nullptr) {
		CurrentWidget->RemoveFromViewport();
		CurrentWidget = nullptr;
	}

	if (NewWidgetClass != nullptr) {
		CurrentWidget = CreateWidget(GetWorld(), NewWidgetClass);
		if (CurrentWidget != nullptr)
			CurrentWidget->AddToViewport();
	}
}

3. 활용

이제 UMG를 사용하여 타이틀 씬을 만들어볼 것이다.

타이틀 씬은 시작 시 타이틀과 메뉴가 보이며 GAME START 버튼을 누르면, 시나리오가 보이도록 구성되어 있다.

최상위 위젯
- 텍스트: 타이틀
- 하위 위젯: 메뉴
- 하위 위젯: 시나리오

1) 메뉴 위젯

메뉴 위젯은 세로로 구성된 레이아웃을 효과적으로 제작할 수 있는 버티컬 박스와 버튼, 스페이서를 사용했다. 구체적인 버튼 Hover, Click 등의 작업은 프로젝트에 맞게 설정하면 될 것 같다.

이제 시작할 때 애니메이션과 함께 노출되도록 할 것이다. 새로운 애니메이션을 하나 생성한 후 생성한 애니메이션을 클릭한 상태로 버튼의 Details 패널에서 Color and Opacity 옆 + 아이콘을 선택하여 해당 속성을 키프레임으로 추가한다. 추가로 버티컬 박스의 Transform도 추가한다.

그럼 아래와 같이 여러 키프레임이 애니메이션에 추가된 것을 확인할 수 있으며 원하는 애니메이션을 구현하면 된다.

위에서부터 차례대로 버튼이 나타날 수 있도록 alpha를 수정했다.
메뉴 위젯의 최상단인 버티컬 박스의 position을 수정했다.

마지막으로 그래프 탭에서 시작 시 애니메이션을 재생시키면 된다.

2) 시나리오 위젯

시나리오는 총 3개의 화면이 차례대로 보였다 사라진다. 모든 시나리오가 끝나면 Stage 1이 시작된다.

3개의 화면을 위해 각각의 시나리오 위젯을 생성한다. 이 위젯들은 이미지와 텍스트로 구성된 단순한 위젯이다.

최상위 위젯에 배치한 후 시나리오 위젯들을 배치한 후 시나리오 전환을 위한 애니메이션을 추가한다.

시나리오 위젯이 가장 앞에 보여야 하기 때문에 ZOrder를 배치된 다른 위젯보다 가장 크게 설정했다.
시나리오 순서에 맞게 alpha를 사용하여 FadeIn/Out 했다.
애니메이션의 시간은 애니메이션 재생 시 조절 가능하기 때문에 시나리오 사이의 FadeIn/Out 시간을 고려하여 구현했다.

마지막으로 그래프 탭에서 GAME START 버튼을 눌렀을 때 애니메이션을 재생시키면 되는데, 애니메이션이 종료되는 시점에 Stage 1으로 이동을 해야 하기 때문에 Animation Finished에 이벤트를 Bind 시켜 이벤트가 종료될 때 바로 동작하도록 추가했다.

참고

저작자표시