Reuse animations

[kurhlaa]

Hi,

From this example - https://github.com/robhimslf/game-dev-invaders - I try to use bullets explosion animation. If I understand it right - author has created a group of 30 animations and is using them one by one. Here are the main parts:

...
// This is a collection of explosions.
var explosions;
...
// Preload the explosion image.
this.load.spritesheet( 'kaboom', 'explode.png', {
    frameWidth: 128,
    frameHeight: 128
});
...
// Setup our explosion animation.
this.anims.create({
    key: 'explode',
    frames: this.anims.generateFrameNumbers( 'kaboom', {
        start: 0,
        end: 15
    }),
    frameRate: 16,
    repeat: 0,
    hideOnComplete: true
});
...
// Create some explosions!
explosions = this.add.group({
    defaultKey: 'kaboom',
    maxSize: 30
});
...

and here is what's happening at the bullet's collision time:

...
// Get the first explosion, and activate it.
var explosion = explosions.get().setActive( true );

// Place the explosion on the screen, and play the animation.
explosion.setOrigin( 0.5, 0.5 );
explosion.x = target.x;
explosion.y = target.y;
explosion.play( 'explode' );
...

However, if you launch animations more than 30 times (try to shoot all the targets) - there is a JS error:

Uncaught TypeError: Cannot read property 'setActive' of null
    at handleCollision (invaders.js:391)
    at Function.handlePlayerCollision (invaders.js:408)
    at initialize.collideSpriteVsSprite (phaser.min.js:1)
    at initialize.collideHandler (phaser.min.js:1)
    at initialize.collideObjects (phaser.min.js:1)
    at initialize.update (phaser.min.js:1)
    at initialize.step (phaser.min.js:1)
    at initialize.update (phaser.min.js:1)
    at initialize.h.emit (phaser.min.js:1)
    at initialize.step (phaser.min.js:1)

Line 391 is:

var explosion = explosions.get().setActive( true );

 

If I understand it right - animations are not being reused. So after calling get() 30 times - no free animations left. How this can be fixed?

[Sawamara]

You are not reusing the "animations" in a group, but the sprites themselves. So of course there will be no more items to get() after your 30th usage. 

[samme]

You need to deactivate the sprites as well, probably once the animation has completed.

[kurhlaa]

@Sawamara, @samme, thanks for info. Now I add this to every sprite/animation, to be executed on animation complete:

explosion.on('animationcomplete', function() {
    explosion.setActive(false);
}, this);

it seems to work. Is this a correct way or there is a better one?

[aylictal]

is the explosion necessary to exist post explosion?

if so consider using instead:

 

explosion.on('animationcomplete', ()=> explosion.destroy());

 

[kurhlaa]

@aylictal, with destroy() I get the same error at some moment. Maybe you wanted to say to destroy if I do NOT need it after the explosion? Because in my case I reuse existing sprites animations. It was written somewhere that it's expensive to create new objects all the time, so it's preferable to reuse them.

[aylictal]

Depends by what you mean expensive.

Destroy allows garbage collection to occur for it, so that it requires less in memory.  Memory has always been my main constraint with my personal projects because my scenes are always so big, but to each their own.