Destroying all sprites in array after tween complete

Phaser 3
1

I have trouble in destroying the sprites in array after tweening ,the code is given below -

function create(){
for(var i=0;i<=4;i++){
balls[i]=this.add.sprite(200+80*i,300,‘ball’);
}

    var button=this.add.sprite(400,500,'btn').setInteractive();

    button.on('pointerdown',function(pointer,gameobject){
        for(var i=0;i<=4;i++){
            bnum=i;
            this.tweens.add({
                targets: balls[bnum],
                ease: 'Sine.easeInOut',
                alpha:0.5,
                duration: 500,
                onComplete:function(){
                    balls[bnum].destroy();
                },
            });
        }
    },this);

}

only the last sprite in array is destroying and not all the sprites.
I am not much experienced with the Javascript OOP. :sweat:

Thanks in advanced…

2

I think each time balls[bnum].destroy(); is called, bnum has a value of 4. You need another way to target the sprite to destroy.
I’ll check some examples tonight. I remember I did something similar but I can’t access my code now.

3

you are right,don’t know how to fix this.

4

you can loop through targets in onComplete function:

onComplete:function(){
    for(var obj of this.targets){
          obj.destroy();
   }
}

there may be some shorter ways to do this I guess, but this one would do the trick.

Edit:
Ooopss. It seems I misread your code :smiley: The code I typed above does the trick but it is more useful if you have more than 1 object in the tween. Here is how you can do it in your case:

onComplete:function(){
   this.targets[0].destroy();
}
2 Likes
5

I think you can just do:

onComplete:function(){
   this.targets[i].destroy();
}
6

Also in your code all the objects have the same tween, so you don’t need new tween for each one of them, one tween would be enough in your case.

button.on('pointerdown',function(pointer,gameobject){
        
         this.tweens.add({
             targets: balls,
             ease: 'Sine.easeInOut',
             alpha:0.5,
             duration: 500,
             onComplete:function(){
                 for(var obj of this.targets){
                    obj.destroy();
                 }
             },
         });
            
},this);
1 Like
7

@mapacarta

Thanks ,for the help your code is working fine .

1 Like
8

@artvinn

Your code is giving me an error ,I have checked the console -
" Uncaught TypeError: Cannot read property ‘destroy’ of undefined "

9

sorry to intrude but would this help?

if(this.targets[i]) this.targets[i].destroy();

“if(this.targets[i])” to check up if that exists.

10

it generates the same result with targets[bnum] and destroys only the last element in the array.

11

@ BeFiveINFO

onComplete:function(){

                    if(this.targets[i]){
                        this.targets[i].destroy();
                    }

Thanks ,tried your code but Nothing happens.

12

Hi team any solution for this yet?

I am tweening each element inside a container one after the other. But I need to destroy each on completion.

Please help.

13 
for(var i=0;i<=4;i++){
            bnum=i;
            this.tweens.add({
                targets: balls[bnum],
                ease: 'Sine.easeInOut',
                alpha:0.5,
                duration: 500,
                onComplete:function(){
                    balls[bnum].destroy();
                },
            });
        }

Should work by changing ‘var’ to ‘let’

14

Thank you thenonamezz,

I tried a different approach and that worked.
I had to destroy the zeroeth element every time.

Thank you

15

bit late but you could also do

    for(let i=0;i<=4;i++){
            bnum=i;
            this.tweens.add({
                targets: balls[bnum],
                ease: 'Sine.easeInOut',
                alpha:0.5,
                duration: 500,
                onComplete:function(tween){
                    tween.targets[0].destroy();
                },
            });
        }

to destroy the target the tween has (assuming it only has 1 target)