C++와 Unreal Engine으로 3D 게임 개발 4-3

4-3. UI 애니메이션 효과 및 3D 위젯 UI 구현하기

1. UI 애니메이션 효과 디자인하기

 

UMG와 Animation에 대한 이해

언리얼 엔진에서는 UI를 만들 때 주로 UMG 사용 (Unreal Motion Graphics)

UMG에는 Animation 기능이 탑재되어 있음

→ 버튼이 클릭될 때 색이 바뀌거나, 텍스트가 화면 위로 등장했다가 사라지는 등 다양한 연출을 쉽게 구현 가능

 

Animation 패널

• UMG 에디터 내에서 메뉴 상단에서 Window - Animations를 클릭하면 애니메이션을 다루는 창이 뜸
• UMG 에디터 왼쪽 하단 (기본 레이아웃 기준)에 위치한 패널
• 여기서 새 애니메이션을 생성하거나, 이미 만든 애니메이션을 선택해 타임라인을 확인

Keyframe(키 프레임)

• 특정 시간대에 UI 속성(크기, 위치, 투명도, 색상 등)을 어떻게 바꿀지를 기록하는 지점
• 여러 개의 키 프레임을 연결하여 하나의 애니메이션 타임라인을 완성

---

Text 위젯에 애니메이션 적용하기

WBP_MainMenu → 디자이너 화면 TextBlock 2개 추가 → 이름 설정 GameOverText / TotalScoreText

두 TextBlock 모두 기본 Text를 설정 (Content - Text 카테고리에 입력)

 

GameOverText와 TotalScoreText를 Hidden (또는 Opacity=0) 상태로 배치

 

게임 시작 시 바로 보이지 않도록, TextBlock의 Visibility를 Hidden 으로 설정

애니메이션으로 텍스트를 천천히 보이게 할 것임

 

애니메이션 트랙 생성

GameOverText를 누른 상태로 + Animation 새 애니메이션 추가 →  이름 설정 Anim_TimeOver

 

+ Add 를 클릭하고 GameOverText를 선택

 

Keyframe (키 프레임) 설정

Render Opacity (투명도)를 트랙에 추가

 

시간 바를 옮기면서 각각 Render Opacity 값을 변경하면 자동으로 트랙에 Key가 등록됨

---

애니메이션을 Blueprint 재생 함수로 묶어두기

이벤트 그래프에서 PlayGameOverAnim Function을 만들기

 

Details 패널 → GameOverText → is Variable 체크

 

PlayTimeOverAnim을 호출하면 Anim_TimeOver 애니메이션이 재생되도록 구성

애니메이션 재생이 끝나면 자연스럽게 점수가 뜰 수 있도록, TotalScoreText 를 visible 처리를 하도록 연결

---

2. 게임 오버 UI 애니메이션 효과 추가하기

최종 점수 표시 애니메이션 호출

// SpartaPlayerController.cpp

void ASpartaPlayerController::ShowMainMenu(bool bIsRestart)
{
	if (HUDWidgetInstance)
	{
		HUDWidgetInstance->RemoveFromParent();
		HUDWidgetInstance = nullptr;
	}

	if (MainMenuWidgetInstance)
	{
		MainMenuWidgetInstance->RemoveFromParent();
		MainMenuWidgetInstance = nullptr;
	}

	if (MainMenuWidgetClass)
	{
		MainMenuWidgetInstance = CreateWidget<UUserWidget>(this, MainMenuWidgetClass);
		if (MainMenuWidgetInstance)
		{
			MainMenuWidgetInstance->AddToViewport();
			
			bShowMouseCursor = true;
			SetInputMode(FInputModeUIOnly());
		}
		
		if (UTextBlock* ButtonText = 
        Cast<UTextBlock>(MainMenuWidgetInstance->GetWidgetFromName(TEXT("StartButtonText"))))
		{
			if (bIsRestart)
			{
				ButtonText->SetText(FText::FromString(TEXT("Restart")));
			}
			else
			{
				ButtonText->SetText(FText::FromString(TEXT("Start")));
			}
		}

// 추가
		if (bIsRestart)
		{
			UFunction* PlayAnimFunc = 
			MainMenuWidgetInstance->FindFunction(FName("PlayGameOverAnim"));
			if (PlayAnimFunc)
			{
				MainMenuWidgetInstance->ProcessEvent(PlayAnimFunc, nullptr);
			}
			
			if (UTextBlock* TotalScoreText = Cast<UTextBlock> 
			   (MainMenuWidgetInstance->GetWidgetFromName("TotalScoreText")))
			{
				if (USpartaGameInstance* SpartaGameInstance = Cast<USpartaGameInstance>
				   (UGameplayStatics::GetGameInstance(this)))
				{
					TotalScoreText->SetText(FText::FromString(
					FString::Printf(TEXT("Total Score: %d"), 
					SpartaGameInstance->TotalScore)));
				}
			}
		}
	}
}

---

3. WidgetComponent로 캐릭터 체력 표시하기

WidgetComponent 개념 이해

UMG (언리얼 모션 그래픽스)로 만든 위젯 (텍스트, 이미지, 버튼 등)을 3D 월드에 붙일 수 있게 해주는 컴포넌트

예시: “NPC 머리 위 체력바”, “아이템 위에 ‘F 키를 누르세요’ 텍스트” 등

 

언리얼 엔진에서 WidgetComponent를 사용하면,

2D로만 보이던 UI를 공간 내 특정 위치에 붙여 놓고, 카메라 각도에 따라 회전하거나 크기가 달라지는 모습을 만들 수 있음

 

Actor에 부착(Attach)할 수 있는 컴포넌트 특정 UUserWidget(UMG Blueprint 클래스)을 3D 상에 표시하게 해줌

• 보통은 SetWidgetSpace(EWidgetSpace::World)로 설정하여, 월드 공간에 UI 가 존재하게 만듦
• 초기 상태에서 SetVisibility(false)로 해 두고, 플레이어가 가까이 왔을 때 SetVisibility(true)로 변경하여 표시할 수 있음

---

Widget Blueprint 준비하기

Contents Browser → UI - Widgets 폴더

User Interface → Widget Blueprint - User Widget 선택

새 위젯 블루프린트 만들기 → 이름 설정 WBP_HP

 

WBP_HP

Palette → Common - Text 선택 → 이름 설정 OverHeadHP

‘10 / 100’ 과 같이 예시 텍스트를 임시로 입력

폰트 종류, 크기, 색상 등은 자유롭게 설정

---

Character 클래스에 WidgetComponent 추가

 

SpartaCharacter.h

 

SpartaCharacter.cpp

 

OverheadWidget->SetWidgetSpace(EWidgetSpace::Screen);

 

스크린 모드: UI가 항상 화면에 고정된 것처럼 보임 / 플레이어의 카메라 방향과 상관없이 항상 정면에서 보임

월드 모드: 캐릭터의 움직임에 따라 글씨도 같이 돌아감

---

Character 클래스에서 WidgetComponent 위치 설정

BP_SpartaCharacter → Components 중 Overhead Widget 선택

→ User Interface 카테고리 → Widget Class를 WBP_HP로 설정

 

→ Space는 World로 우선 셋팅을 한 후 위젯의 위치와 크기 조정

(Screen으로 설정해 놓으면 블루프린트 상에서 위젯이 보이지 않을 수 있음)

수정 후 Space를 다시 Screen으로 설정

---

캐릭터 사망하였을 시 처리 로직 추가

 

SpartaCharacter.cpp

 

SpartaGameState.cpp

 

SpartaPlayerController.cpp

 

수정 이후 테스트 진행하기