Bones positions broken after animation

fechy

Hello,
I have 2 interesting issues with the bones animation.

First issue: Draw order.
For one of the animations I have set up that one slot should be drawn behind other. However, this is not working until you switch to another animation and then back. Check the screenshot:
Here you can see the legs are behind the body:
https://www.dropbox.com/s/3nwckqhpmfe8dyx/Screenshot%202014-08-31%2022.31.10.png?dl=0

Now this animation should put the body behind the legs but it doesn't:
https://www.dropbox.com/s/o8q0jei18uahkw7/Screenshot%202014-08-31%2022.32.11.png?dl=0

Now after a couple of changes to other animations and then back to the previous the draw order is correct:
https://www.dropbox.com/s/im0me52vk505fnu/Screenshot%202014-08-31%2022.33.15.png?dl=0

This is how the json looks like:

"idle01": {
      "slots": {
         "01head01": {
            "attachment": [
               { "time": 0, "name": "head" },
               { "time": 0.6666, "name": "head" },
               { "time": 1.3333, "name": "head" }
            ]
         },
         "barSegment01": {
            "attachment": [
               { "time": 0, "name": "bar01" }
            ]
         },
         "01handL01_01": {
            "attachment": [
               { "time": 0, "name": null }
            ]
         },
         "pesaHolderL02": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "pesaHolderR01": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "pesaHolderL01": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "pesaHolderR04": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "01handR01_01": {
            "attachment": [
               { "time": 0, "name": null }
            ]
         },
         "pesaHolderR03": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "01armL02_01": {
            "attachment": [
               { "time": 0, "name": null }
            ]
         },
         "pesaHolderL03": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "templates": {
            "attachment": [
               { "time": 0, "name": null }
            ]
         },
         "barSegment02": {
            "attachment": [
               { "time": 0, "name": "barSegment02" }
            ]
         },
         "01armL01_01": {
            "attachment": [
               { "time": 0, "name": null }
            ]
         },
         "01armR02_01": {
            "attachment": [
               { "time": 0, "name": null }
            ]
         },
         "pesaHolderL04": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "pesaHolderR02": {
            "attachment": [
               { "time": 0, "name": "pesa04" }
            ]
         },
         "01body01": {
            "attachment": [
               { "time": 0, "name": "01body02" }
            ]
         },
         "01armR01_01": {
            "attachment": [
               { "time": 0, "name": null }
            ]
         },
         "barSegment03": {
            "attachment": [
               { "time": 0, "name": "bar01" }
            ]
         },
         "01legs01": {
            "attachment": [
               { "time": 0, "name": "01legs01" }
            ]
         }
      },
      "bones": {
         "bone2": {
            "scale": [
               { "time": 0, "x": 1, "y": 1 },
               { "time": 0.6666, "x": 1.025, "y": 0.963 },
               { "time": 1.3333, "x": 1, "y": 1 }
            ]
         },
         "bone10": {
            "translate": [
               { "time": 0, "x": 0, "y": 0 },
               { "time": 0.6666, "x": 0, "y": -6.42 },
               { "time": 1.3333, "x": 0, "y": 0 }
            ]
         }
      },
      "draworder": [
         {
            "time": 0,
            "offsets": [
               { "slot": "01body01", "offset": 1 }
            ]
         }
      ]
   },

Second issue:

I have 3 different animations for my game:

Idle
Arms up
Arms down

When setting the 2nd animation, and then setting back to 1st or 3rd, the bones are slightly moved to the wrong position and are never back to its original position. Let me put some image to this:

Right position of bones:
https://www.dropbox.com/s/o8q0jei18uahkw7/Screenshot%202014-08-31%2022.32.11.png?dl=0

After changing the animation and back to the previous:
https://www.dropbox.com/s/im0me52vk505fnu/Screenshot%202014-08-31%2022.33.15.png?dl=0

I'm using Libgdx like:

public Player(FileHandle skeletonFile, TextureAtlas atlas) {

    renderer = new SkeletonRenderer();

    SkeletonJson json = new SkeletonJson(atlas);
    SkeletonData skeletonData = json.readSkeletonData(skeletonFile);

    skins = skeletonData.getSkins();

    skeleton = new Skeleton(skeletonData);
    skeleton.setSkin(skins.get(currentSkinIndex));
    skeleton.setToSetupPose();
    skeleton.updateWorldTransform();

    state = new AnimationState(new AnimationStateData(skeletonData));
    state.setAnimation(0, "idle01", true);
    state.addListener(this);
}

@Override
   public void act(float delta) {
       super.act(delta);

   if (!isIdle && !isWaiting) {
       timeUp += delta;
       if (timeUp >= 1f) {
           this.waiting();
       }
   }

   skeleton.setPosition(getX(), getY());

   state.update(delta);

   state.apply(skeleton);
   skeleton.updateWorldTransform();
   skeleton.update(delta);
   }

@Override
public void draw(Batch batch, float parentAlpha) {
     super.draw(batch, parentAlpha);

 batch.begin();
 renderer.draw(batch, skeleton); // Draw the skeleton images.
 batch.end();
}

I have checked in the editor and everything plays as is supposed to. Maybe a bug in the runtime?
Thanks in advance!

fechy

Pharan

This is normal. For flexibility reasons (like programmatic control of bones and mixing many different animations), they just decided the Spine runtimes shouldn't assume that you want the bones, slots or draworder to reset after playing an animation or before playing another animation. So by default, what you see in the editor isn't what you see in at runtime. You have to tell it explicitly that you want that.

Read this part of the docs (Animation Changes): http://esotericsoftware.com/spine-using ... on-changes

fechy

Fair enough, at least with the Draworder.
However, the bones does not follow the position they are set in the animation. That has nothing to do with the reseting. If I say that the bone needs to be at certain X and Y position, it should not matter where it is after other animation. Sounds a sensible thing to assume.

To fix the position of the bones after other animation, I had to play with the position in the editor to be right in the game, NOT that looks right in the editor, which means the animation in the editor is way different that what the end result looks like. This is, in my opinion, unacceptable.

I hope this gets sorted out, Spine is by far the best animation tool out there IMHO.

Pharan

Bone positions and rotations are only defined relative to their parents' position and rotation. If the parent didn't reset, it would look off.

Do you need help getting it to reset (with skeleton.setToSetupPose?) or did you figure out how to do that?

fechy

Hi Pharan,

Thanks a lot for your help. With your help I have now everything working as expected. This is what I did:

For my first problem I now set the DrawOrder on each animation to correct it.
Calling skeleton.setToSetupPose on each animation change corrected the bones and now the animations are correct.

Thank you very much for your help! :clap:

Cheers

Nate

Note setToSetupPose also resets the draw order to the setup pose.