Esoteric Software

[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!

[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