[Cocos Creator] Spine 정복하기(2) - Animation

Animation

Spine 애니메이션은 현재 상태에 따라서 여러 애니메이션을 적용하거나 나중에 애니메이션이 재생할 수 있도록하는 애니메이션 큐잉, 크로스 페이딩이 되기위한 믹싱, 여러 애니메이션 동시적용 등 다양한 기능을 지원하고 있습니다. 이번 포스팅에서는 Animation을 효율적이고 잘 구현 할 수 있게 해주는 메서드들에 대해 알아보겠습니다.

Mix

믹스는 애니메이션을 변경할 때 크로스 페이드 되어서 애니메이션을 부드럽게 전환해주는 기능입니다. 

this.spine.setMix("idle", "walk", 0.4); // (fromAnimation, toAnimation, duration)

위의 코드를 예로들면 "idle" 상태에서 "walk" 상태로 애니메이션이 전환될 때 0.4 초의 시간동안 믹싱된다는 뜻이다.

하지만 "idle" -> "walk" 는 믹싱이 됐지만, "walk" -> "idle" 은 믹싱이 되지 않습니다. 그래서 반대로 전환될때도 정의 해줘야 합니다.

this.spine.setMix("idle", "walk", 0.4); // (fromAnimation, toAnimation, duration)

this.spine.setMix("walk", "idle", 0.4);

애니메이션 실행

애니메이션은 Spine 애니메이션 제작자가 구현한 여러 애니메이션을 사용할 수 있습니다. 예제의 Spine 애니메니메이션 목록은 아래와 같습니다.

테스트로 여러버튼을 만들고 버튼을 클릭하면 원하는 애니메이션을 실행하는 예제를 작성 해 보겠습니다. 먼저 버튼을 여러개 만들어줍니다.

다음으로 스크립트를 작성합니다. 

idle () {

// 애니메이션 실행

this.spine.setAnimation(0, "idle", false); // (trackIndex, animName, loop)

}

해당 함수는 idle 버튼을 클릭했을 때 실행되는 함수 입니다. 애니메이션 실행은 setAnimation 메서드를 이용하여 실행시킬 수 있습니다.

첫 번째 인자값은 trackIndex 라고하는 인자인데 이부분은 추후에 설명하겠습니다.

두 번째 인자값은 실행 할 애니메이션 이름을 String 으로 넣어주면 됩니다.

세 번째 인자값은 반복 여부입니다. true 일 때 반복적으로 재생합니다.

이와 같이 다른 애니메이션도 구현을 해줍니다. 테스트를 실행한 결과는 아래와 같습니다.

애니메이션 큐잉

만약 점프를 하고 끝날 때 걷는 애니메이션을 실행시키는 로직을 작성한다고 가정하면 끝나는 시간을 측정해서 스케줄을 하는 방법과 끝나는시간에 이벤트를 수신하는 방법들이 있습니다. 하지만 Spine 에서는 나중에 실행 할 애니메이션을 대기 큐에 저장했다가 해당 애니메이션이 끝나면 큐에 있는 걸 꺼내서 바로 재생할 수 있습니다. jump 함수를 아래와 같이 작성합니다.

jump () {

this.spine.setAnimation(0, "jump", false);

// 나중에 재생 할 애니메이션을 큐에 넣는다. 실행하는 애니메이션이 없다면 바로 실행된다.

this.spine.addAnimation(0, "walk", true, 0); // (trackIndex, animName, loop, delay?)

}

애니메이션 저장은 addAnimation 을 사용합니다. 인자값은 setAnimation 과 비슷하지만 4번째 인자값인 delay 이 추가됩니다. 선택사항 이며, delay 값을 설정시에는 애니메이션이 delay초 값 이후에 바로 실행됩니다. 0을 넣을 시에는 무시합니다.

Track

Spine 에서는 트랙이라는 개념을 사용합니다. 여기서 트랙은 하나의 공간이라고 생각하시면 될 것 같습니다. 트랙은 여러개의 트랙을 생성 할 수 있고, 트랙 안에는 애니메이션을 실행시킬 수 있습니다. 단, 1개의 트랙에는 1개의 애니메이션만 실행 할 수 있습니다. 예로들면 0 번트랙에서 idle 중인 캐릭터를 walk 시키면 idle 을 중단하고 walk 애니메이션을 실행합니다. 위의 예제코드도 다음 애니메이션을 실행 할 때 기존 애니메이션이 중단되었던 이유도 모두 TrackIndex 를 0으로 설정했기 때문입니다.

또한, 서로다른 트랙은 동시에 애니메이션이 실행가능합니다. 0번 트랙에 walk 를 실행하고 1번트랙에 shoot 을 설정하면 걸으면서 총을 쏠 수 있게됩니다.

마지막으로 트랙은 낮은 트랙부터 순서대로 애니메이션이 실행됩니다. 순서대로 실행되는게 어떤차이가 있는지 생각을 할 수 도 있는데 아주 큰차이가 있습니다. 예로들어 0번 트랙에 walk 가 있고 1번 트랙에 run 이 있다고 가정하고 두개의 애니메이션을 동시에 실행했을 때 결과를 확인하면 run 만 실행이 되는 모습을 볼 수 있습니다. 즉, 비슷한 기능을 사용하는 애니메이션들은 트랙이 높을수록 우선순위를 가지고 낮은 순위의 트랙은 가려지게 됩니다. (실제로 실행은되지만 높은 트랙에 묻혀서 보이지 않는다고 생각하면 됩니다.) 레이어와 비슷한 기능을 하는것이죠. 

결론적으로, 트랙에 대해서 요약하자면

- 트랙은 여러개가 존재가능하며 1개의 트랙에는 1개의 애니메이션만 실행 가능하다.

- 서로다른 트랙은 동시에 애니메이션이 실행가능하다.

- 트랙은 인덱스가 높을수록 레이어상으로 위쪽으로 실행된다. 낮은 트랙은 높은 트랙에 묻혀진다.

그럼 움직이면서 총쏘는 애니메이션은 어떻게 동작할까요? 정답은 0번트랙에 walk 를 설정하고 1번트랙에 shoot 을 설정하면 됩니다. 그럼 총쏘는 애니메이션에 가려저서 걷는 애니메이션이 보이지 않냐라는 생각을 할 수 도 있는데 그렇지 않습니다. 총쏘는 애니메이션을 실행해보면 팔만 쓰고 있습니다. 즉, 팔 이외에는 다른 애니메이션을 실행하지 않기 때문에 팔 부분만 변경되고 걷는 부분은 계속 정상적으로 실행이 될 수 있습니다.

기타 메서드

// 모든 트랙제거

this.spine.clearTracks();

// 해당 인덱스 트랙 제거

this.spine.clearTrack(0);