short slide animation on enemy kill, visible but not hittable

[BdR]

When the enemies in my game get hit, I want them to shortly slide across the screen before they dissapear. So a short visual animation just to let the player know he hit an enemy, rather than just remove it instantly. This video of Super Mario 2 is a good example of what I mean, for example at 0:57

 

https://www.youtube.com/watch?v=tFPoNZoFBXM#t=0m57s

 

If I do enemy.kill() it is not "alive" so it cannot collide anymore and it can't hit the player which is good, however it's also not visible. So I want it to be shortly still visible and move, but it shouldn't be able to kill the player.

 

What would be the best way to achieve this?

[ZoomBox]

-Disable physics on the ennemy (so it'll not kill the player or collide with anything)

-Tween it pos the way you want

-tween.onComplete.add(ennemy.kill()); (so it'll not be calculated anymore)

[BdR]

The enemies (animals) in my game are in a group, so how do I disable physics for individual group members? Also, the onCompleteCallback callback function gives an error..

 

Here's what I've got so far:

function update() {

    // check player animal collision

    game.physics.arcade.overlap(player, animalsGroup, playerHitsAnimal, null, this); 

} 

..

function playerHitsAnimal (ply, ani) {

    // calculate slide goal x,y pos, opposite direction of player

    var xgoal = ani.x - (ply.x - ani.x);

    var ygoal = ani.y - (ply.y - ani.y);



    // animal slides back before it is killed

    var tween = game.add.tween(ani).to( { x: xgoal, y: ygoal }, 200, Phaser.Easing.Linear.None, true);

    tween.onCompleteCallback(killAnimal(), this);

}


function killAnimal (ani) {

    ani.kill(); // <- gives error "Cannot read property 'kill' of undefined"

}

For complete code see:

https://github.com/BdR76/phaseranimals/

http://members.home.nl/bas.de.reuver/phaseranimals/

[ZoomBox]

It should be

tween.onCompleteCallback(killAnimal(), ani);

instead of

tween.onCompleteCallback(killAnimal(), this);

 

Then, in your callBack, the parameter will be the "ani" and you'll be able to call kill() on it.

[ZoomBox]

Actually, I believe the code should be:

function update() {    // check player animal collision    game.physics.arcade.overlap(player, animalsGroup, playerHitsAnimal, null, this); } ..function playerHitsAnimal (ply, ani) {    // calculate slide goal x,y pos, opposite direction of player    var xgoal = ani.x - (ply.x - ani.x);    var ygoal = ani.y - (ply.y - ani.y);    // animal slides back before it is killed    ani.body.enable=false;    var tween = game.add.tween(ani).to( { x: xgoal, y: ygoal }, 200, Phaser.Easing.Linear.None, true);    tween.onCompleteCallback(killAnimal(), ani);}function killAnimal () {    this.kill();}

[BdR]

Actually, I believe the code should be:

Thanks but that doesn't work either, it gives an Uncaught TypeError "undefined is not a function" on the line with this.kill();

 

I also tried the following code, but that gives the same error  !?

tween.onCompleteCallback(function(){ani.kill();}, this);

[lewster32]

Try this:

tween.onComplete.add(function(){ ani.kill(); }, this);

As far as I can tell, onCompleteCallback isn't even specified.

[BdR]

Try this:

Thanks that did the trick as far as removing the animal at the end of the slide animation.

 

However, a sliding animal can still hit the player even though I've set ani.body.enable=false. I mean playerHitsAnimal() is also called when the player hits an animals during its tween slide animation. This is my code at the moment:

function playerHitsAnimal (ply, ani) {    // calculate slide goal x,y pos, opposite direction of player    var xgoal = ani.x - (ply.x - ani.x);    var ygoal = ani.y - (ply.y - ani.y);    // animal slides back before it is killed    ani.body.enable=false;    var tween = game.add.tween(ani).to( { x: xgoal, y: ygoal }, 200, Phaser.Easing.Linear.None, true);    tween.onComplete.add(function(){ ani.kill(); }, this);}function killAnimal () {    this.kill();}

 

EDIT:

 

As far as I can tell, onCompleteCallback isn't even specified.

 

Also, how can you tell this? Are you using some editting tool with codecompletion, or did you look it up in the phaser documentation?

[lewster32]

That's odd - maybe you can do this:

function playerHitsAnimal (ply, ani) {  if (!any.body.enable) {    return;  }  // ... rest of your function

Also, I checked the latest source for the Tween object: https://github.com/photonstorm/phaser/blob/dev/src/tween/Tween.js