Spine으로 애니메이션 만들기

개요
Spine으로 코코스2d-x 애니메이션을 제작합니다.
Spine의 공식 홈페이지는 여기.입니다.
시험 버전에서는 사용 후의 오류를 볼 수 있지만 항목을 저장하고 내보낼 수 없습니다.
이번에는 Essential 버전 ($69) 을 사용해 보았다.
릴리즈

Cocos2d-x 3.4

Spine 2.1.13

견본
코코스2d-x의 sdk에 포함된 견본를 참고하세요.

tests/cpp-tests/Classes/SpineTest
├── SpineTest.cpp
└── SpineTest.h

유량
소재 준비(부품 이미지와 부품의 결합 이미지)
이번 시용기Adobe Illustrator CC로 소재를 제작했습니다.

레이어당 PNG 출력

애니메이션에서 이동하려는 단위로 도면층을 자릅니다

.

도면층 이름은 파일 이름이기 때문에 알기 쉬운 이름을 지어라

결합층의 이미지도 PNG로 출력(베이스용)

각 층에서 출력되는 스크립트는 여기.입니다.

Spine에서 새 항목 만들기

새 프로젝트를 만들고 적당한 이름으로 저장합니다.
새 템플릿 만들기
처음부터 스케이트보드를 준비했기 때문에 그 이름을 바꿀 수 있어요.

Hierrarchy의 견해.

Images 경로의 재료 디렉토리 설정하기
Images 를 선택하여 브라우저를 사용하여 소재 디렉토리를 지정합니다.

디렉토리 아래의 이미지를 사용할 수 있도록 지정합니다.

슬롯 생성하기
SETUP 모드에서 슬롯과 뼈대를 제작합니다.

그림% 1개의 캡션을 편집했습니다.
슬롯은 이미지 위젯의 단위인 것 같습니다.
이미지 슬롯 결합
부품을 배치하는 위치를 이해하기 위해 이미지를 결합한 슬롯을 제작한다.
결합된 이미지의 투명도를 낮춥니다.


모든 부품 이미지의 슬롯

구성에 방해가 되는 부품은 표시되지 않습니다.

설정이 끝난 후 이미지와 결합된 슬롯을 삭제합니다.
그리기 순서 설정
Draw Order는 간격이 겹치는 순서를 지정합니다.

경계 만들기
SETUP 모드에서 슬롯과 뼈대를 제작합니다.

루트에 모든 슬롯의 뼈대 생성하기

2.루트를 선택한 이유는 선택한 경로나 bon이 자동으로 부모가 되기 때문입니다.

시간 간격이 아버지가 아니다

도 이 방법을 이용하여bon간의 친자관계를 추가할 때

이름을 바꾸면 선체를 더블 클릭할 수 있습니다

이해하기 편리하도록 시간과 같은 이름을 지었습니다

슬롯의 모 피쳐를 해당 뼈대로 설정합니다.

이렇게 된 느낌.

주선 간의 친자 관계를 설정하다
이번에는 모든 바디를 바디의 아이로 만들었다.
모/자 관계를 올바르게 설정하여 애니메이션을 쉽게 만들 수 있습니다.

바디가 이동하면 모든 부품이 바디와 함께 이동

오른손과 왼손 등은 서로 영향을 받지 않기 때문에 분리 이동

애니메이션 만들기
애니메이션 제작은 ANIMATE 모드로 진행됩니다.

애니메이션 추가
템플릿에 여러 애니메이션을 만들 수 있습니다.
Cocos2d-x에서 애니메이션 이름을 지정하여 여러 애니메이션을 재생할 수 있습니다.

등급 제도의 Animation을 선택하고 New Animation 추가 애니메이션을 선택합니다.
키프레임 추가
Spine은 블렌드에 키프레임을 설정하여 애니메이션을 만듭니다.
키프레임을 추가할 수 있는 것은 다음과 같은 3개다.

경로

선체

간격

키프레임에서 각 객체에 대해 다음 값을 설정할 수 있습니다.

뿌리 선체

회전(Rotate)

위치(Translate)

확대/축소(Scole)

반사(Flip)

시극

색상(Color)

혼합 워크시트의 객체에 대해 동일한 유형의 두 개 이상의 키프레임을 설정합니다.
이렇게 하면 키 프레임 사이에 설정된 값이 부드럽게 변하도록 상호 보완됩니다.

꼬리 흔들기 애니메이션을 만들다.

Auto Key 기능이 유효하면 캔버스나 속성 화면에서 값이 변경될 때 키프레임이 자동으로 설정됩니다.

내보내기

다음 느낌으로 출력.

내보낸 파일입니다.

test.atlas
test.json
test.png

코코스2d-x에서 이것들을 사용해 보세요.
Cocos2d-x의 사용 방법은 문서로 나뉜다.
참고 자료

[Spine] 2D 애니메이션 도구 Spine의 사용 방법

Spine Part1 사용