Animation makes sprite disappear

Phaser 3
1

Hello guys.

I am loading a muzzle blast animation for a cannon in my game. I create the animation in my scene like so:

scene.anims.create({
key: “name”,
frames: [the 23 frame images],
frameRate: 23,
repeat: 0,
})

Then when the “shoot” key is pressed, the animation is played like so:

this.warShip.cannonFront.anims.play(“name”);

The thing is, when the animation plays, the cannon image disappears and never comes back.

2

This look right to me.
Are the frames an array of { key: string; frame: string | number }?

Maybe you want to use one of the two functions below to generate your frames:

3

Actually my frames [] field is an array of { key: string } but no frame number or anything

4

So the animation plays correctly, and when it ends the cannon is not displayed ?

5

Exactly! More so, the cannon disappears on the first frame of the animation, and like you said, it never comes back again on display.

The way I imagined it, the cannon should never disappear. This is the animation that displays the muzzle blast of the shot.

6

Hi @Tico1711,
The animation manager assigns to the sprite the texture/frames of the chosen animation, replacing the original texture / frame. When the animation ends, the sprite remains with the last frame reproduced.
I believe that the behavior you describe is as expected.

If the animation is reproduced correctly and you say that the cannon disappears from the beginning, then I imagine that you haven’t included the cannon in the animation frames.
In order for the cannon doesn’t disappear during the animation, you must include it in all frames of the animation. The last frame of the animation should be the same as the one used by the cannon when it does not fire.

If the frames of the animation are in a different texture from the original frame, then when completing the animation you have to assign the initial texture:

// In create() function
this.warShip.cannonFront.on('animationcomplete', function(){
    this.warShip.cannonFront.setTexture('originalTextureKey', frame);
}, this);

Regards.

2 Likes