User Generated Skin

metheoo

Hi
I would like to see if it is possible to setup a spine clothing system that allows user to upload their custom skin textures.
For example, when a user uploads a new skin texture, the system will load the skin and allow other players to use that new skin.
More technically, I am not show how to achieve:

Link the user generated skin to current bones
Load user generated skin textures together with texture atlas

Thanks so much

metheoo

Mario

This depends on the runtime youare using. Which one is it?

metheoo

Mario wrote

I am using web spine-ts runtime 4.x

Mario

Custom skins can come in two flavors:

You provide all the "skin" components, e.g. a range of base skin tones, clothing, eyes, mouths, eyebrows, hair, etc. in a single texture atlas. Your UI then lets the user pick and choose (or mix and match) whatever skin components they want their avatar to use. The user doesn't upload any actual image data themselves. This is pretty simple using Spine's skin feature and examplified in the mix-and-match example https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/example/mix-and-match.html
Your user actually provides image data for each skin component. This is rather complicated, especially with meshes, as the mesh texture coordinates you setup in the skeleton must magically fit the user's image data. It can be done if you provide the user with a "template" image, e.g. a full texture atlas they can paint in. They can then upload their painted in version and you can load it just like any other atlas. Anything more complex than that is unlikely to be a great user experience and will come with a lot of support burden.

metheoo

Mario wrote
Custom skins can come in two flavors:

You provide all the "skin" components, e.g. a range of base skin tones, clothing, eyes, mouths, eyebrows, hair, etc. in a single texture atlas. Your UI then lets the user pick and choose (or mix and match) whatever skin components they want their avatar to use. The user doesn't upload any actual image data themselves. This is pretty simple using Spine's skin feature and examplified in the mix-and-match example https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-webgl/example/mix-and-match.html

Your user actually provides image data for each skin component. This is rather complicated, especially with meshes, as the mesh texture coordinates you setup in the skeleton must magically fit the user's image data. It can be done if you provide the user with a "template" image, e.g. a full texture atlas they can paint in. They can then upload their painted in version and you can load it just like any other atlas. Anything more complex than that is unlikely to be a great user experience and will come with a lot of support burden.

I see, I will check, thanks for the info!

cocosBavan

How do we achieve the second option? For example, we extract the head of Goblin from atlas, then the user adds some make up to it and then we want to display the new image in the animation. How can we achieve it?
Run-time: cocos2D-x

SilverStraw

cocosBavan I believe you have to use the AtlasAttachmentLoader.
http://esotericsoftware.com/spine-loading-skeleton-data#AttachmentLoader
http://en.esotericsoftware.com/spine-api-reference#AtlasAttachmentLoader
https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-cpp/spine-cpp/src/spine/AtlasAttachmentLoader.cpp

cocosBavan

@SilverStraw Thank you. But, it doesn't look like AtlasAttachmentLoader or CustomAttachmentLoader can be any use here.
The newRegionAttachment(spine::Skin& skin, const spine::String& name, const spine::String& path, spine::Sequence* sequence) method or any other overriden method here doesn't provide any option for replacing the texture. 🙁

The only option I could thing is replacing Texture in our desired region in a custom TextureLoader. Could that be an option?

SilverStraw

cocosBavan I believe you have to create a TextureAtlas object which has a setTexture method.
https://github.com/EsotericSoftware/spine-runtimes/blob/64853b73bcbce53a1851b2b3b05ba8f5ab37e6d8/spine-ts/spine-core/src/TextureAtlas.ts#L182
The object is then passed as an argument into constructing a AtlasAttachmentLoader object.
https://github.com/EsotericSoftware/spine-runtimes/blob/64853b73bcbce53a1851b2b3b05ba8f5ab37e6d8/spine-ts/spine-core/src/AtlasAttachmentLoader.ts#L48
Then use one of the attachment methods to assign it to the Spine skeleton/skeleton_data slot attachment.

SilverStraw

@cocosBavan Sorry, I am looking at the wrong runtime, but it should be similar process. Create a Cocos2dAtlasAttachmentLoader object passing an Atlas pointer argument.
https://github.com/EsotericSoftware/spine-runtimes/blob/64853b73bcbce53a1851b2b3b05ba8f5ab37e6d8/spine-cocos2dx/spine-cocos2dx/src/spine/spine-cocos2dx.cpp#L36
The Atlas class accepts TextureLoader and createTexture arguments.
https://github.com/EsotericSoftware/spine-runtimes/blob/64853b73bcbce53a1851b2b3b05ba8f5ab37e6d8/spine-cpp/spine-cpp/src/spine/Atlas.cpp#L38

cocosBavan

Thanks @SilverStraw . Managed to do that.