[Unreal Engine 5] 위젯 애니메이션 (C++)

서론

현재 진행중인 UE5 엔진을 사용한 사이드 프로젝트에서 직접 위젯에 애니메이션을 추가해보며 작업 내용을 간단히 정리해보기 위해 글을 작성하게 되었습니다.

 

언리얼 엔진에서 위젯 애니메이션을 추가하는 기본적인 방법과 이를 C++ 코드와 연동하여 특정 이벤트 발생 시 애니메이션을 재생하는 방법에 대해 정리해보도록 하겠습니다.

위젯에 애니메이션 추가하기

저는 로비 화면의 우측 메뉴 바에서 버튼을 누르면 해당 위젯이 점점 커지면서 화면에 나타나도록 하는 애니메이션을 추가하게 되었습니다.

 

이번에는 실습을 위해 "FrameBar" 이름의 이미지 위젯에 애니메이션을 추가해주도록 하겠습니다.

 

우선 생성한 위젯의 하단에 위치한 애니메이션 시퀀서를 열어주도록 합니다.

 

[+ 애니메이션] 버튼을 눌러 애니메이션을 추가하고, 이름을 수정해주도록 합니다.

 

추가한 애니메이션을 클릭 후 [+ 트랙] 버튼을 눌러 애니메이션을 추가하고 싶은 위젯을 선택합니다.

 

미리 계층구조에서 사용하고 싶은 위젯을 클릭해두면 더욱 간편하게 추가가 가능합니다. 

 

이후 [ + ] 버튼을 눌러 원하는 탭의 트랙을 추가해주도록 합니다.

저의 경우에는 위젯의 트랜스폼만 조작할 예정이므로, 트랜스폼만 추가해주도록 하겠습니다.

 

이제 애니메이션 재생 시간을 지정해주도록 하겠습니다.

트랙을 추가하면 우측 타임라인에 해당 트랙의 재생 시간이 나타나며 드래그 & 드롭으로 쉽게 조정 가능합니다.

 

이제 트랜스폼을 펼쳐보면 표기된 키에서 해당 위젯을 어떻게 표현할지에 대해 설정이 가능합니다.

저는 0 프레임에서 x scale를 줄이고 우측에 위치시켜보도록 하겠습니다. 

 

이후에 현재 0.00에 위치한 재생 바를 맨 오른쪽 위치(0.95)로 옮긴 후 새로운 애니메이션 키를 추가해주도록 합니다.

 

새로 추가한 키에서는 원래 사이즈로 돌리기 위해 Postion X를 0.0으로, Scale X를 1로 다시 돌려주도록 하겠습니다.

이후 재생해보면 다음과 같이 애니메이션이 정상적으로 작동하는 것을 확인할 수 있습니다.

애니메이션 바인딩 및 사용 (C++)

애니메이션을 추가했던 위젯 클래스에서 위젯 애니메이션을 저장하기 위한 변수를 추가해주도록 합니다.

 

UPROPERTY() 내부의 키워드에 대해 간단히 설명하자면 다음과 같습니다.

• meta = (BindWidgetAnim) : 변수 이름과 동일한 위젯 애니메이션과 변수를 자동으로 연결시켜줍니다.
• Transient : 해당 키워드를 사용한 변수는 저장되지 않으며, 직렬화되지 않습니다.

사용하는 방법은 매우 간단합니다.

특정 코드에서 PlayAnimation() 함수를 통해 위에서 바인딩 했던 애니메이션을 재생시켜줄 수 있습니다.

 

저는 ChangeWidget() 함수가 호출될 때마다 해당 애니메이션을 재생하도록 해보겠습니다.

 

코드 작성이 끝났다면 헤더 파일을 수정했으므로 에디터를 종료하고 빌드 후 다시 열어주도록 합시다.

(헤더파일 or 생성자 코드 수정 이후 라이브 코딩 컴파일만 진행할 경우 종종 에러 발생)

 

해당 위젯 블루프린트에 들어가서 바인딩 상태를 체크해주도록 합니다.

 

성공적으로 바인딩이 되어있다면 그대로 플레이하여 결과를 확인해보도록 합시다.