이미지

뼈대는 뼈에 붙은 이미지들로 구성됩니다. Spine은 이미지를 편집하지 않습니다. 따라서 여러분이 즐겨 사용하는 이미지 편집 소프트웨어로 뼈대에 맞는 그림을 만들어야 합니다. 독립적으로 움직이는 뼈대의 각 파트 별로 개별적인 이미지 파일이 필요합니다.

Photoshop 또는 Gimp 파일의 개별 레이어에 이미지가 있다면 스크립트를 사용해 이미 모여있는 Spine으로 이미지를 불러와 시간을 많이 절약할 수 있습니다. 그렇지 않을 경우 일일이 이미지를 모아야 합니다.

뼈대를 만드는 첫 번째 단계는 "영역 어태치먼트"인 각 이미지를 불러오는 것이며, 이 이미지들은 뼈에 붙어 있는 간단한 직사각형 이미지 입니다. 영역 어태치먼트에서 더 많은 정보를 보실 수 있습니다.

영역 어태치먼트를 만들기 전에 Spine은 뼈대의 이미지를 찾을 수 있는 곳을 알아야 합니다

이미지 노드

트리 안의 Images 노드는 폴더로의 경로를 저장하고 있어 뼈대에 맞는 이미지를 Spine이 찾을 수 있습니다. 이미지 경로는 프로젝트 파일이 저장된 곳과 관련이 있거나 또는 절대 경로가 될 수 있습니다. 경로를 구체화하려면 Browse 버튼을 누르거나 경로를 입력하고 엔터를 눌러도 됩니다. 경로가 설정되면 해당 폴더의 이미지는 Images 노드 아래에 나타납니다. Spine은 이미지 폴더를 확인하다가 변경 사항을 이미지 파일에 즉시 불러옵니다.

트리에서 에디터 영역으로 이미지를 드래그하면 Spine이 각 이미지의 근원 뼈 아래에 슬롯과 영역 어태치먼트를 만듭니다. 트리에서 shift 또는 ctrl(Mac에서는 cmd)을 사용하여 선택할 수 있으며 동시에 에디터 영역으로 드래그할 수 있습니다. 아니면 이미지를 트리 안의 뼈 또는 슬롯으로 바로 드래그할 수 있습니다.

P를 누르거나 트리 아래에서 이미지 속성에 있는 Set Parent 버튼을 클릭하여 영역 어태치먼트를 만들 수 있습니다. Set Parent 모드에서 에디터 영역의 뼈, 뼈 또는 슬롯을 클릭할 수 있습니다. 뼈대에 뼈가 많이 있으면 트리에서 뼈를 선택하는 것보다 에디터 영역에서 선택하는 것이 더 쉬운 경우가 많습니다.

어태치먼트에 이용되지 않는 이미지가 있다면 Images 노드 아래의 이미지에 빨간 아이콘이 생기며, 반대의 경우엔 초록색 아이콘 생깁니다.

모든 영역 어태치먼트가 생성되면 Scale, Rotate, Translate 툴을 사용하여 어태치먼트들을 "셋업 포즈"로 모을 수 있으며, 이 포즈는 애니메이팅되지 않은 뼈대를 말합니다. 그 다음, Create 툴을 사용하여 뼈를 만들 수 있고 어태치먼트를 뼈로 옮길 수 있습니다. 다음 섹션에 이 툴들의 사용법이 설명되어 있습니다.

이미지 파일 검색

Spine은 Images 노드의 경로를 입력하고 어태치먼트 이름을 첨부하여 어태치먼트에 맞는 이미지를 찾아 냅니다. 어태치먼트 이름은 파일 확장자를 포함하지 않아도 됩니다. Spine이 .png, .jpg, .jpeg 파일을 찾아줍니다. 예를 들어 ./images/의 이미지 경로와 head라는 이름의 어태치먼트의 경우 Spine은 ./images/head.png, ./images/head.jpg, ./images/head.jpeg를 검색합니다. 일부 운영체제에서는 대소문자를 구별합니다.

어태치먼트 이름은 하위 폴더를 포함합니다. 예를 들어 ./images/의 이미지 경로와 red/head라는 이름의 어태치먼트의 경우, Spine은 ./images/red/head.png를 검색합니다.

어태치먼트에 Path 셋이 있을 경우, 경로는 어태치먼트 이름 대신 이미지를 찾는 데 사용됩니다. 동일한 슬롯의 두 어태치먼트는 동일한 이름을 가질 수 없지만 경로는 동일할 수 있습니다.

Images 노드 아래에 구체화된 경로는 절대경로가 될 수 있으며 또는 Spine 프로젝트 파일이 있는 폴더와 관련될 수 있습니다.

드로우 오더

그려진 오더 어태치먼트는 트리 내 Draw Order 노드 아래에 정의됩니다. 드로우 오더 목록 내에서 더 높은 슬롯은 목록에서 가장 위에 그려집니다. 슬롯을 위아래로 드래그하여 드로우 오더를 변경할 수 있습니다. 아니면 키보드의 플러스(+) 또는 마이너스(-) 키를 사용해 선택한 이미지의 드로우 오더를 변경할 수 있습니다. 시프트를 누르면 5칸을 건너뛸 수 있습니다.

트리 필터

트리 뷰에서 왼쪽 위에 있는 필터 버튼으로 드로우 오더를 쉽게 조정하여 뼈와 어태치먼트를 숨길 수 있으며, Slots 노드 아래의 트리에서 슬롯만을 보이도록 할 수 있습니다. 이 슬롯들은 드로우 오더를 나타내며 위아래로 드래그할 수 있습니다.

보통 에디터 영역에서 어태치먼트가 선택되면 트리에서도 선택됩니다. 트리가 필터링되어 트리에 어태치먼트가 없다면 드로우 오더에서 어태치먼트가 있는 곳을 즉시 보여주지 않고 대신 트리에서 슬롯이 선택됩니다.

스크립트

Spine 외부의 이미지 편집 프로그램 뼈대 이미지를 만들 때 이미지는 개별 레이어에 만들어지며 뼈대의 셋업 포즈로 이동합니다. 이미지를 내보내고 Spine에서 일일이 리포지션하는 것이 번거로울 수 있습니다. 시간을 절약할 수 있도록 Spine에는 여러 이미지 편집 프로그램에서 이미지와 포지션 데이터를 내보낼 수 있는 스크립트가 있습니다. 이 데이터는 Spine으로 가져올 수 있어 뼈대를 설정하는 데 많은 시간을 절약할 수 있습니다.

스크립트는 scripts의 하위 폴더인 Spine 설치 폴더에서 찾을 수 있습니다. 이 스크립트들의 최신 버전은 언제든지 여기에서 보실 수 있습니다.

Photoshop

뼈대를 구성하는 이미지는 Photoshop PSD 또는 Gimp 파일 형식으로 개별 레이어에 있어야 합니다. 스크립트를 실행할 때 각 레이어를 개별 이미지 파일로 내보내며 Spine 포맷에 JSON 파일을 만듭니다. 왼쪽 위에 있는 Spine 로고를 클릭하여 이 JSON을 가져오고 그 다음에 Import Data Skeleton을 하면 됩니다. 가져온 뼈대는 Photoshop에서와 동일한 위치와 드로우 오더를 사용하는 Photoshop 첨부 파일에 있는 모든 이미지에 대해 뼈 하나를 가지게 됩니다. 이제 Create 툴을 사용하여 뼈를 만들면 되며, 이에 대한 설명은 다음 섹션에 있습니다.

스크립트 설정:

  • Write layers as PNGs 각 레이어마다 이미지 파일이 생성됩니다.
  • Write a template image 모아진 뼈대 이미지를 포함하는 이미지가 템플릿 용도로 생성됩니다.
  • Write Spine JSON Spine으로 가져올 수 있는 JSON 파일이 생성됩니다.
  • Ignore hidden layers 숨겨진 그룹 및 레이어를 무시합니다.
  • Use groups as skins 그룹별로 스킨이 생성되며 스킨별 이미지가 각 하위폴더에 생성됩니다.
  • User ruler position as 0,0 Spine으로 가져오면 Photoshop 룰러 위치를 0,0 월드 포지션에 맞춥니다.
  • PNG scale 이미지 파일을 쓰기 전에 레이어 크기를 조정합니다. Spine에서 사용하기보다는 Photoshop에서 고해상도 작업 시에 유용합니다.
  • Padding 각 이미지 주변의 픽셀 수입니다. 이미지 가장자리의 불투명한 픽셀에 대해 결과물을 에일리어스하지 않을 수 있습니다.
  • Image output directory 이미지 파일이 기록되는 폴더입니다.
  • JSON output directory JSON 파일이 기록되는 폴더입니다. 이는 Spine 프로젝트를 포함할 폴더와 같아야 하며 그렇지 않을 경우 뼈대의 이미지 경로를 조정해야 할 수도 있습니다.

많은 Photoshop 스크립트들은 Spine 포럼(예시)에 게시되어 있습니다.

Illustrator

Illustrator 스크립트는 기능이 약간 적긴 하지만 Photoshop 스크립트와 유사합니다. 필요하다면 Illustrator에서 File, Export, PSD를 클릭하여 Photoshop에서 내보낸 PSD를 열고 위에 설명된 Photoshop 스크립트를 실행하세요.

Gimp

Gimp 스크립트는 레이어 PNG와 JSON 파일을 모두 기록할 수 있습니다. 필요하다면 Photoshop으로 내보내서 위에 설명된 Photoshop 스크립트를 사용할 수도 있습니다.

After Effects

After Effects 스크립트는 After Effects 애니메이션 데이터를 Spine의 JSON 포맷으로 내보냅니다. Spine에서 지원하지 않는 왜곡 효과나 글로우 효과 등 일부 기능은 내보낼 수 없습니다.

Inkscape

Inkscape 스크립트는 레이어와 JSON 파일을 모두 내보냅니다.

동영상

다음: 툴 이전: 기본 개념