5-12. UI - (5) 위젯 블루프린트에 애니메이션 적용

0. 개요

이전에 아이템을 습득하면 메세지를 생성하는 위젯을 만들었다.

해당 위젯이 위로 상승한 후에 우측으로 페이드 인 하는 애니메이션을 적용한다.

 

 

1. 위젯 블루프린트에 애니메이션 적용하기

 

(1) WBP_EffectMessage 이벤트 그래프 - Set Image and Text 함수

이미지가 존재하지 않더라도 빈 칸으로 출력함과 동시에 애니메이션은 그대로 재생하도록 Is Valid와 Play Animation를 사용한다.

 

 

(2) 애니메이션 생성하기

디자이너 탭으로 이동하고 에디터 하단에 위치한 애니메이션 탭을 클릭한다.

애니메이션을 추가하고 트랙 추가 - 네임드 위젯 - Text_Message를 클릭한다.

 

텍스트에 대한 애니메이션을 설정할 수 있다.

텍스트 메세지 우측의 플러스 버튼을 눌러 렌더 오파시티와 트랜스폼을 추가한다.

 

트랜스폼 - 이동 - X, Y에서 트랙의 적절한 지점에 재생 바를 위치시키고 X, Y 우측에 있는 플러스 버튼을 눌러 지점을 추가한다.

각 지점을 클릭해 값을 변경시키거나 그래프를 이용해 조정한다.

그래프 버튼을 누르면 나타나는 창

 

 

(3) 위젯 제거

위젯의 애니메이션이 적절하게 재생되면 제거되도록 커스텀 이벤트를 생성한다.

이벤트 그래프에서 우클릭 - 커스텀 이벤트 생성하고 Delay 노드, Remove from Parent 노드를 연결한다.

Delay는 애니메이션 시간에 맞춰 Duration을 지정한다.

 

 

(4) Set Image and Text 함수 수정

마지막으로 추가했던 Destroy Delay 커스텀 이벤트를 연결한다.