Start

Install

npm install pixi-marrow pixi.js

pixi.js is the one peer dependency, from version 8.16. The package is a pre-release and is not on npm yet.

Load

import { MarrowSpine } from 'pixi-marrow';

const hero = await MarrowSpine.load({ skeleton: 'hero.skel', atlas: 'hero.atlas' });

app.stage.addChild(hero);

skeleton is a .skel or .json export of Spine 4.1, 4.2 or 4.3. The page images load from next to the atlas.

hero is a Pixi Container. Move it, scale it and add it to the stage like any other. A second load of the same files shares one asset with the first.

Play

hero.play('idle', { loop: true });
hero.play('aim', { track: 1 });
hero.stop({ track: 1, mix: 0.2 });

play starts an animation now and returns a Track, the handle on that animation. Each track holds one animation, and a higher track is applied on top of the lower ones. stop clears one track, or all of them when you name none.

A name the skeleton lacks throws a MarrowError that lists the valid names.

Queue

hero.play('jump');
hero.queue('run', { loop: true });

queue plays an animation after what the track holds. On an empty track it plays now.

Mix

hero.defaultMix = 0.2;
hero.setMix('run', 'jump', 0.1);
hero.play('walk', { mix: 0.4 });

A mix is the time in seconds one animation takes to blend into the next. defaultMix holds for every pair of animations, setMix for one pair and the mix option for one call.

Events

import type { MarrowEvent, Track } from 'pixi-marrow';

hero.on('complete', (track: Track) => console.log(track.animation));
hero.on('event', (event: MarrowEvent) => console.log(event.name));

const shot = hero.play('shoot', { track: 1 });

await shot.finished;

The display object emits start, interrupt, end, dispose, complete and event. A looping animation completes once per loop. event carries a key that the animator placed in the animation, such as a footstep.

finished resolves when an animation that does not loop has played to its end.

Skins

console.log(hero.info.skins);
hero.skin = 'knight';

info lists the names of the skeleton: skins, animations, bones, slots and events. Setting skin also resets the slots to the setup pose.