언리얼 - 엔진 22 : UI 구현 2, 애니메이션

김정환·2025년 4월 15일

unreal

Unreal Engine

목록 보기

23/24

UI 애니메이션

UE에서 UI를 만들때는 주로 UMG (Unreal Motion Graphics)를 사용.
UMG에는 Animation 기능이 탑재되어 있어서 키프레임을 찍어 다양한 연출 구현 가능.

애니메이션 작성

WBP 위젯 편집기의 아래에 Animation탭이 있음.
타임라인에 필요한 위젯을 올려두고 키프레임을 찍는 방식으로 애니메이션을 작성.
- 키프레임에 대해서 베지어 곡선 수정도 가능
이 기능으로 게임 오버가 되면 나올 화면에 애니메이션 효과를 줄것.

애니메이션 추가

애니메이션 패널의 좌측 상단에 + Animation 버튼 클릭.
새로 만들어진 Animation에 이름을 작성해주면 됨.
- 이 이름은 추후에 BP에서 활용할 때 변수명이 될 것.

위젯 추가

타임라인에 + Add 버튼을 눌러서 위젯을 추가
애니메이션을 줄 위젯에 + 버튼을 클릭하면 해당 위젯에 애니메이션을 줄 수 있는 속성이 나옴.
- 여기서 필요한 속성을 클릭
- 이동이나 크기를 바꿔줄거면 Transform
- 투명도를 바꾸고 싶으면 Color and Opacity 또는 Render Opacity

애니메이션 키프레임

유니티와 동일. 원하는 지점에 인디케이터를 두고 키프레임을 찍고 값을 조절하면 됨.

BP 함수 작성

이렇게 만들어준 애니메이션은 자동으로 재생되진 않음.
함수형태로 만들어주고 이를 호출해줘야 함.

WBP의 그래프 탭으로 와서 좌측에 리스트에서 FUNCTIONS에 애니메이션 재생 함수를 만들어줌.
위의 이미지 같이 PlayAnimation 함수에 변수로 만들었던 애니메이션 변수를 넣어서 재생시킬 수 있음.
- 위 그래프에서 SetVisibility를 해준 이유는 강의에서 TextBlock을 처음에는 Visibility 항목을 Hidden으로 설정했기 때문.

BP 함수를 C++에서 호출하기

지금까지는 C++에서 만든 함수를 BP에서 호출했는데 이젠 반대 상황.

UFunction* PlayAnimFunc = MainMenuInst->FindFunction(FName("PlayGameOverAnim"));

if (PlayAnimFunc)
{
    MainMenuWidgetInstance->ProcessEvent(PlayAnimFunc, nullptr);
}

UFunction* PlayAnimFunc = MainMenuInst->FindFunction(FName("PlayGameOverAnim"));
- HUD 인스턴스에서 FindFunction(FName)을 호출해서 이름 기반으로 함수를 찾음.
- 반환형은 UFunction*
UObject::ProcessEvent(UFunction*, void* Params)
- UObject (UE 객체들의 최상위 부모 클래스)에 내장된 ProcessEvent 호출
  - 유니티의 Invoke()와 유사
- 매개변수로 UFunction* 함수 포인터와 이 함수에서 사용할 매개변수를 요구함.

WidgetComponent 활용 : 캐릭터 체력 표시

Widget Component

UMG로 만든 위젯을 3D 월드에 붙일 수 있게 해주는 컴포넌트
- Actor에 부착할 수 있음
- ex) NPC 머리 위 이름, 아이템 위에 F키 누르세요 텍스트 등등
2D로만 보이던 UI를 공간 내 특정 위치에 붙여놓고 카메라 각도에 따라 회전하거나
크기가 달라지는 모습을 만들 수 있음.
Widget Component는 특정 UUserWidget(UMG BP 클래스)을 3D 상에 표시하게 해줌.
SetWidgetSpace(EWidgetSpace) : 위젯의 월드 공간 유형을 설정할 수 있음.
- EWidgetSpace::World 월드 모드, 3D 공간 특정 지점에 3D 오브젝트처럼 띄워줌.
- EWidgetSpace::Screen 스크린 모드, 카메라에 띄워주어 따라다니듯 보여줌
처음에는 SetVisibility(false)로 가려뒀다가 가까이 오면 SetVisibility(true)로 켜줄 수도 있음.

설정

// Character.h
UPROPERTY(EditAnywhere, BlueprintReadOnly, Category = "UI")
UWidgetComponent* OverheadWidget;

직접 할당할 수 있게 변수를 만들어줌
- 캐릭터 BP에 생성된 UWidgetComponent에 원하는 WBP 클래스를 넣어줄 수 있음.

// Character.cpp

// 생성자에서 초기화
OverheadWidget = CreateDefaultSubobject<UWidgetComponent>(TEXT("OverheadWidget"));
OverheadWidget->SetupAttachment(GetMesh());
OverheadWidget->SetWidgetSpace(EWidgetSpace::Screen);