How to destroy the animation when it plays?

Phaser 3
1

I make an asteroid explosion while pressing the mouse button. When clicked, an animation is added and an explosion plays. The animation runs an infinite number of times.
Meteor
For some reason the “plane.once” function with “Phaser.Animations.Events.SPRITE_ANIMATION_COMPLETE” does not work. How do I delete an explosion after it’s finished playing?
Here is a code example:
example.zip (1.3 MB)

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Destroy Asteroid</title>

</head>

<body>
<script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
<script>
var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#2d2d2d',
  parent: 'phaser-example',
  scene: {
    preload: preload,
    create: create 
  } };
var game = new Phaser.Game(config);
var tween = null;
var tweenAlive = false;

function preload()
{
   this.load.baseURL = './assets/';
   this.load.image('meteorit', 'sprites/meteorit.png');
   this.load.atlas("explosion", "spritesheet.png", "sprites.json");
}

function create()
{
      var sprite = this.add.sprite(300, 300, 'meteorit');
   // box.play('breakBox', false)
    // box.once('animationcomplete', () => {
   // console.log('animationcomplete')
   // box.destroy()
  //})
    sprite.setInteractive();
    sprite.on('pointerdown', ()=>{
           //b.kill();
            sprite.destroy()
            this.anims.create({
                  key: "fly",
                  frameRate: 20,
                  frames: this.anims.generateFrameNames("explosion", {
                      prefix: "frame_",
                      suffix: ".png",
                      start: 1,
                      end: 15,
                      zeroPad: 1
                  }),
                  repeat: -1
              });

              
                plane = this.add.sprite(300, 300, "explosion");
                plane.play("fly");
                plane.once(Phaser.Animations.Events.SPRITE_ANIMATION_COMPLETE, () => {
                    plane.destroy()
                    
                });
                
                plane.scaleX = 0.5;
                plane.scaleY = 0.5;    
    })
 
     
}
</script>
</body>
</html>
2

You don’t need to create an animation every time you play it. Create it once after the images load.

A repeating animation never completes. Remove repeat: -1 and that will let the animation complete.

3

You can also set the parameter “hideOnComplete” to true.

There are plenty examples on the website :

2 Likes