Forums » Help » Animation after killing an entity.

I have some collectable entities in my game. Instead of just executing this.kill();, which immediately kills the entity. I would like to display a different animating image that shows it being collected in its place and then kill it off.

The problem with what I have at the moment is that it gets killed before the animation is meant to occur. Do I need to put in a delay or is there some better code that does this?

This is what I have at the moment:

ig.module('game.entities.invincibility').requires('impact.entity').defines(function () {
    EntityInvincibility = ig.Entity.extend({
        size: { x: 32, y: 32 },
        checkAgainst: ig.Entity.TYPE.A,
        animSheet: new ig.AnimationSheet('media/sprites/invincibility.png', 32, 32),
		sfx: new ig.Sound('media/sounds/collect.*'),
        gravityFactor: 0,
        init: function(x, y, settings) {
            this.addAnim('idle', 0.08, [0, 1, 2, 3, 4, 5, 6, 7]);
            this.parent(x, y, settings);
        },
        check: function (other) {
			this.kill();
        },
		kill: function() {
			this.sfx.play();
			var pickupSheet = new ig.AnimationSheet('media/sprites/invincibility_picked_up.png', 32, 32);
			var pickup = new ig.Animation(pickupSheet, 0.05, [0, 1, 2, 3, 4, 5, 6], true);
            pickup.update();
			pickup.draw(this.pos.x, this.pos.y);
			this.currentAnim = pickup;
			
			this.parent();
		},
        update: function () {
            this.parent();
        }
    });
});

From what I understand (which isn't much...), .kill() is a one way street so the way I would do it is by making the check function not immediately kill the entity but instead set a 'flag' variable and then that flag is checked within the update. After you determine that your animation is over, then you can call .kill() it.

Personally what I do is to spawn a new entity. Just before I call the dying entity's kill(), I spawn the new entity then allow the dying entity's kill() to be called. The new entity deals with animation and any other effects that occur while dying, and when that's done it invokes whatever behaviour has to occur after dying.

Means you can allow the player to explode or show a death animation and once that's done, throw execution to whatever happens next.

The reason it&039;s still being killed is you are calling #this.parent() in your redefined kill function. Therefore it&039;s still carrying out the kill. Maybe just check #this.currentAnim.frame in your update (knowing that it&039;s being killed) and if frame == last frame then call #ig.game.removeEntity( this ); (which is what the parent action of kill() does.

There might be some other issues in your code but I don&039;t have a lot of time right now to work through it. Glaring error seems like #kill() isn&039;t going to run every frame therefore the #pickup.update() on the animation isn't going to occur. Setting it as currentAnim should have the entity's update() call it already so doing it that way might be unnecessary.

Sorry this is a rushed response. Might be less than clear. ;) Arantor's method is a sound method also but there is no reason why you couldn't do it all self contained if you wanted to.

I ended up using the following code, which works just fine. If there's any improvements I can make, please let me know:

Powerup:

ig.module('game.entities.heart').requires('game.entities.pickup', 'impact.entity').defines(function () {
    EntityHeart = ig.Entity.extend({
        size: { x: 16, y: 16 },
        checkAgainst: ig.Entity.TYPE.A,
        animSheet: new ig.AnimationSheet('media/sprites/heart.png', 16, 16),
		sfx: new ig.Sound('media/sounds/collect.*'),
        gravityFactor: 0,
        init: function(x, y, settings) {
            this.addAnim('idle', 0.08, [0, 1, 2, 3, 4, 5, 6, 7]);
            this.parent(x, y, settings);
        },
        check: function (other) {
			this.sfx.play();
			this.kill();
            ig.game.spawnEntity(EntityPickup, this.pos.x, this.pos.y, { callBack: this.onDeath });
        },
		onDeath: function(other) {
			other.kill();
		},
        update: function () {
            this.parent();
        }
    });
});

Pickup Entity:

ig.module('game.entities.pickup').requires('impact.entity').defines(function () {
    EntityPickup = ig.Entity.extend({
        size: { x: 16, y: 16 },
        animSheet: new ig.AnimationSheet('media/sprites/pickup.png', 16, 16),
        gravityFactor: 0,
        callBack: null,
        init: function(x, y, settings) {
            this.addAnim('idle', 0.08, [0, 1, 2, 3, 4, 5, 6], true);
            this.parent(x, y, settings);
        },
        update: function () {
			if (this.currentAnim.loopCount > 0) {
				if (this.callBack) {
	            	this.callBack(this);
				}
			}
            this.parent();
        },
        kill: function() {
            this.parent();
        }
    });
});

I like Arantor's solution the best. Go ahead and kill() the entity and add it to your inventory, but as a final act before kill(), spawn a new death entity that which goes through the effect animation and then itself calls kill().

Imagine if it were a spaceship hit by an asteroid. You kill() the ship right away but spawn an explosion entity in its place. If it's your last player, the Game Over message would appear while the explosion is still animating.

Hey,

Great info here folks - props to fulvio for posting his code, really helped me out of a bind and also to get my head around the idea of spawning entities to assist in complex animations.

My game has a character throwing a glass orb, when the orb bounces three times I have a detailed 12 frame smashing animation triggering. I was having a lot of trouble getting this to display after the third bounce. The trick was to kill the glass orb after bounce 3 and THEN show the smashing animation. Fulvio's code made perfect sense to me as soon as I saw it, I implemented it and it works great. Would love to get other people's thoughts on implementing this kind of animation sequence for death/change-of-state events.

R.

Well I think the best way is to inherit the kill() method

Something like this:

if (this.health <= 0 && this.hit == false)
                {
                    this.currentAnim = this.anims.killed;
                    
                    this.timerDeath = new ig.Timer(.3); // the time to finish the this.anims.killed.
                    
                    this.hit = true;

                }
                if (this.disappear)
                {
                    // Do some stuffs when the entity disappear, plus points or stuffs
                    this.parent();
                }

my idea was the checking for the dead animation.

here the animation

this.addAnim('die', 0.2, [1,2,3,4,5,6,7,8]);

and when the .... dies set the animation

this.currentAnim = this.anims.die;

and in the updatefunction check for animation and frame

if ((this.currentAnim == this.anims.die) && (this.currentAnim.frame === 8)) { this.kill(); }