최근 2D캐릭터 애니매이션 작업을 유니티로 하면 확장성의 문제가 있다는 것을 깨달았다. 과거의 나는 반성하길...
그런 의미에서 애니매이션을 spine으로 옮기기 위해 여러가지 강의들을 보고 있다.
강의 영상 속에서 포토샵에서 위치까지 고대로 스파인으로 가져가는 모습들을 볼 수 있다.
근데 관련된 설명이 부족하길래 직접 찾아보았다.
1. 스크립트 받기
스파인 홈페이지를 통해 받은 스크립트를 포토샵에 넣어서 내보내기에 사용하면, 위치와 로테이션값이 함께 넘어가는 것 같다. 다운로드 방법은 다음을 따라하면 된다.
- 링크를 타고 이동한다.
github.com/EsotericSoftware/spine-scripts
EsotericSoftware/spine-scripts
Scripts to export from PhotoShop and other tools to Spine's JSON data format. - EsotericSoftware/spine-scripts
github.com
깃허브 페이지로 이동하게 된다.
깃허브를 써보지 않은 사람은 이 페이지에서 혼란스러울 수 있다.
침착하게 다음 과정을 따라하면 된다.
- Download Zip 버튼을 누른다
Code라고 쓰여져 있는 초록색 버튼을 누르면 Download Zip이라는 버튼이 있다. 클릭하면 zip파일이 받아진다.
- 다운로드 폴더에 가서 압축 해제를 한다.
다운로드 폴더에 압축해제를 하면 여러가지 폴더가 있는데 그중 photoshop을 선택한다
포토샵 폴더에는 PhotoShopToSpine라는 파일이 보인다.
이제 이 파일을 포토샵 스크립트 폴더로 옮겨주기만 하면 된다.
- 포토샵 폴더를 찾아가기
포토샵은 쓰는 사람마다 다른 위치에 설치할 수 있다. 보통은 내컴퓨터의 Program Files혹은 Program Files (x86) 둘 중 한 Adobe 폴더에 들어있다.
여기 까지 찾아왔다면 거의 다 왔다. 여기서 Presets폴더로 들어간다.
그러면 그 안에 Scrpits폴더가 보인다.
아까 받았던 PhotoshopToSpine파일을 여기 Script폴더로 복사, 혹은 이동시키면 준비가 끝난다.
이제 파일을 옮겨보자.
2. 포토샵에서 스크립트로 내보내기
포토샵에서 위치와 로테이션을 설정해놓은 파일을 불러온다.
그 후 왼쪽 상단의 File메뉴에 가면 Scripts가 있는데 그안에 보면 아까 설치한 Photoshop-LayersToPNG가 있다!
PhotoShopToSpine을 누르면 나오는 메뉴 설명이다. 일단 숨겨놓은 레이어가 있기 때문에
나는 Ignore hidden layers를 체크해주고 그외의 설정은 건드리지 않을 예정이다.
여기서 OK를 누른다.
여러가지 창들이 왔다갔다 한 후 포토샵 파일이 있던 폴더에 가면 소스들이 나와있는걸 볼 수 있다.
내가 사용했던 파일은 레이가 있는 파일이다.
레이의 폴더에 가면 Lay(Json)파일과 image폴더를 확인할 수 있다. (Skin폴더는 무시한다. 다른 자료이다.)
3. 스파인에서 가져오기
이제 스파인을 켜서 메뉴의 데이터 가져오기를 클릭한다.
아까 저장했던 json파일을 불러온다.
레이가 제대로 불러와진 것을 볼 수 있다.
이제 다음 글에서 본을 박고, 매쉬설정을 가볍게 해보자.
이번 프로젝트는 스프라이트 사이즈가 작은 편이라 매쉬 설정은 안할 수도 있을 것 같다.