Weirdness possibly related to Draw Order keyframes?

Nimai · 7 июл 2014

I'm not exactly sure what's the root cause here, but playback in-game is different from the animation in the editor.
I've really reduced my example to the point where the animation doesn't make much visual sense, but it's small and demonstrates a difference between runtime and editor animation.

You can check out a screen recording of the playback in the editor here:
Spine Editor Screen Recording
It's basically two images fading in a loop: 1-2-blank-1-2-blank-1-2-blank-1-2-blank-...

Now look at the playback in game (the "blank" part can see through to the game background - that's OK)
Starling Runtime Screen Recording
The cycle is much different, and stutters; hard to describe.

Here's the JSON data. (I can provide source images, too, if that helps)

{
"bones": [
   { "name": "root" },
   { "name": "background", "parent": "root" },
   { "name": "frame010", "parent": "background" },
   { "name": "frame210", "parent": "background" }
],
"slots": [
   { "name": "BonusIntro/frame010", "bone": "frame010", "attachment": "BonusIntro/frame010" },
   { "name": "BonusIntro/frame210", "bone": "frame210", "color": "ffffff00", "attachment": "BonusIntro/frame210" }
],
"skins": {
   "default": {
      "BonusIntro/frame010": {
         "BonusIntro/frame010": { "x": -524, "width": 304, "height": 624 }
      },
      "BonusIntro/frame210": {
         "BonusIntro/frame210": { "x": -520, "y": -8, "width": 296, "height": 608 }
      }
   }
},
"animations": {
   "animation": {
      "slots": {
         "BonusIntro/frame010": {
            "color": [
               { "time": 0.3333, "color": "ffffffff" },
               { "time": 0.6666, "color": "ffffff00", "curve": "stepped" },
               { "time": 1.3333, "color": "ffffff00" },
               { "time": 1.6666, "color": "ffffffff" }
            ]
         },
         "BonusIntro/frame210": {
            "color": [
               { "time": 1, "color": "ffffff00" },
               { "time": 1.3333, "color": "ffffffff", "curve": "stepped" },
               { "time": 1.6666, "color": "ffffffff" }
            ]
         }
      },
      "draworder": [
         { "time": 0 },
         {
            "time": 1.3333,
            "offsets": [
               { "slot": "BonusIntro/frame010", "offset": 1 }
            ]
         }
      ]
   }
}
}

Nimai · 7 июл 2014

Søren · 7 июл 2014

Tricky to say what the problem could be without the project. Can you send it to contact@esotericsoftware.com with the images then I'll take a look at it. I think it might be a key that is missing but can't say for sure.

Nimai · 8 июл 2014

Sent - thanks. If we figure anything out, I'm sure one of us will reply to this thread, too!

Søren · 8 июл 2014

Not entirely sure if this is a bug or not but it does look strange. I've taken a look at your project, can you try adding keys at frame 0 for the slot coloring with their current value in the editor.
Or try

skeleton.setSlotsToSetupPose

every time the animation finishes.

Nimai · 9 июл 2014

It feels like I've seen this in other cases. Basically, looping in the Editor works differently than looping in the runtime. I've had other cases where I've needed to add keyframes at 0 to get things to work correctly at runtime, even through they looked fine in the Spine Editor. Next time I run into this, I'll confirm and share a simple example case. It would be nice if the Editor and the runtime behaved identically.

Thanks for taking the time to look!

Søren · 9 июл 2014

Basically if you want it to behave exactly like in the editor you just need to call

skeleton.setToSetupPose

When changing animations. But in many cases you want smooth mixing between animations so this is why it's not the default behavior.