Inspector starts the animation always from cell number 0 when you export the spriteManager as .json

MirrorsEdge · August 18, 2023, 11:41pm

Hello everyone!

I think the title summarizes the problem. So I have a couple sprites whose animation start at different cells. But when I export the spriteManager and load it. I get both animations starting at 0.

Example. Using the Inspector I set:
Start Cell: 8
End Cell: 15
Loop: true
Delay: 100

Then I select the SpriteManager and hit SAVE which gets me spriteManager.json.
Now loading this file. Everything works fine except that I get the animation starting from cell 0 and ending at 15.

roland · August 20, 2023, 10:38pm

Hello!

Can you please provide a Playground where the issue can be reproduced?

MirrorsEdge · August 21, 2023, 2:03pm

This one for example: https://playground.babylonjs.com/#YCY2IL#4
And this is the id of the SpriteManager that I saved on the snippet server: M4XGP4

If you load it and select the red sprite. You’ll see that the animation start from the 1st cell of the spritesheet when I actually export it with the start cell set to 16.

roland · August 21, 2023, 6:15pm

Working on it…

roland · August 21, 2023, 7:08pm

@Deltakosh @sebavan @RaananW @Evgeni_Popov

Guys, whose baby is the SpriteManager and Sprites?

github.com

BabylonJS/Babylon.js/blob/1caea2ed86fe4460d00aa8af1f6a057075e72eee/packages/dev/core/src/Sprites/sprite.ts#L216


      
              sprite.angle = parsedSprite.angle;

              sprite.cellIndex = parsedSprite.cellIndex;

              sprite.cellRef = parsedSprite.cellRef;

              sprite.invertU = parsedSprite.invertU;

              sprite.invertV = parsedSprite.invertV;

              sprite.disposeWhenFinishedAnimating = parsedSprite.disposeWhenFinishedAnimating;

              sprite.isPickable = parsedSprite.isPickable;

              sprite.isVisible = parsedSprite.isVisible;

              sprite.useAlphaForPicking = parsedSprite.useAlphaForPicking;

          

              sprite.fromIndex = parsedSprite.fromIndex;

              sprite.toIndex = parsedSprite.toIndex;

              sprite.loopAnimation = parsedSprite.loopAnimation;

              sprite.delay = parsedSprite.delay;

          

              if (parsedSprite.animationStarted) {

                  sprite.playAnimation(sprite.fromIndex, sprite.toIndex, sprite.loopAnimation, sprite.delay);

              }

          

              return sprite;

          }

The problem here is that setting fromIndex at line 216 triggers the playAnimation function in thinSprite at line 92 with values from = 16 and to = 0 (toIndex (to) is not set yet, it’ll be on line 217)

github.com

BabylonJS/Babylon.js/blob/1caea2ed86fe4460d00aa8af1f6a057075e72eee/packages/dev/core/src/Sprites/thinSprite.ts#L100


      
           * @param onAnimationEnd defines a callback for when the animation ends

           */

          public playAnimation(from: number, to: number, loop: boolean, delay: number, onAnimationEnd: Nullable<() => void>): void {

              this._fromIndex = from;

              this._toIndex = to;

              this._loopAnimation = loop;

              this._delay = delay || 1;

              this._animationStarted = true;

              this._onBaseAnimationEnd = onAnimationEnd;

          

              if (from < to) {

                  this._direction = 1;

              } else {

                  this._direction = -1;

                  this._toIndex = from;

                  this._fromIndex = to;

              }

          

              this.cellIndex = from;

              this._time = 0;

          }

In the playAnimation function from > to at line 100 so it executes the else branch and sets _fromIndex to to which has currently value of 0. This is why the animation starts from 0.

Proposed change is to change the Sprite.Parse function like you can see below so it sets the fromIndex and toIndex in different order according to their values. It’s tested and it works but I am not sure whether this is not going to break something else. Can someone please have a look at it and confirm the changes?

Thank you!

    public static Parse(parsedSprite: any, manager: SpriteManager): Sprite {
        const sprite = new Sprite(parsedSprite.name, manager);

        sprite.position = Vector3.FromArray(parsedSprite.position);
        sprite.color = Color4.FromArray(parsedSprite.color);
        sprite.width = parsedSprite.width;
        sprite.height = parsedSprite.height;
        sprite.angle = parsedSprite.angle;
        sprite.cellIndex = parsedSprite.cellIndex;
        sprite.cellRef = parsedSprite.cellRef;
        sprite.invertU = parsedSprite.invertU;
        sprite.invertV = parsedSprite.invertV;
        sprite.disposeWhenFinishedAnimating = parsedSprite.disposeWhenFinishedAnimating;
        sprite.isPickable = parsedSprite.isPickable;
        sprite.isVisible = parsedSprite.isVisible;
        sprite.useAlphaForPicking = parsedSprite.useAlphaForPicking;

        // add
        if (parsedSprite.fromIndex < parsedSprite.toIndex) {
            sprite.toIndex = parsedSprite.toIndex;
            sprite.fromIndex = parsedSprite.fromIndex;
        } else {
            sprite.fromIndex = parsedSprite.fromIndex;
            sprite.toIndex = parsedSprite.toIndex;
        }
        //

        // remove
        sprite.fromIndex = parsedSprite.fromIndex;
        sprite.toIndex = parsedSprite.toIndex;
        //

        sprite.loopAnimation = parsedSprite.loopAnimation;
        sprite.delay = parsedSprite.delay;

        if (parsedSprite.animationStarted) {
            sprite.playAnimation(sprite.fromIndex, sprite.toIndex, sprite.loopAnimation, sprite.delay);
        }

        return sprite;
    }

Deltakosh · August 21, 2023, 10:24pm

Do you want to do a PR? I’ll review it

roland · August 22, 2023, 12:16am

I don’t want but I can
It’s 2AM here, I’m going to sleep so after I get up I’ll do it. I’ll tag you in the PR.
Thanks!

roland · August 22, 2023, 6:23am

@MirrorsEdge Thanks for reporting the bug! Once this PR gets merged it’ll fix the issue. Have a nice day!