[Cocos Creator] Spine 정복하기(5) - Slot, Skin

Slot

슬롯은 Bone 과 스킨을 연결해주는 매개체입니다. Bone에는 Slot 이 존재하고 그 Slot 안에는 우리가 눈에 보이는 이미지(스킨)가 존재하게 됩니다. 즉, Slot 의 주 된 역할은 Spine 애니메이션의 이미지 변경입니다.

Slot 에 접근은 Bone 의 접근과비슷하게 findSlot 으로 합니다. 똑같이 Slot 의 이름을 알아야 접근이 가능합니다. 아래캡쳐는 spineboy 의 Slot 종류를 나타냅니다.

그럼 findSlot을 사용하여 고글에 한번 접근해보겠습니다.

this.goggle = this.spine.findSlot("goggles"); // 고글 슬롯에 접근

console.log(this.goggle);

간단하게 접근이 가능합니다. 콘솔에 확인해보시면 goggles Slot 이 가지고 있는 정보들을 확인할 수 있습니다.

Attachment

Slot 의 프로퍼티를 살펴보면 Slot 이름을 나타내는 name, 뼈대인 bone 그리고 attachment 가 있습니다. 이 attachment 가 이미지를 넣는곳입니다. 우리는 이 attachment 를 통해서 스킨의 일부분(파츠)를 변경 할 수 있습니다. 예로들어 맨손상태에서 총을 획득했을 때 총을들고 있는 전체 이미지를 변경하면 리소스 문제가 심각해지니깐 손 부분만 변경하는 방식으로 말이죠. 

attachment 의 변경은 간단하게 할 수 있습니다. 

this.spine.setAttachment("슬롯이름", "스킨이름");

setAttachment 의 첫번째 인자값은 슬롯이름입니다. 슬롯이름은 위의 캡쳐에서 보듯이 skeletonData 안에 슬롯들의 목록이 있습니다. 

두번째 인자값은 스킨이름입니다. 스킨이름도 슬롯이름과 같이 skeletonData에 보시면 있습니다.

그럼 setAttachment 를 사용해서 눈 이미지를 변경해보겠습니다. 버튼을 클릭하면 눈을 변경하는 코드를 작성해보겠습니다.

changeEyes () {

// eye 슬롯에 접근

let eyes = this.spine.findSlot("eye").attachment.name;

// eye 스킨 변경

this.spine.setAttachment("eye", eyes === "eye_surprised" ? "eye_indifferent" : "eye_surprised");

}

eye 슬롯에 접근하고 버튼을 클릭하면서 현재 attachment 이미지에 따라서 눈 이미지를 변경해주는 코드입니다. 실행하면 아래와 같습니다.

그런데 고글에 덮어져서 확인이 돼지않는 문제가 생겼습니다. 똑같이 setAttachment 를 사용해서 고글을 없애보도록 하겠습니다. 생각보다 안경빨인? spineboy를 볼 수 있습니다.

// 현재 고글의 attachment 를 삭제

this.spine.setAttachment("goggles", null);

Skin

Attachment 가 파츠 하나하나의 이미지를 변경해주는 방식이었다면 Skin 은 전체 이미지를 변경해주는 방식입니다. 

this.spine.setSkin("스킨이름");

스킨의 목록은 Cocos Creator 에디터에 있는 Default Skin 항목에서 볼 수 있습니다.

하지만 spineboy의 스킨이 없는관계로... 고글을 벗은 spineboy를 다시 원래대로 리셋시켜 보는 코드를 작성해보겠습니다.

reset () {

this.spine.setSkin("default");

}

위의 코드는 skin reset 버튼을 클릭했을 때 spineboy 가 다시 고글을 쓴채로 변하는 코드입니다. 실행하면 아래와 같습니다.