위젯 블루프린트 에디터 하단에 위치한 두 창을 통해 UI 위젯의 애니메이션 구현 및 제어가 가능합니다. 우선 애니메이션 창에서는, 본질적으로 위젯 애니메이션을 구동시키는 데 사용되는 애니메이션 트랙을 생성할 수 있습니다. 다음, 타임라인 창은 시간에 따라 위젯에 애니메이션이 적용되는 방식을 나타내는데, 특정 시간에 키프레임 을 배치한 다음 그 키프레임에서 붙은 애셋이 어떻게 나타나게 할지를 정의하는 것으로 이루어집니다 (크기, 모양, 위치, 심지어 색 옵션까지도 조정 가능합니다).
애니메이션 추가하기
UMG 에서 애니메이션 작업을 시작하기 위해서는 먼저 애니메이션 트랙을 추가해야 합니다. 그 방법은 애니메이션 창에서 +애니메이션 버튼을 클릭하면 됩니다. 애니메이션을 추가할 때 (아래 노랑 박스), 애니메이션 트랙에 이름을 지으라는 창이 뜹니다.
애니메이션 트랙을 추가한 이후에는 타임라인 이 활성화되며, 그때부터 애니메이션 키 를 추가시켜 위젯에 대해 시간에 따라 변하는 값을 할당하기 시작하면 됩니다. 각 위젯마다 복수의 애니메이션 트랙이 있을 수도 있다는 점도 참고할 만 한데, 예를 들어 버튼이 화면을 가로질러 움직이면서 동시에 번쩍이게 만들 수도 있습니다.
애니메이션 키 추가하기
애니메이션 트랙에 키를 추가하는 방법은 두 가지 있습니다. 먼저 타임라인 창 안에 위치한 자동 키 체크박스를 사용하는 것입니다 (아래 노랑 화살표). 그러면 키프레임을 지원하는 값에 변경을 가하면 타임라인에 자동으로 키가 추가됩니다.
현재 선택된 애니메이션 트랙이 타임라인 상단에 강조되어 있습니다 (위에서 노랑 박스 부분입니다).
자동 키 옵션으로 키를 추가하는 일반적인 작업방식은, 위젯에 대해 원하는 목적값에 도달하는 시간을 정한 다음, 타임라인 바 를 그 시간으로 움직여 디테일 패널이나 (보통 위치, 회전, 스케일용) 그리드를 사용하여 값을 설정하면 됩니다. 최종 결과를 설정한 이후에는, 스크러빙을 통해 시퀀스 시작으로 이동하여 위젯의 기본 상태를 설정합니다. 두 시간 지점 사이를 타임라인 바를 스크러빙할 때, 시간에 따라 서서히 변화가 일어나는 것을 확인할 수 있을 것입니다.
키를 추가하는 두 번째 방법은, 키프레임을 지원하는 세팅 옆에 키 추가 버튼을 클릭하는 것입니다.
위 그림에서 각 세팅 옆의 아이콘을 클릭할 수 있으며, 그러면 그 값에 해당하는 키가 현재 위치의 타임라인에 추가됩니다. 아래 그림에서 Background Color (배경색)에 대한 키프레임이 0.00 과 2.00 에 추가되어, 버튼 위젯의 배경색이 2 초에 걸쳐 하양에서 노랑으로 변경됩니다.
키 값 변경하기
타임라인 위 특정 시간에 있는 키들은, Ctrl 클릭으로 그 값을 변경할 수 있습니다.
위에서 버튼이 들어있는 Vertical Box 의 위치와 관련된 키 각각을 선택하여, 디테일 패널을 통해 수동으로 설정할 수 있도록 했습니다. 값을 수동으로 입력하면 (예를 들어) 위젯을 움직이는 것보다 정교한 제어가 가능합니다. 하나의 축으로만 오브젝트를 이동시켰으면 하기 때문입니다.
애니메이션 호출하기
애니메이션을 생성하면, 그에 대한 변수 역시도 생성됩니다. 그래프 탭을 살펴보면 내 블루프린트 창의 애니메이션 드롭다운 메뉴 아래 여지껏 생성한 모든 애니메이션 트랙을 볼 수 있습니다. Ctrl 키를 누른 채 애니메이션을 그래프에 끌어 놓으면, 재생이나 중지같은 명령을 내릴 수 있게 됩니다.
여기서 위젯 블루프린트가 생성되면 Start Animation 을 재생하라는 명령을 내리고 있습니다.
여기서는 start_Button 클릭시 Blinking Button 애니메이션을 재생 중지하라 이르고 있습니다.
예제: 애니메이션이 적용된 메인 메뉴
아래는 두 가지 예제 애니메이션을 사용하여 화면 하단에서 날아들어온 Start 버튼이 깜빡이는 간단한 메인 메뉴 화면을 흉내낸 것입니다. 순서를 밟고 나면 아래 예제와 같은 결과를 얻게 될 것입니다.
이 예제는 UMG 에서만 애니메이션을 셋업하는 법에 대한 데모로, 버튼을 클릭해도 별 일이 벌어지지 않습니다.
-
메인 메뉴를 원하는 대로 적당히 구성한 다음 화면에 Button 이 들어있는 Vertical Box 를 포함시킵니다.
이미지를 클릭하면 크게 볼 수 있습니다.
-
애니메이션 창에서 추가 버튼을 클릭한 다음 애니메이션에 StartAnimation 같은 이름을 지어줍니다.
-
타임라인 창 에서 자동 키 버튼을 클릭합니다.
-
타임라인에서 타임라인 바 를 0.00 으로 옮긴 다음, 버튼이 들어있는 Vertical Box 를 클릭합니다.
-
Ctrl 키를 누른 채 메달 위젯 (노랑 화살표) 중앙을 클릭하고 Vertical Box 를 화면 밖으로 끌어냅니다 (1).
그러면 타임라인 위 현재 위치에 대해 키프레임이 추가됩니다 (2).
-
Vertical Box 에 대한 디테일 패널에서 앵커 를 클릭한 다음 Bottom Center (하단 중앙) 옵션을 선택합니다.
-
타임라인 바 를 1.00 으로 옮긴 다음 Ctrl 키를 누른 채 Vertical Box 를 클릭한 다음 완전히 보이도록 끌어 올립니다.
-
Vertical Box 에 대한 디테일 패널에서, 앵커 를 선택한 다음 Center (중앙) 옵션을 선택합니다.
-
애니메이션 창에서 추가 버튼을 클릭하여 BlinkingButton 이라는 애니메이션을 또 하나 추가합니다.
자동 키 체크를 해제하도록 합니다.
-
타임라인 바 를 1.00 으로 옮긴 다음 Start 버튼을 클릭하여 선택되도록 합니다.
-
디테일 패널에서 Appearance 섹션 아래, Background Color 옆의 키 추가 버튼을 클릭합니다.
-
타임라인 바 를 2.00 으로 이동한 다음 Background Color 의 색을 바꾸고 키프레임을 하나 더 추가합니다.
-
BlinkingButton 애니메이션에 대한 타임라인 은 아래와 같은 모습일 것입니다.
-
그래프 탭을 클릭한 다음, 두 개의 애니메이션 변수 모두 끌어 놓아 아래와 같은 그래프를 만듭니다.
이것은 위젯 블루프린트 생성시 Start Animation 을 재생하라고 하는 것입니다 (버튼이 화면 하단에서 날아 들어옵니다). 그런 다음 Set Timer 노드를 사용하여 StartBlinking 이라는 Custom Event 를 2 초마다 한 번씩 호출합니다 (Set Timer 노드는 Looping 설정되어 있습니다). 우리 StartBlinking Custom Event 는 그 후 Blinking Button 애니메이션을 2 초마다 한 번씩 재생합니다 (Start Button 의 색이 서서히 하양에서 초록으로 바뀝니다).
-
마지막으로 레벨 블루프린트 혹은 플레이가능 캐릭터 블루프린트에서 위젯 블루프린트를 생성합니다.
MyCharacter 블루프린트에서, 메인 메뉴의 애니메이션과 UI 레이아웃이 들어있는 위젯을 만들어 Add to Viewport 노드를 사용하여 뷰포트에 추가하고 있습니다.