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

Phaser 2 / CE
1

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');
  dino.animations.add('boom');
  dinos.add(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);
2

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')

1 Like
3

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
explosion.play('yourAnimationKey',30,false,true)

Regards.

1 Like
4

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

1 Like