Playing multiple tracks on webpage

Mmmohis · 1 июн 2019

Hi
I'm no programmer so I have difficulty when it comes to creating custom java script code. My problem is that I want to play multiple tracks for a skeleton on my webpage through the spine player. I have a cloud animation which has to play all the time. Additionally I have 3 idle animations which should play right after each other with 10 seconds apart and then loop again. I don't know how to achieve this or if it is possible at all with the spine player. My code so far:

<script src="https://esotericsoftware.com/files/spine-player/3.7/spine-player.js"></script>
<link rel="stylesheet" href="https://esotericsoftware.com/files/spine-player/3.7/spine-player.css">

<div id="player-container" style="width: 100%; height: 100%;">

<script>
  new spine.SpinePlayer("player-container", {
   jsonUrl: "http://purplemind.me/spine_files/fisherman.json",
   atlasUrl: "http://purplemind.me/spine_files/fisherman.atlas",
    showControls: false,
    alpha: true,
    backgroundColor: "#00000000",
  viewport: {
    debugRender: false,
    x: 0,
    y: 0,
    width: 1210,
    height: 1210,
    padLeft: "0%",
    padRight: "0%",
    padTop: "0%",
    padBottom: "0%"
 }
});
</script>

Thanks in advance

Mmmohis · 1 июн 2019

Mario · 3 июн 2019

You can set multiple animations on different tracks with a little bit of JavaScript. Something like this will do:

<script>
  new spine.SpinePlayer("player-container", {
   jsonUrl: "http://purplemind.me/spine_files/fisherman.json",
   atlasUrl: "http://purplemind.me/spine_files/fisherman.atlas",
    showControls: false,
    alpha: true,
    backgroundColor: "#00000000",
  viewport: {
    debugRender: false,
    x: 0,
    y: 0,
    width: 1210,
    height: 1210,
    padLeft: "0%",
    padRight: "0%",
    padTop: "0%",
    padBottom: "0%"
 }, success: function (player) {
      player.animationState.setAnimation(0, "run", true);
      player.animationState.setAnimation(1, "shoot", true);
 }
});
</script>

This sets a piece of JavaScript code that is called when the player has successfully loaded all assets. You can then tell the player to queue up animations on different tracks. The first number in the setAnimation line is the track index. Next you specify the animation name. Finally, you can say true if you want the animation to loop, and false for it to only play once.

Mmmohis · 3 июн 2019

It works perfectly - thank you so much :-D