Bones and placeholders

Both shapes are SilkGraphics of pixi-silk. Any Pixi Container works the same way.

Attach to a slot

const RING = conic([0x64d2ff, 0xbf5af2, 0xff375f]);

const ring = new SilkGraphics();

ring.circle(-73, -15, 72).stroke({ width: 14, gradient: RING });
hero.attach('bee_sp', ring);

attach makes the container a part of the skeleton. It is drawn at the place of the slot in the draw order, after the attachment of that slot. It moves with the bone of the slot, and its alpha is that of the slot.

A slot holds one container, and it shows on an empty slot too. That is what a placeholder slot of a rig is for. detach lets the container go.

hero.attach('glow', flare, { followAttachment: true, followColor: true });

followAttachment hides the container while the slot shows no attachment. followColor tints it with the color of the slot.

Each attached slot costs one more draw call, plus the draw calls of the container. A clipping attachment does not clip the container.

Follow a bone

const mark = new SilkGraphics();

mark.regularPoly(125, 0, 12, 4).fill(0x30d158);
hero.addChild(mark);
hero.follow('head', mark);

follow gives a container the position, rotation, scale and skew of a bone after every update. The transform is in the space of the skeleton, so add the container to it first.

The container stays where it is in the display list, and following costs no draw call. unfollow ends it.

Read and write a bone

const head = hero.bone('head');

app.ticker.add(() => {
    show(`head  x ${places(head.worldX)}  y ${places(head.worldY)}`);
});

bone returns the handle of a bone, the same object at every call. worldX, worldY and worldRotation are read only. They say where the bone is in the skeleton after the last update, with y pointing down as in Pixi.

const head = hero.bone('head');

head.rotation += 15;

x, y, rotation, scaleX and scaleY are the pose next to the parent bone, as the Spine editor shows it. Rotation is in degrees.

A write takes effect with the next update. It stays until an animation that keys the bone writes it again.