Animations stuck on first frame; tweens not working

Phaser 3
1

I’m not sure what the issue is, but all of my Sprite animations will not go passed the first frame and my tweens do not work. I am using Phaser 3.87.0.

For example, I have a Hero sprite, that has a 2 frame animation when moving left and right: khipugame/src/sprites/hero.js at 340e521eb8aeb9f7d5653a94b806255382ba69bf · mdbudnick/khipugame · GitHub but it will not cycle through the 2 frames. If I add randomFrame: true, it will choose one of the frames, but they do not cycle.

The Hero’s animation is based on the velocity of the sprite, defined in this function: khipugame/src/sprites/hero.js at 340e521eb8aeb9f7d5653a94b806255382ba69bf · mdbudnick/khipugame · GitHub
Which is continuously called in the update right above: khipugame/src/sprites/hero.js at 340e521eb8aeb9f7d5653a94b806255382ba69bf · mdbudnick/khipugame · GitHub

The game can be playtested here: K'uychi Khipu Game and you will see that when you hit right and left, you will get one of the 2 frames for ‘run’, but it will never cycle through both.

I am having this issue with all my animations, Spider walking: khipugame/src/sprites/spider.js at 340e521eb8aeb9f7d5653a94b806255382ba69bf · mdbudnick/khipugame · GitHub
Coin rotation: khipugame/src/sprites/coin.js at 340e521eb8aeb9f7d5653a94b806255382ba69bf · mdbudnick/khipugame · GitHub

Even the tweens I’ve defined don’t work: khipugame/src/scenes/play.js at 340e521eb8aeb9f7d5653a94b806255382ba69bf · mdbudnick/khipugame · GitHub

There’s something fundamentally broken with the animations in my game, and I can’t figure it out.

2

:wave:

When you override preUpdate(), you need to pass time, deltaTime to the super method.

Groups don’t have position (or visibility) so there is no x or y to tween. But you can tween the position of their members:

this.tweens.add({
  targets: this.keyz.getChildren(),
  y: '+=6',
  // ...
});

Also, you can pass ease functions (e.g., Phaser.Math.Easing.Sine.InOut) instead of strings if you want.

3

Yes, that did it so we have the:

preUpdate(time, delta) {
        super.preUpdate(time, delta);
        this.update();
    }

and:

this.tweens.add({
            targets: this.keyz.getChildren(),
            y: '+=6',
            duration: 800,
            ease: Phaser.Math.Easing.Sine.InOut,
            yoyo: true,
            repeat: -1 // use -1 for infinite loop
        });

I translated this project from Phaser 2 and things changed.

Thanks @samme!