How to put skin on a skeleton using Spine JS Runtime?

celineharding

Hello,
I have a skeleton (.json, .atlas. .png), e.g. a body, and a file containing a skin (.json, .atlas, .png), e.g. a t-shirt). At runtime, both files are loaded. When I merge both files, only the skin appears, but the body is gone. I would like to have the body wearing the t-shirt.
May someone can help me realizing this using Spine JS Runtime? Thank you.

Nate

How do you merge the files?

Please show how you are loading the skeleton and atlases.

It would be easiest to draw two skeletons. Alternatively, you could use a single skeleton that contains both the body and shirt (and all other items). It is unusual to use a separate skeleton for a shirt or similar item.

celineharding

This is the code to load the skeleton:
skel0 = new spine.SpinePlayer("div_el", { jsonUrl: "assets/" + param2, atlasUrl: "assets/" + param3, backgroundColor: "#00000000", alpha: true, showControls: false });
This is how .json looks like. It contains the skeleton (body) and the data for skins (t-shirt). I removed parts for readability.
`{
"skeleton":{

},
"bones":[
{
"name":"root"
},
{
"name":"Center",
"parent":"root",
"y":238.74000000000001,
"transform":"noScale",
"color":"4a14ecff"
},
{
"name":"Hips",
"parent":"Center",
"length":34,
"rotation":82.010000000000005,
"transform":"noScale",
"color":"4a14ecff"
}
],
"slots":[
{
"name":"lul2_LeftUpperLeg_col1",
"bone":"LeftUpperLeg",
"attachment":"lul2_LeftUpperLeg_col1",
"position":"LEFT_UPPER_LEG"
}
],
"skins":{
"default":{
"lul2_LeftUpperLeg_col1":{
"lul2_LeftUpperLeg_col1":{
"height":375,
"x":7.559999942779541,
"scaleY":0.20000000298023224,
"rotation":90.279998779296875,
"y":4.8499999046325684,
"name":"Symbol 41",
"color":"e3c5a6ff",
"width":320,
"scaleX":0.20000000298023224
}
},
"spkl_Torso_nocol":{
"spkl_Torso_nocol":{
"height":535,
"x":42.400001525878906,
"scaleY":0.20000000298023224,
"rotation":-94.169998168945312,
"y":-3.6500000953674316,
"name":"Symbol 21",
"width":425,
"scaleX":0.20000000298023224
}
}
}
},
"animations":{
"default":[

}
}`
Somehow, only the t-shirt is displayed without the body. "slots" and "skins" are taken from an external tshirt_file.json and are merged into the body_file.json

Nate

Merging skeleton JSON can work, but doesn't seem like a good idea. You can just put everything in one skeleton.

If the problem is that you need to show multiple skins at the same time, you'll have to write code to do that. Something like this:

new spine.SpinePlayer("player", {
	...
	success: function (player) {
		var skin = new spine.Skin("skin");
		skin.addSkin(player.skeleton.findSkin("body"));
		skin.addSkin(player.skeleton.findSkin("shirt"));
		player.skeleton.setSkin(skin);
		player.skeleton.setSlotsToSetupPose();
	}
});

See: https://esotericsoftware.com/spine-runtime-skins