need help on how to make animation play on death

[callidus]

In my game I want an animation to play when the player collides with a red block and dies. I used the arcade physics system and said a function called gameOver should trigger when the player and a block overlap. The animation I'm using is an explosion, the function then calls for the player to be killed and removed from the canvas and for the explosion sprite to be added and for it's animation to play. The problem is that the function only plays the first frame, I'm assuming this is because either the function only runs once after they overlap or because the player dies and therefore without the player nothing is overlapping and the function stops.

 

Tl;Dr: how do you make a death animation play after a sprite dies 

 

Thanks for any help   

 

My code: 

*Note the relevant part is coloured green.

 

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update,});

var Rx = Math.random () * 800; // ball spawns in a random place

var Ry = Math.random() * 600;

var Bx = Math.random () * 800; 

var By = Math.random() * 600;

var Gx = Math.random () * 800 

var Gy = Math.random() * 600;

var colours = ["redBlock","greenBlock","blueBlock"];

var colour = colours[Math.floor(Math.random()*2)];

var score = 0; 

var scoreText;

var collideCounter = 0;

var playerX = 10;

var playerY = 10;

 

function preload() {

cursors = game.input.keyboard.createCursorKeys(); //allows keyboard input

this.game.load.image("redBlock","assets/red.png");

this.game.load.image("greenBlock","assets/green.png");

this.game.load.image("blueBlock","assets/blue.png");

this.game.load.spritesheet("explosion","assets/explosionSheet.png",433,410);

this.game.load.image("block","assets/block.png");

}

 

function create() {

this.game.physics.startSystem(Phaser.Physics.ARCADE);

this.game.scale.pageAlignHorizontally = true; //centers canvas

this.game.scale.pageAlignVertically = true;

this.game.scale.refresh();

 

Rblock = game.add.group(); 

Rblock.enableBody = true;

 

for (var i = 1; i < 4 ; i++){

var RblockT = Rblock.create(i * Rx,i * Ry,"redBlock"); // x and y are randomy coordinates the ball spawns at

RblockT.body.velocity.setTo(200,200);

RblockT.body.collideWorldBounds = true; 

RblockT.body.bounce.set(1);

}

 

Bblock = game.add.group(); 

Bblock.enableBody = true;

 

for (var i = 1; i < 4; i++){

BblockT = Bblock.create(i * Bx,i * By,"blueBlock"); // x and y are randomy coordinates the ball spawns at

BblockT.body.velocity.setTo(200,200);

BblockT.body.collideWorldBounds = true; 

BblockT.body.bounce.set(1);

}

 

Gblock = game.add.group(); 

Gblock.enableBody = true;

 

for (var i = 1; i < 4 ; i++){

GblockT = Gblock.create(i * Gx,i * Gy,"greenBlock"); // x and y are randomy coordinates the ball spawns at

this.game.physics.arcade.enable(Gblock);

GblockT.body.velocity.setTo(200,200);

GblockT.body.collideWorldBounds = true; 

GblockT.body.bounce.set(1);

}

 

player = this.game.add.sprite(10,10,"block");

this.game.physics.arcade.enable(player);

player.body.collideWorldBounds = true;

player.scale.setTo(0.2,0.2);

 

explosion = this.game.add.sprite(800,700,"explosion");

explosion.animations.add ("explode",[1,0,2],2,true);

 

 

scoreText = this.game.add.text(16,16,"Score:0",{ FontSize: "32px",fill: "#CCFFFF"});

test = this.game.add.text(16,32,"test:",{ FontSize: "32px",fill: "#CCFFFF"});

test2 = this.game.add.text(16,50,"test:",{ FontSize: "32px",fill: "#CCFFFF"});

}

 

function update() {

this.game.physics.arcade.overlap(player,Rblock,gameOver,null,this);

this.game.physics.arcade.overlap(player,Gblock,addPointG,null,this);

this.game.physics.arcade.overlap(player,Bblock,addPointB,null,this);

 

function addPointR (player, RblockT){

score += 1;

scoreText.text = "Score:" + score;

RblockT.kill();

}

 

function addPointG (player, GblockT){

score += 1;

scoreText.text = "Score:" + score;

GblockT.kill();

}

 

function addPointB (player, BblockT){

score += 1;

scoreText.text = "Score:" + score;

BblockT.kill();

}

 

function gameOver(){

player.kill();

explosion = this.game.add.sprite(player.body.x,player.body.y,"explosion");

explosion.anchor.setTo(0.5,0.5);

explosion.animations.play("explode");

}

 

playerY = player.body.velocity.y; //playerY tracks the y coordinate of the player and is used to tell where the explosion should spawn

playerX = player.body.velocity.x; //playerX tracks the x coordinate of the player and is used to tell where the explosion should spawn

player.body.velocity.x = 0;

player.body.velocity.y = 0;

 

if (cursors.up.isDown){

player.body.velocity.y += -200;

}

 

if (cursors.down.isDown){

player.body.velocity.y += 200;

}

 

if (cursors.left.isDown){

player.body.velocity.x += -200;

}

 

if(cursors.right.isDown){

player.body.velocity.x += 200;

}

}

 

 

[eguneys]

add an onComplete event to animation then, first play the animation and kill the sprite on animation complete.

 

You can tell to kill the sprite on animation complete in the play function

var shouldLoop = false, killOnComplete = true;animations.play('explode', frameRate, shouldLoop, killOnComplete);

[valueerror]

in my game.. to avoid interering of other objects (physicsbodies) while the "die animation" and the tween that moves the player out of the screen is playing..  i first remove the physicsbody.. then start the tween.. and with a timeout as long as the tween i destroy the sprite....

game.time.events.add(Phaser.Timer.SECOND * 2, killplayer, this);

if you don't have a tween, just an animation "killoncomplete" is the best way to do it for sure..  

[satanas]

Callidus, the problem is that in your gameOver function you are overriding the explosion sprite. Check that during create you instantiate a new explosion object with its animations:

explosion = this.game.add.sprite(800,700,"explosion");explosion.animations.add ("explode",[1,0,2],2,true);

 

But then, in gameOver you override that explosion object with a new one and you don't define any animations. However you try to play the "explode" animation:

explosion = this.game.add.sprite(player.body.x,player.body.y,"explosion");explosion.anchor.setTo(0.5,0.5);explosion.animations.play("explode");

Something like this should work:

explosion = this.game.add.sprite(player.body.x,player.body.y,"explosion");explosion.anchor.setTo(0.5,0.5);explosion.animations.add ("explode",[1,0,2],2,true);explosion.animations.play("explode");