이번 포스팅에서는 포토샵에서 간단한 캐릭터를 생성하고 애니메이션 할 이미지를 나누어 스크립트를 통해 스파인으로 불러오는 과정을 설명하려고 합니다. 포스팅된 내용을 직접 따라 해보시고 싶은 분들은 스파인 평가판을 설치하시고 첨부파일을 다운로드하여 spine 파일을 실행하여 진행해 보실 수 있습니다.
스파인은 포토샵에서 만든 이미지를 손쉽게 스파인으로 불러올 수 있는 스크립트를 제공합니다. 스파인에서 제공하는 스크립트는 포토샵(Adobe Photoshop) 뿐만 아니라 일러스트레이터(Adobe Illustrator), 잉크스케이프(InkScape - 무료), 김프(GIMP - 무료) 프로그램을 지원합니다. 또한 일러스트레이터와 비슷한 어피니티 디자이너(Affinity Designer) 프로그램은 스파인 내보내기 기능이 내장되어 있습니다.
스파인에서 제공하는 포토샵 스크립트는 공식 홈페이지에서 지원하는 사이트에서 다운로드하여 포토샵에 적용해야 합니다. 스크립트 다운로드 및 적용 방법에 대해 궁금하신 분은 이곳에서 확인하시기 바랍니다.
1. 포토샵으로 캐릭터 만들기
포토샵에서 캐릭터를 만드는 방법을 간단히 GIF 파일로 보여 드립니다.
2. 캐릭터 나누기
생성한 캐릭터를 애니메이션에 사용할 이미지로 분할합니다. 이번 포스팅에서는 간단한 예로 얼굴, 몸, 팔 2, 다리 2, 꼬리로 총 7개 파츠로 분리하였습니다.
3. 포토샵 파일 JSON으로 내보내기
포토샵에서 사용할 수 있는 스파인 스크립트를 사용하면 스파인에서 한 번에 불러올 수 있도록 JSON 파일을 생성할 수 있습니다.
4. 스파인에서 데이터 가져오기
포토샵에서 내보내진 JSON 파일을 스파인에서 데이터 가져오기를 하여 이미지를 화면에 보여 줍니다.
- JSON 파일을 가져오기 위해 파일 메뉴에서 데이터 가져오기 항목을 선택합니다.
- 데이터 가져오기 팝업 창에 JSON 파일 위치를 선택하여 가져오기를 클릭합니다.
- JSON 파일을 가져오게 되면 아래와 같이 엑스박스로 이미지가 MISSING 되는데 이 문제는 이미지가 있는 폴더의 경로를 스파인에 지정해주지 않아서 엑스박스로 보여지는 것입니다.
- 트리뷰의 이미지 항목을 클릭하면 하단에 경로를 지정할 수 있습니다. 경로를 정확히 넣어 주면 아래와 같이 이미지가 정상 출력됩니다.
여기까지 기초 튜토리얼 1편 포토샵 캐릭터를 스파인에 불러오기가 완료되었습니다. 직접 캐릭터를 그리고 스파인에 불러와 움직여 보면 더욱 즐겁고 빠르게 2D 애니메이션을 만드실 수 있을 것입니다.
다음 포스팅에서는 캐릭터에 뼈를 적용하는 방법을 알아보도록 하겠습니다.
[Spine] 스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅
리깅이란 3D 애니메이션에서 3D 모델링 캐릭터에 뼈를 심어 애니메이션을 만드는 방법입니다. 스파인에서도 동일하게 2D 이미지에 뼈를 심어 애니메이션을 만듭니다. 기초 튜토리얼 1편에서 스
jinpoc.tistory.com
'2D 디자인' 카테고리의 다른 글
| [Spine] 스파인 기초 튜토리얼 2편 - 스파인 캐릭터 리깅 (1) | 2022.09.09 |
|---|---|
| [Spine] 스파인 뼈 생성 및 리깅 하기 (0) | 2022.09.08 |
| [Spine] 스파인 트리뷰 설명 (0) | 2022.09.06 |
| [Spine] 스파인 도구 설명 (0) | 2022.09.05 |
| [Spine] 스파인 인터페이스 설명 (0) | 2022.09.04 |
댓글