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

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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...