이미지

스켈레톤에는 이미지 파일을 참조하는 어태치먼트가 있을 수 있습니다. Spine은 이미지 편집기가 아니므로 좋아하는 이미지 편집 소프트웨어를 사용하여 스켈레톤에 대한 아트를 만들어야 합니다. 독립적으로 움직일 스켈레톤의 각 파트는 별도의 이미지 파일이어야 합니다.

이미지가 Photoshop, Affinity Designer 또는 다른 이미지 편집기의 별도 레이어에 있는 경우, 스크립트를 사용하여 이미지를 Spine의 올바른 위치로 가져오면 많은 시간을 절약할 수 있습니다. 그렇지 않으면 각 이미지를 Spine에서 수동으로 배치해야 합니다.

스켈레톤을 설정하는 첫 번째 단계는 각 이미지를 영역 어태치먼트로 가져오는 것이며, 영역 어태치먼트는 뼈에 부착된 간단한 직사각형 이미지입니다. 그러나 영역 어태치먼트를 만들기 전에 Spine에서는 스켈레톤의 이미지 파일을 찾을 위치를 알아야 합니다.

이미지 경로

트리의 Images 노드에는 Spine에서 스켈레톤의 PNG 및 JPEG 이미지 파일을 찾을 폴더 경로가 있습니다. 이미지 경로는 프로젝트 파일이 저장된 위치를 기준으로 하거나 절대 경로가 될 수 있습니다. Browse 버튼을 사용하여 경로를 지정하거나 경로를 입력한 후 enter 키를 누를 수 있습니다.

경로가 설정되면 해당 폴더의 이미지 파일이 Images 노드 아래에 나타납니다. Spine에서는 이미지 폴더를 감시하고 이미지 파일에 대한 변경 사항을 즉시 로드합니다.

기본적으로 이미지 폴더에 있는 처음 2,000개의 이미지 파일만 표시됩니다. 따라서 잘못된 경로를 잘못 지정하면 Spine에서 수백만 개의 파일을 검색하지 못합니다. Limit scanning을 선택하지 않으면 Spine에서 2,000개 이상의 이미지 파일을 찾을 수 있습니다.

영역 어태치먼트 만들기

Images 노드 아래에서 이미지 파일을 뷰포트로 드래그하면 Spine에서는 이미지의 루트 뼈 아래에 슬롯과 영역 어태치먼트를 만듭니다. shift 또는 ctrl(Mac의 경우 cmd) 키를 사용하여 트리에서 여러 이미지를 선택한 다음 동시에 뷰포트로 드래그할 수 있습니다.

트리에서 이미지를 뼈, 슬롯 또는 어태치먼트로 드래그할 수도 있습니다. 뼈나 슬롯으로 드래그하면 새 영역 어태치먼트가 뼈의 중앙에 놓입니다. 어태치먼트로 드래그하면 해당 어태치먼트의 변형이 새 영역 어태치먼트에 적용됩니다.

P를 누르거나 이미지의 트리 속성에서 Set Parent 버튼을 클릭한 다음 뷰포트에서 뼈를 선택하거나 트리에서 뼈나 슬롯을 선택하여 영역 어태치먼트를 만들 수도 있습니다. 스켈레톤에 많은 뼈가 있을 경우에는 대개 뷰포트에서 뼈를 선택하는 것이 가장 쉽습니다.

Images 노드 아래의 각 이미지 파일에는 어태치먼트에서 이미지 파일이 사용되지 않는 경우 주황색 아이콘이 있고, 하나 이상의 어태치먼트에서 사용되는 경우 녹색 아이콘이 있습니다.

영역 어태치먼트를 만든 후 Rotate, Translate 및 Scale 툴을 사용하여 "설정 포즈"로 어셈블할 수 있으며, 이는 애니메이팅되기 전 스켈레톤의 포즈입니다. 다음으로 Create 툴을 사용하여 뼈를 만든 후 어태치먼트를 뼈로 이동할 수 있습니다. 이러한 툴을 사용하는 방법은 다음 섹션에 설명되어 있습니다.

이미지 파일 검색

Spine에서는 Images 노드 아래의 지정된 경로를 선택한 다음 어태치먼트 이름을 추가하여 어태치먼트의 이미지 파일을 찾습니다. 어태치먼트 이름에는 파일 확장자를 포함할 필요는 없습니다. Spine에서는 파일 확장자가 .png, .jpg 또는 .jpeg인 파일을 찾지만 PNG 파일이 가장 일반적입니다.

예를 들어, ./images/의 이미지 경로와 head라는 어태치먼트의 경우 Spine에서는 ./images/head.png, ./images/head.jpg 및 ./images/head.jpeg를 찾습니다. 일부 운영 체제에서는 대소문자를 구분합니다.

어태치먼트 이름에는 하위 폴더가 포함될 수 있습니다. 예를 들어, ./images/의 이미지 경로와 red/head라는 어태치먼트의 경우 Spine에서는 ./images/red/head.png를 찾습니다.

어태치먼트에 Path가 설정되어 있으면 어태치먼트 이름 대신 경로를 사용하여 이미지 파일을 찾습니다. 동일한 슬롯 아래에 있는 두 개의 어태치먼트는 동일한 이름을 가질 수 없지만 동일한 경로를 가질 수는 있습니다.

스크립트

Spine 이외의 이미지 편집기를 사용하여 스켈레톤 이미지를 생성할 때, 이미지는 일반적으로 별도의 레이어에 생성되고 스켈레톤의 설정 포즈에 맞게 방향이 올바르게 지정됩니다. 이미지를 내보낸 다음 Spine에서 개별적으로 이미지를 재배치하는 것은 지루할 수 있습니다. 시간을 절약하기 위해 다양한 이미지 편집기에서 이미지와 JSON 데이터 파일을 모두 내보낼 수 있는 스크립트가 제공됩니다. 이 데이터 파일을 Spine으로 가져오기하여 스켈레톤을 설정하면 많은 시간을 절약할 수도 있습니다. 데이터를 가져오고 뼈를 만들기만 하면 리깅이 완료됩니다.

최신 버전의 스크립트는 GitHub의 spine-scripts에서 항상 확인할 수 있습니다. 일부 이미지 편집기에는 스크립트가 필요하지 않습니다. 이는 Affinity Designer와 같은 Spine 내보내기 지원 기능이 내장되어 있기 때문입니다.

Adobe Photoshop, Adobe Illustrator, InkScape, GIMP 및 Adobe After Effects용 스크립트가 제공됩니다. 현재 Photoshop 스크립트는 가장 정교하며 뼈, 슬롯 및 스킨을 구성하는 레이어 이름의 태그와 같은 가장 많은 기능을 제공합니다.

동영상

다음: 툴 이전: 슬롯