본문 바로가기
2D 디자인

[Spine] 스파인 트리뷰 설명

by J-Chi 2022. 9. 6.

트피뷰는 기본적으로 스파인 화면의 오른쪽에 배치되어 있습니다. 트리뷰에는 본, 제약조건, 드로우 오더, 스킨과 같은 애니메이션 작업을 하기 위한 정보들을 담고 있으며 각 항목들을 수정 및 세팅을 한 후 애니메이션 작업을 진행합니다. 해당 포스팅에서는 각 항목에 대한 내용과 기본적인 활용법을 다룰 예정이며 더욱 자세한 내용을 원하시면 스파인 공식 홈페이지에서 확인할 수 있습니다.

 

트리뷰
트리뷰

 


 

1. 뼈

뼈는 스파인 애니메이션 작업을 하기 위한 가장 중요한 요소입니다. 일반적으로 1개의 이미지에 1개의 뼈가 사용되지만 메쉬 도구를 사용하여 하나의 이미지에 많은 뼈를 적용하고 자연스러운 애니메이션을 만들 수 있습니다.

뼈는 계층 구조로 이루어져 있으며 최상의 본인 Root 뼈 하의로 자식 뼈들이 생성됩니다.

 

뼈의 계층 구조
뼈의 계층 구조


 

2. 슬롯

슬롯은 뼈에 어테치먼트를 붙이기 위한 컨테이너입니다. 일반적으로 하나의 뼈에 하나의 슬롯이 생성되지만 특정 애니메이션을 위해 하나의 뼈에 여러 슬롯 또는 하나의 슬롯에 여러 어테치먼트를 생성하기도 합니다.

 

트리뷰의 슬롯
트리뷰의 슬롯


 

3. 어태치먼트

어태치먼트는 대부분 이미지로 구성 되지만 영역, 메쉬, 클리핑 등 당영한 어태치먼트가 있습니다. 해당 어태치먼트 들은 슬롯 아래 그룹화되고 슬롯을 뼈에 붙여 사용합니다. 슬롯에 그룹화된 어태치먼트는 한 번에 1가지만 화면에 보이며(모두 안보일 수도 있습니다.) 이를 스킨 기능에 추가하여 여러 가지 애니메이션을 만들 수 있습니다.

 

슬롯에 종속되어 있는 어테치먼트
슬롯에 종속되어 있는 어테치먼트


 

4. 제약조건

제약조건은 스파인 애니메이션을 제작할 때 더욱 편하고 재미있는 작업을 할 수 있도록 스파인에서 제공하는 기능입니다. 현재 제약조건은 IK, 경로, 변형 제약조건으로 총 3가지가 있으며 각 제약조건마다 스킨에 추가하거나 순서를 변경해 믹스를 할 수 있는 기능이 있습니다.

 

IK 제약조건과 변형 제약조건으로 리깅된 케릭터
IK 제약조건과 변형 제약조건으로 리깅된 케릭터


 

5. 드로우 오더

드로우 오더는 화면에 보여지는 순서를 정하는 기능이며 드로우오더에는 슬롯 목록이 나타납니다. 상위에 있는 슬롯이 화면 앞에 나타나며 애니메이션 모드에서 이 순서를 변경하여 더욱 풍부한 애니메이션을 만들 수 있습니다.

 

Gun 슬롯이 최상위 일때의 드로우 오더
Gun 슬롯이 최상위 일때의 드로우 오더
Gun 슬롯이 최하위 일때의 드로우 오더
Gun 슬롯이 최하위 일때의 드로우 오더


 

6. 스킨

스킨은 하나의 뼈에 여러 가지 이미지를 변경할 수 있게 해주는 스파인 애니메이션의 강력한 도구입니다. 제작된 애니메이션에 스킨을 변경하여 무기를 교체할 수도 있고 케릭터를 변경하는 등 스프라이트 애니메이션에서는 작업량이 많았던 작업을 스킨 항목으로 간단하게 구현할 수 있습니다.

 

Blue 스킨이 적용된 케릭터
Blue 스킨이 적용된 케릭터
Red 스킨이 적용된 케릭터
Red 스킨이 적용된 케릭터


 

7. 이벤트

이벤트는 애니메이션 중에 특수한 작업을 할 수 있게 해주는 트리거이며 이벤트에 맞춰 애니메이션과 사운드 매칭, 파티클 효과 생성, AI 이동 등의 작업을 진행할 수 있습니다.

 

Foot_Sound 이벤트가 적용된 케릭터
Foot_Sound 이벤트가 적용된 케릭터


 

8. 애니메이션

애니메이션은 애니메이션 모드에서 생성한 애니메이션의 목록을 확인할 수 있습니다. 각 애니메이션 항목마다 모든 키값과 뼈의 형태가 다르게 구현되며 한번의 뼈대 설정으로 많은 애니메이션을 만들 수 있습니다.

 

3가지의 애니메이션을 제작한 케릭터
3가지의 애니메이션을 제작한 케릭터


 

9. 이미지

이미지는 이미지 정보를 가져 올 수 있는 경로를 지정하는 항목입니다. 메인 메뉴의 데이터 가져오기 항목으로 JSON 파일을 가져왔을 때 엑스박스로 이미지가 표시될 경우 이미지 항목의 경로를 JSON 파일의 이미지가 저장된 경로를 지정해주면 이미지가 정상적으로 화면에 출력됩니다.

 

이미지의 경로가 잘 못 설정된 화면
이미지의 경로가 잘 못 설정된 화면
이미지의 경로가 정상으로 설정된 화면
이미지의 경로가 정상으로 설정된 화면


 

댓글