Yoklan
Yoklan

Reputation: 211

Only the first frame of the animation spritesheet plays

Trying to add an explode animation to my game, however only the 1st frame of the sprite plays for some reason. Spritesheet is loaded in the preloader.

This is the function that's calling the animation

function asteroidCollisionHandler(player, asteroid){

live = lives.getFirstAlive();

if (live)
{
    live.kill();
}

explosion = explosions.getFirstExists(false);
explosion.reset(player.body.x, player.body.y);

explosion.play('explosion', 30, false, false);

if (lives.countLiving() < 1)
{
    player.kill();
}

}

Create function which creates explosion group

explosions = game.add.group();
explosions.createMultiple(30, 'explosion');

Preloader

this.load.spritesheet('explosion', 'images/explode.png', 128, 128, 16);

Upvotes: 1

Views: 371

Answers (1)

BdR
BdR

Reputation: 3048

The line explosions.createMultiple() only creates 30 sprites, you still need to explicitly add an animation to each of the sprites. You can add an animation with a name, and optionally the frames etc. Btw I recommend using different names for the group and animation to avoid confusion, so something like this:

// initialise animations in the Create() function:
for (var i = 0; i < grpexplosions.children.length; i++) {
    grpexplosions.children[i].animations.add('animexplode', [0,1,2,3], 30, true, false);
    //grpexplosions.children[i].animations.add('animexplode'); // alternatively, leave frames null to use all frames
};

// and then when you need one:
explosion = grpexplosions.getFirstExists(false);
explosion.play('animexplode', 30, false, false);

Btw you could also use group.callAll() as a shortcut instead of the for-loop, so something like this:

var framesIndex = [0,1,2,3]; // or names
grpexplosions.callAll('animations.add', 'animations', 'animexplode', framesIndex, 30, true, false);
//grpexplosions.callAll('animations.add', 'animations', 'animexplode'); // frames optional, this will simply add all frames

Upvotes: 2

Related Questions