유니티 UI에 스파인 애니메이션 넣기

스파인에 포함된 스크립트로 UI에 애니메이션을 쉽게 표시할 수 있도록 제공하고 있습니다

 

 

캐릭터 이미지를 넣을 오브젝트의 인스펙터 > 하단의 Add Component > SkeletonGraphic (Unity UI Canvas) 추가

 

위에서부터 하나씩 항목 설명을 드리겠습니다.

1. Skeleton Data Asset : 애니메이션 재생을 위해 생성한 스켈레톤 데이터 에셋을 넣어줍니다.

스켈레톤 데이터 에셋을 넣어주면 아래에 세부 항목들이 출현합니다.

2. Material : 머티리얼은 디폴트 값으로 Alpha 채널을 추가한 셰이더를 사용하고 있습니다.

제대로 출력이 안되는 경우 스켈레톤 데이터 에셋을 생성할 때 제대로 출력되게끔 조정한 머티리얼을 넣어주면 됩니다.

여러 애니메이션을 넣어야 할 때 모두 Alpha 채널을 추가한 셰이더와 맞지 않는 경우, 디폴트 머티리얼의 셰이더를 알맞는 것으로 바꿔서 한번에 해결할 수도 있습니다.

 

3. Color : 스켈레톤 애니메이션에 쓸 스프라이트 원 색상에 곱할 색상

 

4. Initial Skin Name : 드롭박스를 눌러 스킨 중 사용할 것을 선택

 

5. Starting Animation : 드롭박스를 눌러 애니메이션 중 사용할 것을 선택

 

6. Starting Loop : 체크하면 애니메이션 재생 반복

 

7. Time Scale : 애니메이션 재생 속도 배율

 

8. Freeze : 체크하면 애니메이션 일시정지, 해제하면 다시 재생

 

9. Raycast Target : 해당 애니메이션이 레이캐스트에 맞는 UI 대상이 되는지 여부

보통 사용자가 터치/클릭으로 해당 UI를 지목했는지 체크할 때 썼습니다.

 

 

해당 애니메이션 캐릭터의 pivot은 발 밑에 있었기에

부모 오브젝트 범위 내 제대로 위치하기 위해 pivot을 변경해 주었습니다.

 

< 결과 >

위의 설정들을 적절히 하면 이렇게 UI에서 움직이게끔 만들어 줄 수 있습니다.