Skins and slots

Several skins at once

hero.skins = ['skin-base', 'hair/pink', 'clothes/hoodie-orange'];
console.log(hero.skins);

A list of skins is active as one skin. Each skin adds its attachments, bones and constraints, in the order of the list. Where two skins store an attachment under one slot and name, the later one wins.

That is what the official runtime does with a skin that Skin.addSkin fills, so a rig from the mix-and-match example works as it does there. All instances of an asset share the combined skin of a list. One that no instance shows any more is freed after a while. Setting skins puts the slots into their setup pose, as setting skin does.

Change what a slot shows

const weapon = hero.slot('weapon');

weapon.attachment = 'axe';
weapon.attachment = null;

slot returns the handle of a slot, the same object at every call. attachment takes the name the skins store an attachment under for that slot: the active skins first, then the default skin. Null shows nothing. A name the skins do not have throws an error that lists the names they have.

Tint a slot

const glow = hero.slot('glow');

glow.tint = 0xffcc00;
glow.alpha = 0.5;

tint is the color of the slot as a Pixi tint. alpha goes from 0 to 1. A slot with tint black in the editor also has darkTint.

A write to a slot stays until an animation that keys the slot writes it again. A setup pose of the slots ends it too.

The setup pose

hero.stop();
hero.setupPose();
hero.setupPose('slots');

setupPose puts the bones and the slots into their setup pose. 'bones' or 'slots' resets one half. The tracks keep playing, so stop them first to hold the pose.

Points on a bone

const tip = hero.bone('sword').localToWorld({ x: 120, y: 0 });

spark.position.copyFrom(tip);

localToWorld takes a point next to a bone into the space of the skeleton. worldToLocal goes the other way. Pixi’s toGlobal and toLocal of the skeleton take it on to the stage.