It is a common scenario to have dynamic information within an animation, such as UI with dynamic text or a character holding different items. In such cases, we may want to add a child Pixi object (such as BitmapText, Sprite, Container, or even another Spine) to a slot of a Spine animation and have it follow the slot’s transformation during the animation.

How to Do It in pixi-spine

Each slot in Spine is an extension of Pixi.Container. This makes it straightforward to add a Pixi object to the slot container using Pixi’s addChild() method:

const slotIndex = spine.skeleton.findSlotIndex(slotName);
const slotContainer = spine.slotContainers[slotIndex] as Container;
slotContainer?.addChild(pixiObject);

This method works well, allowing the pixiObject to inherit all transform properties from its parent slot during the animation. As the pixiObject follows Pixi’s hierarchical structure, it also adopts the parent’s alpha tint and even masking properties.

How to Do It in spine-runtimes-pixi

The Spine Runtimes libraries, maintained by Esoteric Software, offer enhanced manipulation features for bones and animations. However, adding a Pixi object is slightly different in this case because slots are not Pixi.Container objects, although the slot meshes are. Fortunately, the Spine Runtimes package includes an internal function called addSlotObject() that can add the object and update its transform, alpha and even clipping mask accordingly.

spine.addSlotObject(slotName, pixiObject);

Noted that this feature is available from version 4.2.46, following an Issue I raised. It’s impressive to see how quickly the Spine Runtimes are maintained and updated to match the capabilities of pixi-spine.

Conclusion

By implementing these methods, you can effectively enhance your animations with dynamic elements, improving the user experience of your projects or games.