- Modifié
Mix and match with items that have multiple sprites?
Hello! I'm very new to spine so I may not be using the correct terms. I think "Mix and Match" means when you have like a customizable shirt (red shirt, blue shirt) and customizable pants (red pants, blue pants), and you want your character to be able to wear a red shirt with red pants, a red shirt with blue pants, a blue shirt with red pants, or a blue shirt with blue pants. Do I have that definition right?
I want to do this with my characters, but my character has a shirt that is in 3 attachments: The body, the left sleeve, and the right sleeve.
I'm not sure how to represent that in spine.
- I think I want a single shirt slot, because I don't want you to be able to wear a red and blue shirt at the same time, just one or the other.
- Even though the shirt consists of 3 attachments, they should all be visible or hidden together. In other words, you should NOT be able to wear a blue left sleeve without the blue body or blue right sleeve. You should also not be able to wear a blue sleeve with a red sleeve. The whole shirt should be red or blue, but not mixed and matched. I believe this is another reason I want a shirt slot instead of a shirt body slot, a left sleeve slot, and a right sleeve slot.
- OK, so to mix and match the shirt, I think that means the shirt slot is supposed to have a skin placeholder in it. After that, I get lost. As far as I can tell, you're allowed one attachment per skin placeholder per skin? But I need 3 attachments, (body, left sleeve, and right sleeve). Am I supposed to make 3 skin placeholders under the shirt slot? What if I have a really complex shirt that needs more placeholders, like the shirt has a popup collar that's its own attachment? Do I just make a 4th placeholder that's blank for other skins?
Thanks for the help!
You definitely want 3 slots for the 3 parts of your shirt! Let's call the shirt an item. The item consists of 3 slots, shirt-left-sleeve, shirt-right-sleeve, shirt-torso. Each slot gets a skin placeholder of the same name. Then you create a new skin, say shirt-blue, activate it, and drag the images to the correct slot. The shirt-blue skin then represents the entire shirt, which is easy to manage at runtime when combing skins.
You also want to organize your image folders accordingly. E.g. you have a folder shirts/, and in it, one folder per concrete shirt version, e.g. shirts/shirt-red/, shirts/shirt-blue/. Each of these folders then contains the 3 images making up the shirt. To bring in a new shirt, you create a new folder with the corresponding images, create a new skin, activate it, and attach the 3 images to the skin placeholders. That's it!
To preview combinations of different items directly in Spine, you can use the skin view we've added in 3.7. More info here: Spine 3.7 features rundown - YouTube
To combine the skins for the body, pants, and shirt at runtime in your game or app, you simply merge the attachments from each selected skin into a new skin programmatically. If your character switches an item, you generate a new skin.
Gotcha, thanks.
I'm doing everything you suggest except for a directory for each shirt. That's just a best practice for organization, right?
The reason I'm not doing this is because I can't figure out how to get the PSD script to output this way, and I expect to add LOTS of new layers to my PSD often whenever my artist adds new items.
I did notice that you can have slot groups named certain things to output layers in sub directories, but my character has a forearm in front of her shirt and her bicep behind her shirt. I couldn't figure out a way to have an "arm" folder and a "shirt" folder, since the arm group would need to be before and after the shirt group. Therefore, I kind of decided to skip this, and just do this extra effort in spine instead of in the PSD. Let me know if there's a better way to approach this. Thanks again!
Hello!
Yes, a folder for each skin is definitely the best organization you could have, but it is not mandatory.
To have the PS script output a folder for each skin and create skins, just place the layers that should belong to a skin in a folder with the [skin] tag.
To have the script output a folder without creating a skin, you can add a [folder] tag to the folder you are placing the layers inside instead.
Slots are used to define the draw order and are independent of skins. Basic Concepts - Spine User Guide: Slots
This means that if you place the bicep in a basic skin, and the t-shirt in another skin, as long as the slots are organized in the correct order, everything will be displayed fine. Of course you'll need to have separate slots for each element that needs to be seen simultaneously.
Erikari a écritSlots are used to define the draw order and are independent of skins. Basic Concepts - Spine User Guide: Slots
This means that if you place the bicep in a basic skin, and the t-shirt in another skin, as long as the slots are organized in the correct order, everything will be displayed fine. Of course you'll need to have separate slots for each element that needs to be seen simultaneously.
Right, but imagine this from the perspective of my artist working in photoshop. To put the arm and the t-shirt in a group, he'd need to reorder the layers so they look wrong in photoshop. That is, he'll need to put the arm group either above the t-shirt group or below it, but it only looks correct when the bicep is above and the forearm is below.
Don't worry 
Your artist can create two separate images for the bicep and forearm, in two separate groups. both groups can be given the skin "bare skin" and they'll be placed in the same skin and folder once exported.