Jump to content

Switching animations: Frame length of 1st frame is twice as long as expected


Recommended Posts


I'm using Phaser 3 Beta 20 to implement a single sprite playing an IDLE animation.

On click, the sprite should change to a WALKING animation. Both animations are repeating ones and use a framerate of 1, so 1 frame is drawn per second.

Animation creation is done in the scene by this.anims.create(...)

Playing the animations on the sprite is done by sprite.play(...)

In the first animation's onUpdate callback I check for the click event and invoke sprite.play(2nd animation), if such a click occured.

The issue I'm observing is, that the first frame of the WALKING animation is played twice as long as it should be - 2 seconds instead of 1 sec. After that, the frame rate is 1 second per frame as expected on alle frames on every loop cycle in the WALKING animation.

The initial IDLE animation works as expected. However, changing the animation order to first playing WALKING and on click switch to IDLE, die first frame of the IDLE animations lasts for 2 seconds instead of 1; the WALKING animation works just fine.

Additionally I tried skipping the IDLE animation and only showed a single IDLE image and on click play the WALKING animation. In this case The WALKING animation worked fine - no initial 2 second frame this time.

Therefore I suppose, that the effect is caused by switching from one animation to another. 

Is there right way to do that instead of just calling sprite.play(..) again ?

To test things out I also decreased the framerate to 0.5 so each frame lasts 2 seconds. In this case, the initial frame of the second animation lasted 4 seconds. So whatever the framerate was, the frame duration was doubled on the first frame.

(See attached screenshot of the console for an example)

Thanks in advance!


Link to comment
Share on other sites


Finally I was able to fix the doubled frame length of the 2nd animation's first frame.

The behaviour was caused by calling sprite.play() in the onUpdate callback of the first animation.

A quick hack using a boolean flag to indicate the animation change and a flag check in the scene's update method to trigger the sprite.play(2nd animation) fixed the too long first frame.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...