• Editor
  • customisable character

Hey guys,

I want to create a customisable character for a HTML5 game. Basically allowing the player to change arms, legs, heads, etc, during gameplay.

Though I've been animating for years, I'm TOTALLY new to Spine so please bare with my noob questions!
What's the best way to set up my character?
I've seen how to export my character from photoshop with a script.
Should I export ALL my parts at once? Can I add additional parts later?
Do I attach all the change-able images to slots? (ie. arm slot with multiple images?)

Any advice would be appreciated! Thanks!

Related Discussions
...
  • 編集済み
tali wrote

Should I export ALL my parts at once? Can I add additional parts later?
Do I attach all the change-able images to slots? (ie. arm slot with multiple images?)

tali wrote

What's the best way to set up my character?
Should I export ALL my parts at once? Can I add additional parts later?

The ideal way to set up your character would be to have all the skins and their parts ready before starting to animate, but you can also add them later.

Since this is a relatively new feature, I'll make an example of how you can structure things in photoshop.

As you can see from the help section

there are various commands available in the new PhotoshopToSpine script.

Here we have an example of layers structure that could work for your case:

HTTPS をサポートしていないため、画像は非表示になっています。 | まだ表示する

Skins
First we have the folders containing the skin, a tip: if you plan to use some parts across multiple skins, call them all the same way, and Spine will place them automatically in the right slot and skin placeholder.
As you can see, just place [skin] before the name of the skin, and the script will understand that that folder is a skin. Otherwise it won't. ( read more about skins here: Skins - Spine User Guide )

Slots
Slots are the attachments - in Spine we call images "attachments" - containers. ( for more: Basic Concepts - Spine User Guide: Slots )
As with skins, just place [slot] before the name of a folder to get all the elements inside into the designated slot.

Rulers Alignment
The script now performs alignment according to the Photoshop origin by default.
Since I myself experienced Photoshop being a little forgetful and resetting it, I reccomend adding two guides where you think the origin of your characters should be, so that even if you make a copy of the file you can retrieve the correct ruler position later.

Why this is good for you: if you want to add skins later but the canvas is too small, you can enlarge it and nothing bad will happen.

And here is the result in Spine.

Blue skin selected:

Red skin selected:

Regarding importing new skins to the existing ones, the last video on this page explains it: Skins - Spine User Guide
Basically, you duplicate an existing skin, and if you followed the advice earlier, you should have the reusable parts sharing the same name, so you select the attachments and with Find&Replace change the path to the new one.

Hope this will help you (: I'm here if you have more questions.

Wow, thank you SO MUCH Erika! This makes it a lot easier to understand.
Love the new features in the script. Will give it a try today.

I have some more questions (of course!)
In the game I'm working on - rather than making different skins for diff characters (like goblin / goblin girl), I need to make just one character with interchangeable parts - different heads, torsos, arm & legs.
So - should I just make one skin, with all the images attached to each relevant slot? (ie. head slot > head 1, head 2, head 3)

Certain body parts also have unique animations. For example, certain arms will have unique animations that only those arm parts can do. So, I don't need to duplicate certain animations for ALL arm parts.
Any tips on the best way to set this up?

Thanks again for your help!! 🙂

tali wrote

In the game I'm working on - rather than making different skins for diff characters (like goblin / goblin girl), I need to make just one character with interchangeable parts - different heads, torsos, arm & legs.
So - should I just make one skin, with all the images attached to each relevant slot? (ie. head slot > head 1, head 2, head 3)

No, you should have a skin for every interchangeable part, I know some people have the skin grouped by a theme or style, and then they are able to load via code just the selected part. You can also start with having a complete skin with different parts in it and you separate them later. (by different parts I mean a head and a shoe, not two heads, two heads should go into two different skins if they look different and are not a different angle of the same thing)

tali wrote

Certain body parts also have unique animations. For example, certain arms will have unique animations that only those arm parts can do. So, I don't need to duplicate certain animations for ALL arm parts.
Any tips on the best way to set this up?

If the animations are just different but don't require extra bones, then just make the animations, you can simply not select these animations via code later on in your game engine.

If they are so different they need extra bones, try to keep the bones to the minimum, if possibile to reuse some bones, and maybe favour point bones and attach meshes to them, because they clutter the space way less.
It doesn't seem to be your case, so it shouldn't be a problem (:

Hi Erika,
Just to clarify, do you mean i should have 1 skin for 'head' parts, another skin for 'body' parts, etc?
OR... a skin per 'theme', like skin for outfit 1, skin for outfit 2, etc...
Not all parts have a whole 'theme' or 'outfit' for the entire character. ie. we may have more arm parts than heads for instance.
Please pardon my newbiness! 🙂

If I have all the body parts under slots in 1 skin, would it be more difficult to turn the parts on & off in the code?

Regarding the unique animations, some of them may require extra bones, yes!

Many thanks for your help 🙂

Eheh, it's good you asked for clarifications, because I meant something like this:

Skins:

head-helmet
head-coppola
head-santa-hat
body-leather-jacket
body-striped-shirt
body-pantyhoses

OR:

Skins:

Knight
Rogue
Golden-knight
Phantom

Slots are meant to change parts during a single animation by activating/deactivating/switching the attachments inside them. Not across different customizations.
This is a very important concept to understand, so it's ok to repeat it a little (;

Everyone was a newbie at some point! Take no shame, and I'm looking forward to see what you'll create (:

5日 後

Thank again for your help Erika!! You're a legend!

After setting up my character PSD with all the skins & slots all organised, i've now had an error when trying to import the data to Spine.
After trying all sorts of fixes, I made a small test PSD with just a couple of images to try to figure out what the problem is.

It seems the error only happens when I have skins in the photoshop file. If i only have slots, it works.
Any ideas what's going on?
I've made sure I downloaded the latest script.

Thanks in advance!

Sure! It's just a test PSD. Attached!

Hey tali, thanks for sending us the psd, what version of Spine are you using? the latest should have fixed this problem, or at least I exported your files and everything was fine both in the photoshop export and then in Spine. Could you try to update the editor, if you didn't please?

This is the version i'm using. Doesn't it auto-update??

Yep. I see the script was updated an hour ago! I just tried this latest script and still have the same problem 😢 😢
It exports fine, but doesn't import to Spine.

Is there a manual way to update Spine? Should I try uninstall & install again?

Ok, so we have the same setting. (I'm on windows 10 though)
My export settings are as follows:

then I drag and drop the json that was created by Photoshop in Spine and I have this window:

then I just make the skin visible and I see your character:

I've attached the resulting json, is it the same as yours? does it give you problems importing it?

test-rig.json

Hi Erika,
I checked out your json and it was different to mine! The x,y coordinates were all 1px off.
I used exactly the same export settings as you in Photoshop. I'm on a mac, using the latest version of Photoshop (CC 2017.1.1) - not sure if that makes a difference?!
When I used your json file instead of mine, and imported it (import data) into Spine, it worked!

I've attached my json file.

So still not sure what's going on there... I still can't use the script with my setup for some reason.
Man, I wish I could get to animating! 🙂

An older version of the script was incorrectly shifting the images imported into Spine by the script's padding. Make sure you are using the latest script, which you can get by right clicking this link and choosing Save As:
http://esotericsoftware.com/git/spine-scripts/raw/photoshop/PhotoshopToSpine.jsx

Maybe we should start versioning the Photoshop script every time it is updated, to make it easier to know if you have the latest.

Hi Nate,
I'm using the latest script, even downloaded it again from your link above, but it's still happening. :S

Hi Tali, good news! the problem was in the output json, so if you can convert your EOL to CRLF you'll be able to use it immediately, otherwise, we've added support for this in Spine 3.6.44 (: