Guidance in setting up a character for swappable accessories.

render07

Hello! I've been a user for Spine for years but is just now trying to lock into using skins as the game I'm working on wants to implement a cosmetic system.

I've combed through some existing threads on the forum, some that are partially applicable, but none that helps me understand how to proceed with my endeavor.

I understand that skins use placeholders that allow slots to call attachments. Your example file of mix-and-match does a wonderful job of expressing how bones can be assigned to multiple skins.

The condition I need is for this character (and potentially more) to have any combination of say, a hat, a mask, and a cape. I see in your example file that although I can toggle skins to look at accessories in isolation, it seems that there are really only 4 full skin types being boy , girl , girl-blue-cape and girl-spring-dress .

How would I, for example, change girl have to have boy backpack? Is there a way to have overlapping skins at run time? I'm an animator who is still learning the engineering side of Spine so I'm not sure.

To give a target outcome with our game in mind: A user could choose to have our Cat character with a beanie and glasses, or choose to keep the glasses and switch out for a cap. With my limited knowledge I would make skins such as cat-glasses-beanie and cat-glasses-cap . I feel that the scope of this would explode doing it this way so I imagine there has to be a better method.

Thank you for taking the time to digest my issue and for future guidance. Let me know if I need to provide my specifics!

Misaki

render07 Spinebot's answer covers how to apply multiple skins at runtime, but if you want to combine multiple skins within the Spine Editor, use the pins in the Skins view. For details, see the Skins view page of the user guide: https://esotericsoftware.com/spine-skins-view#Skins-view

Spinebot

To achieve a system where you can mix and match accessories like hats, masks, and capes for your character, you can utilize Spine's skins feature to create a more flexible setup. Instead of creating a separate skin for every possible combination of accessories, you can create individual skins for each accessory. For example, you would have a "hat" skin, a "mask" skin, and a "cape" skin. At runtime, you can programmatically combine these skins to create the desired combination for your character.

This approach allows you to dynamically construct a skin by combining the attachments from multiple skins. You can set up your character with skin placeholders for each accessory type, and then at runtime, you can choose which attachments to display by combining the relevant skins. This way, you avoid the need to create a separate skin for every possible combination, which would indeed become unmanageable.

For your specific example, you would have a "cat" base skin and separate skins for "glasses," "beanie," and "cap." At runtime, you can combine the "cat" skin with the "glasses" and either the "beanie" or "cap" skin, depending on the user's choice. This method is efficient and scalable, allowing you to easily add new accessories without having to create new skins for every combination.

render07

Spinebot Thank you for explaining that it is possible. Does Esoteric Software have a tutorial on how to achieve this at runtime, or would you care to explain how to layer skins in Unity? I know that I can essentially stack skeletons in a prefab and set it that way. Is this something an engineer would most likely figure out?

render07

Misaki I didn't know about pinning, this will help me visualize!

Misaki

render07 If you use the spine-unity runtime, the following section in the documentation provides guidance on how to configure skins:
spine-unity Runtime Documentation Main Components #Setting Skins

As mentioned in that section, you can examine the example scenes Spine Examples/Other Examples/Mix and Match and Spine Examples/Other Examples/Mix and Match Equip and the used MixAndMatch.cs example script for further insights. By following these examples, you can easily implement skin settings functionality. These scenes are briefly introduced from 18:21 to 18:57 in the following video: