Avatar creation -> Skin customization

Alex

Hello,

Our team is working on a project that emphasize on avatar customization.
We've purchased spine last week thinking it would be the best way to get this done. I've mastered the basics of skeleton creation, skinning and animation and tried to solve the problem, but I'm a bit stuck now.
We're working with a cocosd2x runtime and all avatars have the exact same skeleton.

Here is what we are trying to do :
We have a skin database with multiple choices and possibilities of customization for different part of the body : the head, eyes, mouth, body, arms and legs, not to mention different colors for the basic shape.
So, when the player launches the game he starts by creating a character choosing whatever body parts he likes and assembling them.

The question is : how can we actually do that with spine?
I can't just make all the skins in spine. Too many possibilities and too many checks to do. We can't have all pieces in atlas map either, it would be too big. The best would be to get them from a folder and to assemble them with code.
Is there a way to do this? How can we create a skin without using an atlas?

Thank you for your help.

Søren

You can create new attachments at runtime and choose which slot they should be attached to. So you don't need to create skins for everything.

Also you can have multiple atlases, and pack all the needed images for your characters in those atlases. This might result in many atlases, but in the end this should take up less space than having individual images. To create these atlases you can open the texture packer in Spine Ctrl+P and set the input and output directory. In settings you can combine subdirectories if needed.

Alex

Thanks for your reply, Shiu.

We managed to use attachments to change individual elements using an atlas.
But we have hundreds of custom elements and we will be using only one of each at a time.
We are targeting mobile devices so we can't afford to load too many atlases in memory (for example : it's going to load 100 heads which may take up multiple spritesheets when we only need 1 head, multiply this by all body parts and it's getting way too big, the devices will crash for sure).
It would take less space in memory to just load the body parts needed.
Can we load images from a path, without using atlases?

We have not found any function in the cocosd2x runtime to do that.

We love the editor, we're just missing a few tips. 8D
Thanks for your help!

Nate

If you're creating attachments at runtime, you can specify the texture and UVs. You could use a different texture for each attachment, but probably what you want is to create an atlas at runtime only with the images you need.

Alex

We're still new to spine and I'm afraid we don't know how to do that.
Can you explain technically how to do this, both in spine and in code (cocosd2x)?
What should my exporting options be too?
And what are UVs by the way?

Thank you!

I've been browsing the forum since yesterday to find a topic similar to mine, but I couldn't find any.

I really need your help on this, guys.
We're like, really stuck.

We can create customized characters now and that's cool because it is our key point, but if we can't export them we can't make the game. 🙁

I'm going to try an export with atlases, with all the skins to check how big it is, but this isn't the best way to go for us.
I don't think our device target can support it.

==> Nate
We really like your idea about creating an atlas at runtime with only the needed elements.
How can we do that ?

Thanks for any help.

musbah

Well I doubt I would be of any help since I've never used cocosd2x but I do know that you can create them in libgdx on runtime https://github.com/libgdx/libgdx/wiki/Texture-packer (this might help) I've also seen a gui somewhere that uses this but again since you need it at runtime probably isn't that useful. But you should probably search around maybe someone else has something similar for cocosd2x?? (And I haven't really checked spine runetime fully maybe it's somewhere in there? ) Anyway sorry I couldn't be of much help.

edit: http://www.cocos2d-x.org/wiki/TexturePackerfound this pretty fast on google maybe it will help aswell

Alex

Thanks for your help, Musbah.

We know texture packer quite well, but we can't use it for what we are trying to do.
Since we have a lot of elements, we can't afford any sprite/atlas sheet, it would crashes.
That's why we need to create an atlas at runtime with only the elements needed or load individual elements from a file/a path/whatever.

Thanks for your help anyway.
Your concern is much appreciated. 🙂

Cat

I had the same situation, but I'm not a programmer. I do the animation for my project which has a weapon-avatar system. So I tried to separate the weapon from the character atlas.

After finishing the skeleton animation in spine, for example: the archer walks while carrying the bow. Then, I created another 2 image folders. One of the folder included all of the archer's body parts except the bow. Another folder only got the bow in it.

Switch to the body folder and export the atlas, it will warn you that there are images missing, just skip it.
Then export another atlas by switching to the bow folder.
Now there are 2 atlas sharing the same animation : 1 for the archer, 1 for the bow only.
Then I just need to edit the bow atlas directly to create another type of bow.
So we just need to load a small image to change its weapon instead of a very large atlas that include all kinds of bows!

🙂 I hope this can help you!

Alex

That sounds awesome!
I'm a graphic artist too, so if I can do that in spine rather than having the programmer do it, it would be really cool.

I just need a few more tips before starting.
Do you start by animating bones only or do you actually attach images to them?
(Since the images paths aren't relative, I don't see how I can add 2 new images folders without destroying the existing images.)

When you say switch the folders, you mean set the files visible or invisible to export them?
And lastly, by editing the atlas directly, you mean changing the image in it with photoshop?

Thanks for your help, if this works you may have brought me the solution! 🙂🙂🙂

Cat

Yes, I attach the images on the bone, that will be easy to make the animation.
I keep the original folder (all images), copy and separate them into 2 new folders.
Then change the original images folder path to the new images folder (switch the folders).

If the images paths are not relative, it doesn't change any setting with your spine project,
its just the image couldn't display temporary, so no worries 😉

Yes, I edit the image in Photoshop by placing a new art on top of it. 🙂

Alex

Awesome!

I'm going to try this ASAP!

Thank you so much!

I can't use this for everything, but it might help on accessories.
Will do feedback.
Thanks again. 🙂

@[deleted]
Our programmer is trying to figure out how to create avatars from runtime.
But if you can explain how to create an atlas at runtime with only the needed elements, it would be really helpful. 🙂

I can't use Cat's trick. 🙁
I have too many and to much different skins to do that.

I'm sorry to ask for this again, but could Nate explain how to create atlas at runtime. It would solve all of our problem.
Our dev posted his code in the following topic : viewtopic.php?f=11&t=1554 (last post by Jonathan).
Can you help him ?

iamjianxin

@Nate Help ~, I need this solution of create atlas at runtime. Thank you.

Søren

I've poked Nate about this thread now, however it's not super trivial and I'm not sure Nate has the time to write up a huge explanation at the moment.

Nate

I mentioned in the other thread that TextureAtlas is not used anymore. Create an spAtlasPage and set the rendererObject to a Texture2D.

DevNeo

Try this :

Instead of loading the whole atlas png's can be used directly.

Provided calls for setting a png to an attachment and resetting the attachment to original state.

//Reset a given attachment
void reset(std::string attachmentName);

//Set png for given attachment
void setAttachmentPng(std::string attachmentName,std::string pngName);

Basic explanaition is present in the code itself.

Git repository :

https://github.com/suraj-tmg/spine-runtimes