Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by Yu

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();

1 decade ago by dominic

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();
}

1 decade ago by Yu

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

1 decade ago by Hareesun

Death Animations :)

1 decade ago by Yu

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!

1 decade ago by Yu

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();
	}
});
});

1 decade ago by dominic

My suggestion was to add a '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.

1 decade ago by Yu

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!

1 decade ago by MobileMark

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

1 decade ago by Yu

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!

1 decade ago by dominic

Oh, you're still using the receiveDamage() method - that'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;
}

1 decade ago by Yu

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.

1 decade ago by dominic

That'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;
}

1 decade ago by Yu

finally got it running!
Page 1 of 1
« first « previous next › last »