1

So I have 2, or more skeletons for an animation (so, 2 or more json files). I want them to play at the same time and 10 seconds after, to play another animation.

Problem is that there is only one animation playing, and the second isn't displayed.

The way I'm doing it is the following:

<canvas id="animationCanvas" width="240" height="240"></canvas>
<script>
    var first = true,
        rendererFirst = new spine.SkeletonRenderer('http://someurl.com/images/'),
        spineAFirst = /* My JSON Code */,
        parsedFirst = JSON.parse(spineAFirst);

    rendererFirst.scale = 0.2;
    rendererFirst.load(spineAFirst);
    rendererFirst.state.data.defaultMix = 1.0;

    for (var i in parsedFirst.animations) {
        if (first) {
            first = false;
            rendererFirst.state.setAnimationByName(0, i, true);
        } else {
            rendererFirst.state.addAnimationByName(0, i, true, 10);
        }
    }

    rendererFirst.skeleton.x = 120;
    rendererFirst.skeleton.y = 120;
    rendererFirst.animate('animationCanvas');
</script>

And, of course, I'm doing it twice (or more). I tried as well with a single SkeletonRenderer, just loading (and setting or adding) animations as many times as I need, and it didn't worked.

Snickbrack
  • 1,253
  • 4
  • 21
  • 56
Edwin Dayot
  • 248
  • 1
  • 14

1 Answers1

0

It seems that the renderer is cleaning the canvas each time it is called, the better way to achieve this seems to create a canvas for each animation, and bind a renderer to each one.

Edwin Dayot
  • 248
  • 1
  • 14