PIXI JS and Spine

BigBossRoss

Greetings Community,

I was wondering what is the best practice when it comes to exporting spine assets.

For example:

I have a sprite who has a general skin. Let's say 2 skins a cat and a dog skin. Each of these skins has multiple angles when they are moving, for example their back side or their side portrait. 6 angles to be exact.

Then I want to have attachments that also have angles to them. I want to attach those attachments to let's say the hand or feet region on my sprite.

How do I go about this? Is something like this even do able?

Thanks!

BigBossRoss

Mario

What you describe is possible in the Spine Editor and generally done with a single skeleton. For different perspectives, you'd either swap our attachments based on perspecitve, or have subsets of bones and corresponding slots only used for the specific perspective, or a combination of both. Here's an example that uses the first option:
Spine Tips: 19 cat turn

When you export that skeleton, all the attachments of all skins will be exported to a single texture atlas. That's not specific to PixiJS. Any Spine Runtime can load and render the exported data.

Erika

Hello, just to add to the answer above in case you are looking for ways to achieve what you describe, here are some resources:

Simplified blog post about adding one alternative pose:
Blog: Rigging new poses - Spine workflow tutorial

Complete streams about rigging a full character turnaround:
https://www.youtube.com/watch?list=PLwGl7Ikd_6GTpd2PnWqqIZVsqotxtrtaE&v=5uzrYwH2LpQ
https://www.youtube.com/watch?list=PLwGl7Ikd_6GTpd2PnWqqIZVsqotxtrtaE&v=WVLZCfitpdE

More examples, downloads, chapters, etc:
Spine: Twitch

BigBossRoss

Those are great! Yeah I have some great people on my team that were able to get me what I needed. Where im really stuck is with the runtime API how do i get let say my hat to show on top of my cat? They are all in different skins with attachments of all angles of the items?

Mario

We don't have a PIXI example, as we don't maintain that runtime, but since it is based on spine-ts, you can invoke the same APIs as demonstrated in this spine-ts example: https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/mix-and-match.html#L48