위젯 블루프린트 에디터(Widget Blueprint Editor) 하단에 위치한 두 창을 통해 UI 위젯의 애니메이션을 구현하고 제어할 수 있습니다. 우선 애니메이션 창에서는 위젯 애니메이션을 구동하는 데 사용되는 애니메이션 트랙을 기본적으로 생성할 수 있습니다. 다음으로, 타임라인(Timeline) 창에서는 지정된 시간에 키프레임(Keyframes) 을 배치한 다음 연결된 위젯이 해당 키프레임에 나타나는 방식을 정의하여(크기, 모양, 위치, 심지어 색 옵션까지 정의 가능) 시간 경과에 따라 위젯에 애니메이션이 적용되는 방식을 확인할 수 있습니다.
애니메이션 추가하기
UMG 에서 애니메이션 작업을 시작하기 위해서는 먼저 애니메이션 트랙을 추가해야 합니다. 그러려면 애니메이션(Animations) 창에서 +애니메이션(Animation) 버튼을 클릭합니다. 애니메이션을 추가할 때(아래 노란색 박스), 애니메이션 트랙의 이름 입력 창이 표시됩니다.
애니메이션 트랙을 추가하면 타임라인 이 활성화되고, 이제 위젯에 대해 시간에 따라 값이 변하는 애니메이션 키(Animation Keys) 를 추가할 수 있습니다. 각 위젯에 복수의 애니메이션 트랙을 포함할 수도 있습니다. 예를 들어 버튼이 화면을 가로질러 움직이면서 동시에 번쩍이게 만들 수도 있습니다.
애니메이션 키 추가하기
애니메이션 트랙에 키를 추가하는 방법은 두 가지가 있습니다. 첫 번째 방법은 타임라인 창 안에 위치한 자동 키(Auto Key) 체크박스를 사용하는 것입니다. 그러면 키프레이밍을 지원하는 값 조정 시 타임라인에 자동으로 키가 추가됩니다.
현재 선택된 애니메이션 트랙이 타임라인 상단에 하이라이트되어 있습니다(위에서 노란색 박스 부분).
자동 키 옵션으로 키를 추가하는 일반적인 워크플로에서는 위젯에 대해 원하는 값에 도달할 시간을 지정한 다음, 타임라인 바(Timeline Bar) 를 해당 시간으로 이동하고 디테일(Details) 패널을 통해서나 그리드(주로 위치, 회전, 스케일용)를 사용하여 값을 설정합니다. 최종 결과를 설정한 이후에는, 시퀀스 시작으로 스크럽하여 위젯의 기본 상태를 설정합니다. 두 시간 지점 사이에 타임라인 바를 스크럽할 때, 시간에 따라 서서히 변화가 일어나는 것을 확인할 수 있을 것입니다.
키를 추가하는 두 번째 방법은, 키프레이밍을 지원하는 세팅 옆의 키 추가(Add Key) 버튼을 클릭하는 것입니다.
위 이미지에서 각 세팅 옆의 아이콘을 클릭할 수 있으며, 그러면 그 값에 해당하는 키가 현재 위치의 타임라인에 추가됩니다. 아래 이미지에서 배경색(Background Color) 에 대한 키프레임이 0.00 과 2.00에 추가되어, 버튼 위젯의 배경색이 2 초에 걸쳐 하얀색에서 노란색으로 변경됩니다.
키 값 변경하기
타임라인의 특정 시간에 있는 여러 키의 값을 변경하려면, Ctrl 을 누른 상태로 해당 키를 클릭하면 됩니다.
위에서 버튼이 들어있는 세로 박스(Vertical Box)의 위치와 관련된 키 각각을 선택하여, 디테일 패널을 통해 수동으로 설정할 수 있도록 했습니다. 값을 수동으로 입력하면 예를 들어 하나의 축을 따라서만 오브젝트를 이동하고자 할 때 위젯 이동을 더 정밀하게 제어할 수 있습니다.
애니메이션 호출하기
애니메이션을 생성하면, 그에 대한 변수도 생성됩니다. 그래프(Graph) 탭을 살펴보면 내 블루프린트(MyBlueprint) 창의 애니메이션(Animation) 드롭다운 메뉴 아래에 여태껏 생성한 모든 애니메이션 트랙이 보일 것입니다. Ctrl 키를 누른 채 애니메이션을 그래프에 끌어 놓으면, 재생(Play)이나 중지(Stop) 같은 명령을 실행할 수 있게 됩니다.
여기서는 위젯 블루프린트 생성 시 Start Animation 을 재생하도록 지시하고 있습니다.
여기서는 Start_Button 클릭 시 Blinking Button 애니메이션 재생을 중지하도록 지시하고 있습니다.
예제: 애니메이팅된 메인 메뉴
간단한 메인 메뉴 화면에서 애니메이션을 사용하는 다음 예제를 익혀보세요. 첫 번째 애니메이션에서는 버튼이 화면 하단에서 중앙으로 이동합니다. 두 번째 애니메이션에서 Start 버튼이 깜빡입니다. 아래 단계를 따르면 예제와 비슷한 결과를 얻을 수 있습니다.
이 예제는 UMG에서 애니메이션을 설정하는 방법을 보여주기 위한 것일 뿐이므로, 버튼을 클릭해도 아무 일도 일어나지 않습니다.
-
메인 메뉴 레이아웃을 설정합니다. 이 레이아웃에는 두 개의 세로 박스 가 있습니다. 첫 번째 세로 박스 에는 'GAME TITLE' 텍스트 가 포함되며, 두 번째 세로 박스 에는 START 및 QUIT 이라는 두 개의 버튼이 포함됩니다. 이 레이아웃과 해당 구조는 다음 이미지와 같습니다.
전체 뷰로 보려면 이미지를 클릭하세요.
-
버튼 이 포함된 두 번째 세로 박스 를 선택합니다. 디테일(Details) 패널의 해당 프로퍼티로 이동하여 앵커(Anchor) 를 다음 이미지에 표시된 것처럼 설정합니다.
전체 뷰로 보려면 이미지를 클릭하세요.
-
슬롯(캔버스 패널 슬롯)(Slot(Canvas Panel Slot)) 섹션 아래에서 버튼 이 포함된 선택한 세로 박스 의 프로퍼티를 설정합니다.
- 위치 X(Position X): -300.0;
- 위치 Y(Position Y): 500.0;
- 크기 X(Size X): 600.0;
- 크기 Y(Size Y): 200.0.
전체 뷰로 보려면 이미지를 클릭하세요.
-
슬롯(캔버스 패널 슬롯) 섹션 아래에서 버튼 이 포함된 선택한 세로 박스 의 위치 Y 를 1200.0 으로 설정합니다.
전체 뷰로 보려면 이미지를 클릭하세요.
-
애니메이션(Animations) 창에서 +애니메이션(Animation) 버튼을 클릭하고 이름을 StartAnimation 으로 지정합니다.
-
애니메이션(Animations) 창에서 위치 Y 옆에 있는 키 추가(Add Key) 버튼을 클릭하고 애니메이션에 StartAnimation 같은 이름을 지정합니다.
-
타임라인에서 타임라인 바 를 1.00 으로 이동합니다.
-
상단(Top) 을 500.0 으로 설정하고 현재 시간에 키 추가(Add key to the current time) 를 클릭합니다.
-
애니메이션(Animations) 창에서 +애니메이션(Animation) 버튼을 클릭하고 이름을 BlinkingButton 으로 지정합니다. 타임라인에서 타임라인 바 를 1.00 으로 이동합니다.
-
위젯의 레이아웃에서 Start 버튼을 선택합니다. 디테일(Details) 패널로 이동하여 외관(Appearance) 섹션 아래 배경색(Background Color) 옆에 있는 키 추가(Add Key) 버튼을 클릭합니다.
전체 뷰로 보려면 이미지를 클릭하세요.
-
타임라인에서 타임라인 바 를 1.50 으로 이동합니다.
-
애니메이션(Animations) 창에서 배경색(Background Color) 프로퍼티를 다음과 같이 설정합니다.
R** = **0.1** R = 1.0 *R = 0.1**
-
타임라인에서 타임라인 바 를 2.00 으로 이동합니다. 애니메이션(Animations) 창에서 배경색(Background Color) 프로퍼티를 다음과 같이 설정합니다.
R** = **1.0** R = 1.0 *R = 1.0**
-
그래프(Graph) 탭을 클릭하여 이 위젯에 대한 블루프린트 스크립트를 생성합니다.
-
다음 이미지에 보이는 대로 블루프린트 스크립트를 생성합니다.
이 스크립트에서는 위젯 블루프린트가 생성되면, 버튼이 화면 하단에서 중앙으로 이동하는 시작 애니메이션 을 재생합니다. 그런 다음, Set Timer 노드를 사용하여 2초마다 StartBlinking 이라는 커스텀 이벤트 를 호출합니다(Set Timer 노드를 루핑으로 설정). StartBlinking 커스텀 이벤트는 Start 버튼의 색이 시간이 지남에 따라 하얀색에서 녹색으로 변하는 Blinking Button 애니메이션을 2초마다 재생합니다.
-
마지막으로, 레벨 블루프린트(Level Blueprint) 혹은 플레이 가능 캐릭터 블루프린트에서 위젯 블루프린트를 생성합니다.
여기서는 MyCharacter 블루프린트에서 메인 메뉴의 애니메이션과 UI 레이아웃이 들어있는 위젯을 생성하고 Add to Viewport 노드를 사용하여 뷰포트에 추가하고 있습니다.