현재 생성된 일반 뷰 바인딩이 없으면 뷰 바인딩에 UI 애니메이션 조건(UI Animation Condition) 필드가 보이지 않는 버그가 있습니다. 따라서 조건 바인딩 필드를 보려면 일반 뷰 바인딩을 생성해야 합니다. 이 버그는 33.00에서 수정되었습니다.
UMG에서 시퀀서를 활용해 위젯에 애니메이션을 적용합니다. 위젯은 머티리얼 파라미터에 입력된 값에 따라 애니메이션이 적용됩니다.
위젯 구성하기
위젯은 UMG에서 머티리얼 파라미터 설정하기의 예시에서 가져온 추적기 위젯을 사용합니다.
준비된 추적기 위젯이 없다면 새로 생성하세요. 그런 다음 단계를 따릅니다.
기존 추적기 위젯 위에 +1이 표시된 텍스트 블록(Text Block)을 추가합니다. 이는 제거된 좀비의 수에 따라 처치 추적기의 값이 1씩 증가함을 의미합니다.
렌더링(Rendering) > 렌더 오파시티(Render Opacity)에서 이 텍스트 블록의 렌더 오파시티를 0.0으로 설정합니다.
이제 위젯에 애니메이션을 적용할 준비가 되었습니다.
애니메이션 구성하기
UI에 애니메이션을 추가하려면 이벤트 그래프(Event Graph)에서 시퀀서(Sequencer)를 열어 아이콘에 애니메이션과 '+1'을 적용합니다. 그런 다음 시퀀서에서 애니메이션을 구성합니다.
이 예시에서는 플레이어의 추적기가 작동하면서 아래의 gif 이미지와 같이 아이콘이 나타나며 '+1' 텍스트가 표시됩니다.
시퀀서 사용 방법에 대한 자세한 내용은 시퀀서와 컨트롤 릭 문서를 참고하세요.
창(Window) > 애니메이션(Animations)에서 애니메이션 창을 엽니다.
+애니메이션(+Animation)을 클릭하고, 애니메이션을 OnIncrement로 명명합니다.
위젯 비저빌리티에 애니메이션 적용하기
UI에 애니메이션을 적용하려면 먼저 애니메이션을 적용할 위젯을 파악하고, 애니메이션 창에서 시퀀서의 해당 위젯에 연결된 머티리얼이나 텍스처에 애니메이션을 적용해야 합니다. 먼저 IncrementText (+1)를 선택하여 애니메이션을 시작합니다.
OnIncrement를 선택하고 +1 텍스트(+1 Text)를 클릭한 다음 +추가(+Add) > IncrementText를 선택합니다.
IncrementText 트랙에서 + 아이콘을 선택하고 렌더 오파시티를 선택합니다. 이렇게 하면 애니메이션 타임라인에서 오파시티를 추적할 수 있습니다.
애니메이션 시작 부분의 키를 설정합니다. 이 키는 텍스트가 페이드 인 및 페이드 아웃되기 시작하는 지점을 지정합니다.
렌더 오파시티를 다음과 같이 설정합니다.
0.25초에서 1.0
0.50초에서 0.0
이렇게 하면 플레이어가 적을 처치할 때마다 텍스트가 페이드 인 및 페이드 아웃되는 애니메이션이 완성됩니다.
위젯 위치에 애니메이션 적용하기
텍스트가 사라지기 전에 위로 올라가도록 텍스트 위젯의 위치에 애니메이션을 적용합니다.
IncrementText에서 + 아이콘을 클릭하고 트랜스폼(Transform)을 선택합니다.
트랜스폼 > 이동(Translation)을 펼친 뒤 Y를 원하는 값으로 설정하면 +1 텍스트가 사라지기 전에 해당 값만큼 위로 올라갑니다. 이 예시에서는 텍스트의 Y 이동 키프레임을 아래와 같이 설정합니다.
0.0초에서 0.0
0.25초에서 -20.0
0.50초에서 -20.0
텍스트의 각 움직임에 키프레임을 설정하는 것을 잊지 마세요.
이제 텍스트가 나타난 뒤 위로 움직입니다.
위젯 스케일에 애니메이션 적용하기
애니메이션을 적용한 +1 텍스트가 움직일 때 크기를 확대하여 처치 효과가 눈에 띌 수 있도록 위젯의 스케일 세팅에 애니메이션을 적용합니다. 이렇게 하면 텍스트가 화면에서 '부풀려' 표시되는 듯한 효과를 줄 수 있습니다.
IncrementText > 트랜스폼 > 스케일(Scale)을 펼칩니다. 스케일 아래에 X 및 Y 값이 나타납니다.
스케일 X 및 Y를 OnIncrement 타임라인의 키프레임으로 설정합니다. 이 예시에서는 스케일 키프레임을 아래와 같이 설정했습니다.
0.0초에서 0.0
0.10초에서 2.0
0.50초에서 0.0
이제 애니메이션이 재생되면 +1 텍스트에 극적인 효과가 적용됩니다.
이미지 브러시의 머티리얼 파라미터에 애니메이션 적용하기
머티리얼의 아이콘이 추적기의 진행률에 따라 확장되도록 하려면 시퀀서를 통해 머티리얼에 액세스합니다.
TrackerMaterial 이미지를 선택하고 OnIncrement 애니메이션에서 +추가 > TrackerMaterial을 선택합니다.
TrackerMaterial 트랙에서 + 아이콘을 클릭하고 Brush.Brush 머티리얼(Brush.Brush Material)을 선택합니다. 이렇게 하면 Brush.Brush 머티리얼 프로퍼티에 머티리얼 트랙이 추가됩니다.
새로운 Brush.Brush 머티리얼 트랙에서 + 아이콘을 클릭하고 IconScaleX 및 IconScaleY를 선택합니다.
IconScaleX 및 IconScaleY를 펼칩니다. 두 파라미터는 OnIncrement 애니메이션이 재생될 때 시퀀서에서 쉽게 조작할 수 있습니다. 이러한 세팅을 사용해 아이콘의 스케일이 커졌다가 작아지는 애니메이션을 만들 수 있습니다.
IconScaleX 및 IconScaleY를 다음과 같이 설정합니다.
0.00에서 0.7
0.25에서 1.0
0.00에서 0.7
이제 아이콘에 아래의 gif 이미지와 같이 TrackerMaterial의 머티리얼 파라미터를 이용한 애니메이션이 적용됩니다.
애니메이션 조건 추가하기
애니메이션이 준비되었으니 게임플레이 값을 연결해 게임플레이 값이 변경될 때마다 애니메이션이 재생되도록 해야 합니다.
창 > 뷰 바인딩(View Bindings)을 선택하여 뷰 바인딩을 엽니다.
뷰 바인딩 창에서 +조건 추가(+Add Condition)를 선택합니다.
왼쪽 박스를 선택하고 MVVM_UEFN_Tracker > 값(Value)을 선택합니다. 이렇게 하면 추적기 값이 증가할 때마다 애니메이션을 재생하여 추적기 진행도를 추적하게 됩니다.
가운데 드롭다운을 클릭하고 다음보다 큼(>)(More Than (>))을 선택합니다.
가운데 박스 2개는 애니메이션 재생 조건을 나타냅니다. 값이 변경되면 그 값이 조건을 충족하는지 확인하고, 충족하면 애니메이션을 재생합니다.
다음보다 큼(>)을 0.0으로 설정하면 이 값이 변경될 때마다 UI가 애니메이션을 재생합니다.
오른쪽 박스를 선택한 다음 WBP_{YourWidgetName} > 애니메이션 재생 대기열 등록(Queue Play Animation)을 선택합니다. 오른쪽 박스는 이 값이 조건을 충족했을 때 수행할 액션입니다. 여기에서는 위에서 생성한 OnIncrement 애니메이션을 재생합니다.
뷰 바인딩에 재생할 애니메이션과 관련된 옵션 목록이 다음과 같이 나타납니다.
인 애니메이션(In Animation) = 재생
시작 시간(Start at Time) = 시간 선택
재생할 루프 수(Num Loops to Play) = 애니메이션 루프 횟수
재생 모드(Play Mode) = 포워드(Forward), 리버스(Reverse) 또는 핑퐁(Ping Pong)
재생 속도(Playback Speed) = 애니메이션 속도 증가 또는 감소
상태 복구(Restore State) = 애니메이션을 기본 상태로 복구
InAnimation 옆에 있는 링크 아이콘을 클릭하고 WBP_{YourWidgetName} > OnIncrement > 선택(Select)을 클릭합니다
이제 추적기에서 진행률이 변경될 때마다 애니메이션이 재생되도록 설정이 완료되었습니다.
최종 결과
플레이어가 적이나 NPC를 처치하면, UI에서 아이콘이 더 크게 표시되고 +1 텍스트가 나타나고 사라지는 효과로 처치 진행률을 표시해 줍니다.
