[Phase 2] Unable to get sprite sheet to play!


Hi everyone,

I’m totally new to Phaser as well as HTML5 games in general though having certain experience with mobile programming. Recently, I’ve tried a tutorial on the Internet showing how to create a Flappy Bird alike game and successfully ported it to a native android game with ionic. However, I started to add a couple of other things, which are bullet shooting and explosion, just for learning more about Phaser. The bullet part was fine and it does hit the targets but I was unable to create an explosion using sprite sheet, it only showed the 1st frame of the png image no matter what parameter I have changed.

Below is how I add the explosion, attach them to the targets and the firing part. Any help would be so much appreciated, thank you:

// the explode.png contain 5 frames set up horizontally in a single image
  game.load.spritesheet('boom', 'assets/explode.png', 26, 26, 5);

 //  explosion pool
        explosions = game.add.group();
        explosions.enableBody = true;
        explosions.physicsBodyType = Phaser.Physics.ARCADE;
        explosions.createMultiple(30, 'boom');
        explosions.setAll('checkWorldBounds', true);
        explosions.setAll('outOfBoundsKill', true);

// attach explosion to a target
  var dino = game.add.sprite(x, y, 'dino');

// firing
  var explosion = explosions.getFirstExists(false);
        explosion.reset(dino.body.x, dino.body.y);
        explosion.play('boom', 30, false, true);
        explosion.body.velocity.x = -100;
        setTimeout(function () { explosion.kill() }, 1000);


You can do it diffrently by first passing the frames that you want to be played, something like dino.animations.add('boom', [0,1,2,3,4], 30, true);
then call explosion.animation.play('boom')


Hi @hnguyen48206,
In Phaser 2 each sprite has its own animations.
You can’t call an animation created in the sprite “dino” from “explosion”.

You need something like this in your code:

// In your group settings
explosions.callAll('animations.add', 'animations', 'yourAnimationKey');

// To play it with explosion



Thank @jjcapellan @nazimboudeffa , I’ve tried both of you guys solution and the second works perfectly for my case. :smile: