Spine 3.8, spine-canvas not display right data at HTML

ktmanh

I'm trying to using spine-canvas.js to display my data on HTML and where I can change skin, animation, or can do more like change part of the skin from character A to B by drag-drop or etc.
I downloaded https://github.com/EsotericSoftware/spine-runtimes/tree/3.8 to test is my local.
I ran /spine-ts/canvas/example/index.html it ok. BUT
When I change my data I don't know why this problem appears.
Note: My data when I viewing at Skeleton Viewer everything is ok!
I tried searching on google but sorry I don't know what keyword to explain to it so I post it here.
That my problem.

View on HTML with this green color.

View on Skeleton Viewer

View on HTML with this green color.

View on Skeleton Viewer
Thanks 4 support

Mario

I assume your skeleton contains meshes? The spine-ts Canvas backend does not support meshes. I suggest to us our spine-ts Player or WebGL backend, or pixi-spine instead.

ktmanh

Mario wrote
I assume your skeleton contains meshes? The spine-ts Canvas backend does not support meshes. I suggest to us our spine-ts Player or WebGL backend, or pixi-spine instead.

I did it as well. So now I want to code a feature where i can change a part of skins?
Ex: hand of skin-A to replace hand of skin-B and keep animation. Could you tell me where i can start?

Mario

Sure! That's what we call mix-and-match. You can find an exmaple Spine project here (or load it from the welcome screen in the Spine Editor). Mix and Match example

And here is how you can then construct a new skin from parts of other skins:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/webgl/tests/test-mix-and-match.html#L63

ktmanh

Mario wrote
Sure! That's what we call mix-and-match. You can find an exmaple Spine project here (or load it from the welcome screen in the Spine Editor). Mix and Match example

And here is how you can then construct a new skin from parts of other skins:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/webgl/tests/test-mix-and-match.html#L63

Look not like what I want or I don't really understand what it can do. I want code somethin like that or dropdown list to change part of skin by spine-webgl javascript 😃.

Source: Change only part of a skin from a unity sprite
Thanks 4 support

Mario

The code does exactly what you want. What it doesn't do is setup a UI as in the Unity example to click on. I'm afraid we can not write that part for you.

ktmanh

Mario wrote
The code does exactly what you want. What it doesn't do is setup a UI as in the Unity example to click on. I'm afraid we can not write that part for you.

I don't need look like Unity example. Just display the image!
I wonder if I can show thumbnails when peeling data from the skins {} next to the dropdown i get from skeletonData at file.json or file.skel that stitches the skins together using mixAndMatch() for easier use?
Do have you written a function to do that easier than i code something crop image?
I'm using spine-webgl library

Note: the image will be displayed in the red area

Nate

The code Mario gave should do what you want:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/tests/test-mix-and-match.html#L72-L86

var mixAndMatchSkin = new spine.Skin("custom-girl");
mixAndMatchSkin.addSkin(skeletonData.findSkin("skin-base"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("nose/short"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("eyelids/girly"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("eyes/violet"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("hair/brown"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/bag"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
skeleton.setSkin(mixAndMatchSkin);

That is how you combine various skins into one. You can display all the skins from SkeletonData skins, as I think you found, then combine them with code like the above.

ktmanh

Nate wrote

The code Mario gave should do what you want:
https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/tests/test-mix-and-match.html#L72-L86

var mixAndMatchSkin = new spine.Skin("custom-girl");
mixAndMatchSkin.addSkin(skeletonData.findSkin("skin-base"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("nose/short"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("eyelids/girly"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("eyes/violet"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("hair/brown"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/bag"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
skeleton.setSkin(mixAndMatchSkin);

That is how you combine various skins into one. You can display all the skins from SkeletonData skins, as I think you found, then combine them with code like the above.

Hmm. Look like you don't understand what I need. Sorry about that may be it is my English not good.
I need something like. skeletonData.findSkin("accessories/bag").toImage() ( or anything )
to return image was cut from the file(file.png or etc..) i call it is PATH.
Now i can put PATH into img element to display for user know skin: accessories/bag has image look like:
<img src="PATH" width="30" height="30" />
Can I do that by using library for javascript not Unity pls.
Thank!!!

Nate

Oh, doing that has nothing to do with Spine. You want to look at the browser functionality for saving a WebGL canvas as an image. For example:
https://weworkweplay.com/play/saving-html5-canvas-as-image/

Well, it has a little to do with Spine, since you'll need to render your skeleton as you like before saving it. 🙂

I suggest using the Spine web player to render your skeleton:
Spine Web Player
You can get the skeleton and manipulate it as you need, for that see this section:
Spine Web Player: Advanced playback
Then you'd use code like in the link above to save the canvas as an image.

Mario

I've created what you are trying to achieve, see https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/dress-up.html

The source is well documented, so you shouldn't have any trouble figuring it out. Here's a live demo: https://marioslab.io/dump/dress-up/

ktmanh

Mario wrote
I've created what you are trying to achieve, see https://github.com/EsotericSoftware/spine-runtimes/blob/4.0/spine-ts/spine-webgl/example/dress-up.html

The source is well documented, so you shouldn't have any trouble figuring it out. Here's a live demo: https://marioslab.io/dump/dress-up/

Thank you so much. That all what i want.
You saved my life!