xxxxxxxxxx
 
1
<script src="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/iife/spine-player.js"></script>
2
<link rel="stylesheet" href="https://unpkg.com/@esotericsoftware/spine-player@4.2.*/dist/spine-player.css">
3
<style> body { margin: 0px; }</style>
4
<div id="container"></div>
5
​
6
<script>
7
new spine.SpinePlayer("container", {
8
   skeleton: "https://esotericsoftware.com/files/examples/latest/mix-and-match/export/mix-and-match-pro.json",
9
   atlas: "https://esotericsoftware.com/files/examples/latest/mix-and-match/export/mix-and-match-pma.atlas",
10
   animation: "dance",
11
   skin: "full-skins/girl",
12
   premultipliedAlpha: true,
13
   showControls: false,
14
   success: function (player) {
15
      var skeleton = player.skeleton;
16
      var skeletonData = skeleton.data;
17
      var mixAndMatchSkin = new spine.Skin("custom-girl");
18
      mixAndMatchSkin.addSkin(skeletonData.findSkin("skin-base"));
19
      mixAndMatchSkin.addSkin(skeletonData.findSkin("nose/short"));
20
      mixAndMatchSkin.addSkin(skeletonData.findSkin("eyelids/girly"));
21
      mixAndMatchSkin.addSkin(skeletonData.findSkin("eyes/violet"));
22
      mixAndMatchSkin.addSkin(skeletonData.findSkin("hair/brown"));
23
      mixAndMatchSkin.addSkin(skeletonData.findSkin("clothes/hoodie-orange"));
24
      mixAndMatchSkin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
25
      mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/bag"));
26
      mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
27
      skeleton.setSkin(mixAndMatchSkin);
28
      skeleton.setSlotsToSetupPose();
29
   }
30
});
31
</script>