[ UE5 ] UI 필요 개념들 모음

UMG (Unreal Motion Graphic)
( 언리얼의 비주얼 UI 저작 툴 )

 

 

UWidget

UI에서 가장 기본이 되는 최상위 부모 클래스
SlateWidget을 TWeakPtr로 래핑

 

UPanelWidget

자식을 가질 수 있지만, UWidget은 자식을 가질 수 없음
패널은 주로 레이아웃을 잡는 용도로 사용 (CanvasPanel, VerticalBox 등)
실제로 화면에 그려지는 건 위젯 (Image, TextBlock 등)

UserWidget

사용자가 위젯 블루프린트로 UI를 편집하기 위한 클래스
UserWidget을 상속받은 클래스로 위젯 블루프린트 생성

 

Widget은 한 틱에 두 번씩 돌아감
1. Prepass 틱에서 자신의 DesiredSize 계산
2. OnPaint()에서 자식들의 DesiredSize 계산하여 크기와 위치 조절하여

FSlateWindowElementList를 채워줌

 

---

Widget Blueprint (WBP)

 

'유저 인터페이스-위젯 블루프린트' 선택하여 WBP 생성

주요 위젯 종류

위젯: Text, Image, Button, ProgressBar
패널 위젯: WidgetSwitcher, Overlay, Vertical/Horizontal Box, ListView, Spacer

Widget Animation

위젯의 위치나 불투명도와 같은 값을 시간에 따라 변경할 수 있는 기능
WBP에서 PlayAnimation() 함수로 실행 가능

 

Widget Component

액터에 WBP를 달 수 있는 컴포넌트
월드에 만들 건지, 스크린에 만들 건지 선택 가능

 

 

자주 쓰이는 함수

CreateWidget< T >(): 위젯 생성
AddToViewport(): Viewport에 붙임
RemoveFromParent(): 위젯 제거

NativeConstruct(): AddToViewport() 시 호출
NativeDestruct(): RemoveFromParent() 시 호출

NativePreConstruct(): NativeConstruct() 함수는 UMG에선 호출되지 않아 IsDesignTime() 함수와의 조합에 좋음
NativeOnInitialized(): 위젯이 생성되고 가장 먼저 불림, 각 위젯 별로 딱 한 번만 호출

NativePaint(): 화면에 그려질 때 호출 (Tick과 같은 시점)
NativeTick(): 화면에 그려지고 있을때 매 틱 호출

IsDesignTime(): UMG에서 그려질 때만 호출

 

위젯용 프로퍼티 메타

BindWidget: 위젯을 이름으로 바인딩
BindWidgetOptional: 있으면 바인딩, 없으면 안 함 (nullptr 검사 필수!)
BindWidgetAnim: 위젯 애니메이션을 이름으로 바인딩
BindWidgetAnimOptional: 있으면 바인딩, 없으면 안 함 (nullptr 검사 필수!)

 

Visibility (ESlateVisibility)

Visible: 화면에 그려지고 HitTest도 켬
HitTestInvisible: 화면에 그려지고 자신을 포함한 자식들의 HitTest를 다 끔
SelfHitTestInvisible: 화면에 그려지고 자신만 HitTest 끔
Hidden: 화면에 그리지 않지만 레이아웃 계산은 해서 화면에 자리는 차지함 (Collapsed 보다 느림)
Collapsed: 화면에 그리지도 않고 레이아웃도 계산하지 않음 (Hidden보다 빠름)

Render Opacity: 위젯의 불투명도, 0.0 ~ 1.0

 

InputMode

 

FInputModeGameAndUI: 게임과 UI 모두 입력 가능
FInputModeGameOnly: 게임에만 입력 가능
FInputModeUIOnly: UI에만 입력 가능

플레이어 컨트롤러에서 SetInputMode()로 세팅

---

위젯 리플렉터

 

현재 그려진 UI 상태 캡쳐
UI들의 프로퍼티 값들을 확인하거나 그려진 

UI의 WBP를 빠르게 찾을 수 있는 등 활용도가 좋음

 

필터를 이용하여 뷰포트에 그려진 것만 볼 수 있

---

라이브 코딩

'편집-에디터 개인설정-일반-라이브 코딩-라이브 코딩 활성화'

 

디버깅 모드 중 에디터를 끄지 않고 리빌드 할 수 있는 기능 (단축키 - [Ctrl+Alt+F11])
생성자를 수정하거나 헤더파일을 수정하는 건 불가능

 

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

UMG UI 디자이너

 

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

위젯 유형 레퍼런스

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

 

애니메이션

https://docs.unrealengine.com/4.27/ko/Basics/Components/Widget/

위젯 컴포넌트

https://docs.unrealengine.com/5.3/ko/using-the-slate-widget-reflector-in-unreal-engine/

Widget Reflector

https://docs.unrealengine.com/5.0/ko/using-live-coding-to-recompile-unreal-engine-applications-at-runtime/

라이브 코딩