본문 바로가기

Unity/Unity2D_TopDown

Unity2D_TopDown -UI (3) Ui 커서 애니메이션

1. Ui 커서 애니메이션

 - 하나의 이미지를 위치조정만으로 애니메이션을 나타낼때 쓰는 방법

 

(1) -Image 오브젝트 안에 또하나의 Image오브젝트를 생성하고 TalkEnd로 rename

(2) - 화살표 스트라이프를 Source Image에 드래그앤 드랍 하고

(3) - Set Native Size로 원본크로 맞추어준다음

(4) - Scale조정을 통해 비율을 유지한상태로 크기를 살짝 키워주고

(5) - Transform을 shith와 alt를 동시에 눌러 우측 하단에 위치시킨다

(6) - 이 후 pos X 와 pos Y로 여백조정

 

 

(1) - TalkEnd Image 오브젝트 inspector에에 Animater 속성을 추가 하고

(2) - Assets - Animation 폴더에서 animator controller 생성

 

 

(3) - 같은 방식으로 Animation 도 같이 생성 후 talkEnd와 관련된 이름으로 바꾼다

     *(이 애니메이션은 무한 반복할 예정이기에 Loop Time을 체크해준다)

 

(4) - 생성한 비어있는 TalkEnd Animator를 TalkEnd Image 오브젝트의 (2) 에서 생성한 Animator 속 Controller에 드래그앤 드랍

 

 

 (5) - 이제  TalkEnd 오브젝트를 누른상태로 window 에서 Animator 상태창을 키면 아래와 같은 비어있는 Animator 가 나오는데 여기서 우클릭으로 empty상태의 animation state를 생성한다

 

 

(6) 생성된 empty animation state 에 전에 생성한 비어있는 TalkEndMove animation 을 드래그앤 드랍

 

 

(7) - 이제 window 에서 Animation 상태창을 열고 해당 Animation이 들어있는 Animator를 가지고 있는 오브젝트

       즉 TalkEnd 오브젝트를 클릭하면 Animation이 활성화 된다

 

 

 (8) - Add property로 Anchored Position을 추가해주고

 

 

 

(9) - Anchored Position 의 세부 정보인 Achored Position Y 를 수정하여 이미지의 높낮이에 변화를 주며 애니메이션을 생성한다

*tip)위치조정을 할때 최초상태가 0:00초에 다이아몬드 모양(키프레임)이 세로로 4개가 있는데

      해당상태에서 먼저 0.02초 구간을 클릭하면 하얀색 실선이 생기고 

      그 상태에서 좌측 Achored Position Y를 18로 입력 한다

      그러면 변화가 생긴 Achored Position Y 키프레임만 비어있는 모양으로 새로 프레임 3개가 세로로 생성된다

      즉 해당 키프레임 외의 프레임은 유지한다는 뜻!

      같은 방법으로 0.05초의 프레임모양을 만든다!