[Cocos Creator] Spine 정복하기(3) - Event Listener

EventListener

애니메이션을 실행할 때, 중단될 때, 끝날 때 등등 해당 지점에서 이벤트를 수신하여 그에대한 콜백을 처리 할 수 있습니다. 어떤 이벤트 리스너가 있는지 알아보겠습니다.

setStartListener

setStartListener는 애니메이션이 시작하면 호출되는 메서드입니다.

this.spine.setStartListener((trackEntry) => {

console.log(trackEntry);

console.log(trackEntry.animation.name + " anim start.");

});

모든 리스너의 콜백함수는 trackEntry 라는 인자값을 받습니다. trackEntry 객체는 애니메이션정보, 트랙정보, 애니메이션 시간 등 여러 정보들을 담고있습니다.

setEndListener

setEndListener는 트랙에서 애니메이션이 제거 될 때 호출되는 메서드이며 이 경우에 트랙에서 제거 될 수 있습니다.

- setAnimation 을 사용하여 다른 애니메이션이 실행 될 때

- clearTrack 으로 제거 할 때

this.spine.setEndListener(trackEntry => {

console.log(trackEntry.animation.name + " anim end.");

});

setDisposeListener

setEndListener는 setEndListener 와 똑같은 경우에 발생하지만, 생명주기의 마지막에 호출되는 메서드입니다.

this.spine.setDisposeListener(trackEntry => {

console.log(trackEntry.animation.name + " anim dispose.");

});

setInterruptListener

setInterruptListener는 애니메이션이 중간에 중단될 때 호출되는 메서드 입니다.

this.spine.setInterruptListener(trackEntry => {

console.log(trackEntry.animation.name + " anim interrupt.");

});

예로 들면 idle 진행중에 walk 로 변경하면 setInterruptListener 에 idle 정보가 호출됩니다.

setCompleteListener

setCompleteListener는 애니메이션이 완료 될 때 실행되는 메소드이며 루프 여부에 관계없이 애니메이션을 완료할 때마다 실행됩니다.

this.spine.setCompleteListener((trackEntry) => {

console.log(trackEntry.animation.name + " anim complete.");

});

setEventListener

setEventListener는 Spine 애니메이션 제작자가 툴에서 지정한 이벤트입니다. 제작자가 지정한 위치에 이벤트를 추가할 수 있으며 intValue, floatValue, stringValue의 이벤트 값을 받게 됩니다. Spine 애니메이션 제작자와 클라이언트가 상의 후, 원하는 이벤트명과 데이터를 보낼 수 있게 정의하면 될 것 같습니다.

this.spine.setEventListener((trackEntry, event) => {

console.log("Custom Event", event);

});

setEventListener 는 다른이벤트와 달리 2번 째 인자로 event 객체를 받습니다.