Forums » Help » how do I spawn death animation? Or death particle like in biolab?

This is what I did:

Create a new "dead" entity with animation. Added the "dead" entity to main.js,

Enemy entity:
type: ig.Entity.TYPE.B,
checkAgainst: ig.Entity.TYPE.A,
collides: ig.Entity.COLLIDES.PASSIVE,

Hero entity:
type: ig.Entity.TYPE.A,
checkAgainst: ig.Entity.TYPE.NONE,
collides: ig.Entity.COLLIDES.PASSIVE,

By using the check: function( other ), I'm stuck with the code to follow before this.kill();

You could do something like this in your entity

update: function() {
	// Check if this entity is currently playing the 'die' animation
	if( this.currentAnim == this.anims.die ) {
		// Has the animation completely run through? -> kill it
		if( this.currentAnim.loopCount ) {
			this.kill();
		}
		
		return;
	}
	
	// Otherwise update as normal, check for keys etc.
	this.parent();
},


check: function( other ) {
	// Don't call this.kill() here, but instead, just set 
	// the 'die' animation:
	this.currentAnim = this.anims.die.rewind();
}

I'd assume I insert this code into my "dead" entity and have the "hero" entity check " this.currentAnim = this.anims.die.rewind();" when overlapped by the "enemy"?

correct my If I'm wrong

Death Animations :)

Hi Hareesun, I've gone through it before I started this thread, this might sounds silly but I still don't get it after many tries!

below is my code, but the "die" animation just won't appear!

ig.module(
	'game.entities.cutie'
)
.requires(
	'impact.entity'
)
.defines(function(){

EntityCutie = ig.Entity.extend({
	
	size: {x:32, y:32},
	
	type: ig.Entity.TYPE.A, // Player friendly group
	checkAgainst: ig.Entity.TYPE.NONE,
	collides: ig.Entity.COLLIDES.PASSIVE,
	
	animSheet: new ig.AnimationSheet( 'media/cutie.png', 32, 32),

	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		this.addAnim( 'idleup', 0.1, [9] );
		this.addAnim( 'idledown', 0.1, [0] );
		this.addAnim( 'idleleft', 0.1, [3] );
		this.addAnim( 'idleright', 0.1, [6] );
		
		this.addAnim( 'up', 0.1, [9,10,11] );
		this.addAnim( 'down', 0.1, [0,1,2] );
		this.addAnim( 'left', 0.1, [3,4,5] );
		this.addAnim( 'right', 0.1, [6,7,8] );			
	},

	update: function() {
	
		this.vel.x = 0;
		this.vel.y = 0;
	
		if( ig.input.state('up') ) {
			this.currentAnim = this.anims.up;
			this.vel.y = -100;			
		}
		
		else if( ig.input.state('down') ) {
			this.currentAnim = this.anims.down;	
			this.vel.y = 100;	
		}
		
		if( ig.input.state('left') ) {
			this.currentAnim = this.anims.left;
			this.vel.x = -100;			
		}
		else if( ig.input.state('right') ) {
			this.currentAnim = this.anims.right;	
			this.vel.x = 100;	
		}
		
		if( !this.vel.x && !this.vel.y ) {
					
					// not already idle? -> set idle anim
					if( !this.idle ) {
						this.idle = true;
						
						if ( this.currentAnim == this.anims.up ) {
							this.currentAnim = this.anims.idleup;
						} 
						else if (this.currentAnim == this.anims.down ) {
							this.currentAnim = this.anims.idledown;
						} 
						else if (this.currentAnim == this.anims.left ) {
							this.currentAnim = this.anims.idleleft;
						} 
						else {
							this.currentAnim = this.anims.idleright;
						}
					}
				}
		else {
			this.idle = false;
		}
		
		// shoot
		if( ig.input.pressed('shoot') ) {
			ig.game.spawnEntity( EntityFire, this.pos.x, this.pos.y, {flip:this.flip} );
		}
		
		this.parent();	
	}	
});

EntityFire = ig.Entity.extend({
	size: {x: 16, y: 16},

	type: ig.Entity.TYPE.NONE,
	checkAgainst: ig.Entity.TYPE.B, // Check Against B - our evil enemy group
	collides: ig.Entity.COLLIDES.PASSIVE,
		
	animSheet: new ig.AnimationSheet( 'media/fire.png', 32, 48 ),
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
	
		this.addAnim( 'idle', 0.1, [0,1,2,3,4,5,6,7,8,9,10,11] );
	}	
		
});

EntityDie = ig.Entity.extend({
	size: {x: 32, y: 32},

	type: ig.Entity.TYPE.NONE,
	checkAgainst: ig.Entity.TYPE.B, // Check Against B - our evil enemy group
	collides: ig.Entity.COLLIDES.PASSIVE,
		
	animSheet: new ig.AnimationSheet( 'media/die.png', 32, 32 ),
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
	
		this.addAnim( 'die', 0.1, [0,1,2] );
	},

	update: function() {
	    // Check if this entity is currently playing the 'die' animation
	    if( this.currentAnim == this.anims.die ) {
	        // Has the animation completely run through? -> kill it
	        if( this.currentAnim.loopCount ) {
	            this.kill();
	        }
	        
	        return;
	    }
	    
	    // Otherwise update as normal, check for keys etc.
	    this.parent();
	},
	
	check: function( other ) {
	    // Don't call this.kill() here, but instead, just set 
	    // the 'die' animation:
	    other.receiveDamage( 10, this );
	    this.currentAnim = this.anims.die.rewind();
	}
});
});

My suggestion was to add a &039;die' animation to the entity that should have the 'die' animation, play that animation when the entity was hit and #.kill() the entity when the animation has finished.

I think I got what you were telling me earlier, I've found that my main problem being having no foundation of programming at all, not to mention JS. Even though I've gone through the documentation many times. Copy, paste and modify just won't work in creating my own game.

However, thanks again for the great helps from everyone, for those who think that USD 99 is expensive, think twice!

Thanks Dom, this makes way more sense to me than adding another entity thats sole purpose is to die. But as always, theres 4950 different ways to skin a cat

cutie.js
zombie.js
main.js

The baked game at: http://html5.iopixels.com/

Hi guys,

I think I've written everything correctly but the dead animation just won't play (I've seen only the 1st frame). Can somebody please help look at the code from the links and advise?

Thanks!

Oh, you&039;re still using the #receiveDamage() method - that&039;s okay. I just thought you weren't using it and instead killing then entity directly in the #check() method.

So try removing the check() method from your cutie.js and instead set the animation in the receiveDamage() method:

receiveDamage: function( amount, other ) {
	// Don't call this.kill() here, but instead, just set 
	// the 'die' animation:
	this.currentAnim = this.anims.die.rewind();
}

Edit: also, put this at the top of your update method, otherwise the entity will still be able to move and will overwrite the 'die' animation again:

// Check if this entity is currently playing the 'die' animation
if( this.currentAnim == this.anims.die ) {
	// Has the animation completely run through? -> kill it
	if( this.currentAnim.loopCount ) {
		this.kill();
	}
	
	return;
}

I've updated my cutie.js and the game at http://html5.iopixels.com/

When my character is idle (like on the link above without moving the character), the dead animation play successfully but when i move my character around using the arrow keys, the move animation overwrite the dead animation again.

That&039;s why there's a #return; in the if( this.currentAnim == this.anims.die ). If the 'die' animation is the current animation you shouldn't be able to move anymore, so just exit the update function.

One thing I forgot though: you'd still have to update the animation before you return from the update function. So again:

// Check if this entity is currently playing the 'die' animation
if( this.currentAnim == this.anims.die ) {
    // Has the animation completely run through? -> kill it
    if( this.currentAnim.loopCount ) {
        this.kill();
    }
    this.currentAnim.update();
    return;
}

finally got it running!