Animation and Spine

Play timelines, react when they finish, trigger code at exact frames, and control Spine.

Timelines

Any container animated on the zStudio timeline becomes a ZTimeline. By default it plays once by itself as soon as it loads. Untick play on start and turn on looping in zStudio to change that, or set them from code.

const intro = stage.get('intro') as ZTimeline;

intro.stop();
intro.play();
intro.gotoAndPlay(0);   // jump to a frame and play
intro.gotoAndStop(12);  // jump to a frame and stay there

intro.looping = true;

intro.currentFrame;     // where it is now
intro.totalFrames;      // how long it is

To check whether something is a timeline, use instanceof ZTimeline.

React when it ends

intro.addStateEndEventListener(() => {
  showMenu();
});

intro.removeStateEndEventListener();

On a looping timeline this runs at the end of every loop.

Run code at an exact frame

Add a cue point in zStudio, then listen for its name. This is the way to sync a sound or an effect to a frame.

const onHit = (timeline: ZTimeline) => {
  playSound('hit');
};

ZCuePointsManager.addCuePointListener('hit', onHit);

// Pass the same function to remove it
ZCuePointsManager.removeCuePointListener('hit', onHit);

Cue points are global: a listener runs for that name on every timeline.

Spine

A Spine asset sits inside a container. getSpine() returns the normal Spine object, so everything in the Spine runtime works from there.

const hero = stage.get('hero') as ZContainer;
const spine = hero.getSpine();

if (spine) {
  spine.state.setAnimation(0, 'idle', true);
  spine.state.addAnimation(0, 'walk', true, 0);
}