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

4-1. UI 위젯 설계와 실시간 데이터 연동하기

1. UMG (Unreal Motion Graphics) 위젯 기초 디자인 이해하기

 

HUD (Heads-Up Dispaly)

• 게임 내에서 플레이어에게 정보를 제공하기 위한 화면
• 게임 중 화면의 일부에 배치
• 플레이어가 현재 게임 상황을 이해하는 데 필요한 체력, 미니맵, 퀘스트 업데이트와 같은 데이터를 제공

언리얼 엔진의 HUD 시스템

1. Canvas 기반 HUD
   • AHUD 클래스를 상속하여 구현
   • 기본적인 2D 그리기 작업(텍스트, 이미지 등) 가능
   • 레거시 방식으로 간주되며, 간단한 HUD에 적합
2. UMG (Unreal Motion Graphics) 
   • 언리얼 엔진의 Widget Blueprint를 이용한 UI 시스템
   • 더 직관적이고 강력한 HUD 디자인 가능
   • 다양한 위젯(Text, Button, Image 등)을 사용하여 HUD를 제작

---

위젯 블루프린트 (Widget Blueprint)

언리얼 엔진에서 UI (User Interface)를 시각적으로 설계할 수 있도록 제공되는 에디터용 블루프린트

 

Contents 하위에 UI 폴더 생성 → 그 하위에 Widget 폴더

Widget 폴더에서 우클릭 → User Interface → Widget Blueprint 선택 → 이름설정 (WBP_HUD)

---

UI 요소 (UI Elements)

왼쪽 상단 Palette 탭 → 다양한 UI 요소들을 제공

• Text Block: 캐릭터 체력, 점수, 남은 시간 등 텍스트를 보여줄 때
• Button: Start Game, Quit Game 등 클릭 이벤트가 필요한 메뉴 버튼
• Progress Bar: 체력 게이지나 로딩 게이지 등을 시각적으로 표시할 때

---

점수, 시간, 레벨 표시를 위한 UI Widget 디자인

 

Canvas Panel

• Palette → Panel → Canvas Panel
• 모든 UI 요소를 포함할 수 있는 큰 도화지 같은 역할
• UI 요소들을 자유롭게 배치할 수 있는 가장 기본적인 레이아웃 패널

 

1920 x 1080 (16:9) 사이즈로 설정을 위해 21.5-24” monitor를 선택

---

원하는 Font 에셋 만들기

언리얼엔진에서는 기본적으로 Roboto 폰트 스타일만은 제공

 

폰트 스타일을 적용하기 위해서는 콘텐츠 폴더에 Font 를 import 해야함

 

원하는 폰트 파일 다운 (.ttf / .otf 확장자를 가진 폰트 파일)

Contents - UI - Fonts 폴더 만들기 → 폴더 에서 마우스 우클릭 → Import to /Game/UI/Fonts 클릭 후

→ .ttf , .otf 폰트 파일을 선택  → 언리얼 엔진 내로 임포트가 진행

 

임포트가 완료되면, 콘텐츠 브라우저에 새로운 폰트 에셋이 생김

생성된 Font Asset 을 Font Family 를 지정할 때 이 에셋을 적용할 수 있음

---

2. HUD Widget을 생성해 화면에 표시하기

Widget (HUD나 UI 요소)은 보통 PlayerController에서 구현

Widget이 플레이어의 입력과 상호작용하며 화면에 표시되는 요소이기 때문임

SpartaPlayerController.h

SpartaPlayerController.cpp

 

SpartaPlayerController → HUD Widget 표시 로직을 넣기

ASpartaPlayerController.h → TSubclassOf<UUserWidget> 변수를 선언

partaPlayerController.cpp 의 BeginPlay() 에 EnhancedInput 설정 직후 HUD 생성 로직을 이어서 작성

---

 

CreateWidget 이 작동하려면 UMG 모듈이 빌드 설정에 추가되어 있어야 함

UMG 모듈을 추가하기

 

PublicDependencyModuleNames.

프로젝트에 사용되는 공개된 종속 모듈

필수적으로 사용하는 엔진 기능

• Core : 코어 엔진의 기본 기능
• CoreUObject : 리플렉션 시스템, 가비지 컬렉터
• Engine : 게임 엔진의 주요 기능
• InputCore : 입력 시스템
• EnhancedInput : 기존 방식보다 유연하고 강력한 입력 처리 시스템

추가된 모듈

• UMG : 블루프린트와 관련된 모듈

SpartaProject.Build.cs

---

HUD Widget 테스트하기

 

BP_SpartaPlayerController 디폴트 블루프린트 or 게임 모드 설정에서 HUDWidgetClass에 WBP_HUD 를 지정

 

New Editor Window를 선택

에디터 상단의 Play 드롭다운 메뉴 클릭 → Advanced Settings 선택

 

Advanced Settings

게임 뷰포트 세팅을 HUD와 동일하게 1920x1080 사이즈로 수정

---

3. HUD 위젯과 GameState 데이터 연동하기

GameState에서 점수 데이터 바인딩하기

 

언리얼 에디터 → WBP_HUD (Widget Blueprint)

Details 패널 → Text 속성 → Bind 버튼 → Create Binding 선택

 

Binding 방식

직관적이긴하나, 매 프레임마다 틱 함수를 호출하기 때문에 UI가 복잡할 경우 과부하가 올 수 있음

---

SetText 방식으로 위젯 갱신하기

 

SpartaPlayerController.h / .cpp

SpartaPlayerController.h

 

SpartaPlayerController.cpp

---

SpartaGameState.h / .cpp

 

SpartaGameState.h

 

SpartaGameState.cpp