Jump to content

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
function create() {
this.game.scale.pageAlignHorizontally = true; //centers canvas
this.game.scale.pageAlignVertically = true;
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.collideWorldBounds = true; 
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.collideWorldBounds = true; 
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
GblockT.body.collideWorldBounds = true; 
player = this.game.add.sprite(10,10,"block");
player.body.collideWorldBounds = true;
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() {
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 = this.game.add.sprite(player.body.x,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;
Link to comment
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;animations.play('explode', frameRate, shouldLoop, killOnComplete);
Link to comment
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....

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..  

Link to comment
Share on other sites

  • 5 months later...

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");
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...