Sign in to follow this  

need help on how to make animation play on death

Recommended Posts

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  :D 


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"redBlock","assets/red.png");"greenBlock","assets/green.png");"blueBlock","assets/blue.png");"explosion","assets/explosionSheet.png",433,410);"block","assets/block.png");
function create() {; = true; //centers canvas = true;;
Rblock =; 
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.collideWorldBounds = true; 
Bblock =; 
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.collideWorldBounds = true; 
Gblock =; 
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;
GblockT.body.collideWorldBounds = true; 
player =,10,"block");;
player.body.collideWorldBounds = true;
explosion =,700,"explosion");
explosion.animations.add ("explode",[1,0,2],2,true);
scoreText =,16,"Score:0",{ FontSize: "32px",fill: "#CCFFFF"});
test =,32,"test:",{ FontSize: "32px",fill: "#CCFFFF"});
test2 =,50,"test:",{ FontSize: "32px",fill: "#CCFFFF"});
function update() {,Rblock,gameOver,null,this);,Gblock,addPointG,null,this);,Bblock,addPointB,null,this);
function addPointR (player, RblockT){
score += 1;
scoreText.text = "Score:" + score;
function addPointG (player, GblockT){
score += 1;
scoreText.text = "Score:" + score;
function addPointB (player, BblockT){
score += 1;
scoreText.text = "Score:" + score;
function gameOver(){
explosion =,player.body.y,"explosion");
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;
player.body.velocity.x += 200;

Share this post

Link to post
Share on other sites

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;'explode', frameRate, shouldLoop, killOnComplete);

Share this post

Link to post
Share on other sites

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.... * 2, killplayer, this);

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

Share this post

Link to post
Share on other sites

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 =,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 =,player.body.y,"explosion");explosion.anchor.setTo(0.5,0.5);"explode");

Something like this should work:

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

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.