스파인(Spine)에서 포토샵 PSD파일 불러오기

포토샵의 스크립트를 이용해 PSD파일을 Json으로 추출하여 스파인에서 사용할 수 있습니다.

 

 

포토샵에서 JSON파일로 저장

github에 오픈소스로 공개되어 있습니다. 아래의 경로에서 다운로드 할 수 있습니다.

Photohop to Spine 스크립트 : https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop

 

github의 페이지에 다운로드 링크와 설치 방법 설명이 있습니다. Download 항목에서 파란색 글씨 PhotoshopToSpine.jsx 를 눌러 파일을 다운받습니다. 다운 받은 파일은 설치된 포토샵 폴더에 있는 Presets/Scripts 폴더에 넣어주고 포토샵을 다시 시작합니다.

 

이제 포토샵의 File > Scripts 메뉴에 PhotoshopToSpine 항목이 추가되었습니다.

 

 

포토샵에서 레이어가 분리된 이미지를 준비합니다.

 

 

File > Scripts > PhotoshopToSpine 메뉴를 선택하면 위와 같은 export창이 나타납니다.

 

- Ignore hidden layers : 숨겨진 레이어들을 무시

- Write Spine JSON : 스파인용 JSON 파일 작성
- Ignore background layer : 백그라운드 레이어 무시

- Write template image : 스파인에서 레이어로 나뉘어진 이미지를 각각의 위치로 배치하는데 도움이 되도록 현재 보이는 레이어들로 구성된 참고 이미지 생성

- Trim whitespace : 여백을 잘라낸 각각의 이미지로 만듬. 체크하지 않으면 각 레이어마다 전체크기로 정해짐

- Selection only : 선택된 레이어만 저장.

 

Output Paths에서 이미지가 저장될 경로와 Json파일이 저장될 경로를 지정합니다.

추출한 후에는 Json 파일과 레이어로 나뉘어진 각각의 이미지파일들이 한 세트로 구성됩니다.

 

 

dog.json 파일과 images 폴더가 생성되었습니다.

 

 

 

스파인에서 불러오기

스파인 메뉴에서 Import Data를 선택합니다.

 

 

불러오기 방법을 JSON or binary file로 선택합니다.

파일 경로를 찾아주고 Scale은 1로 그냥 둡니다.

새프로젝트로 만들 것이면 New project에 체크하고, 기존 프로젝트에 추가할 것이면 체크하지 않습니다.

JSON파일을 불러오면서 연결시킬 뼈대의 이름을 작성하고, Import 버튼을 누릅니다.

 

 

지정한 스켈렉톤 이름아래로 각 레이어의 모든 이미지가 불러집니다.

 

---

Photohop to Spine 스크립트 : https://github.com/EsotericSoftware/spine-scripts/tree/master/photoshop