Forums » Help » How to place mini-health bar's on enemies & Level Editor Confusion

Hello everyone, I recently was taking a look at another impactjs game, and I came to wonder, "How did he (or she) add a mini-health bar to the enemy?". I liked this because the player would easily know how much damage the enemy had taken, thus this would be beneficial to a developer who wants to add bosses to his or her game. I really would appreciate if someone told me how.

Also, I don't understand some parts of the Level Editor specifically the dimension's, since there is a clear warning on the Doc's that your not suppose to mess things up when it comes to this. Can someone explain how I would know the specific dimensions of my sprite-sheet for my level? [And example would be that I have a 200X200 sheet. ]

Worked up a quick example for you using context draws. This is a modification of the spike entity from the jump-n-run example. This is assuming a scale of 2.

ig.module(
	'game.entities.spike'
)
.requires(
	'impact.entity'
)
.defines(function(){
	
EntitySpike = ig.Entity.extend({
	size: {x: 16, y: 9},
	maxVel: {x: 100, y: 100},
	friction: {x: 150, y: 0},
	
	type: ig.Entity.TYPE.B, // Evil enemy group
	checkAgainst: ig.Entity.TYPE.A, // Check against friendly
	collides: ig.Entity.COLLIDES.PASSIVE,
	
	health: 10,
	maxHealth: 10,
	
	speed: 14,
	flip: false,
	
	animSheet: new ig.AnimationSheet( 'media/spike.png', 16, 9 ),
	
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		
		this.addAnim( 'crawl', 0.08, [0,1,2] );
	},
	
	
	update: function() {
		// near an edge? return!
		if( !ig.game.collisionMap.getTile(
				this.pos.x + (this.flip ? +4 : this.size.x -4),
				this.pos.y + this.size.y+1
			)
		) {
			this.flip = !this.flip;
		}
		
		var xdir = this.flip ? -1 : 1;
		this.vel.x = this.speed * xdir;
		
		this.parent();
	},
	
	draw: function() {
		// border/background
        ig.system.context.fillStyle = "rgb(0,0,0)";
        ig.system.context.beginPath();
        ig.system.context.rect(
						(this.pos.x - ig.game.screen.x) * ig.system.scale, 
						(this.pos.y - ig.game.screen.y - 8) * ig.system.scale, 
						this.size.x * ig.system.scale, 
						4 * ig.system.scale
					);
        ig.system.context.closePath();
        ig.system.context.fill();
        
		// health bar
        ig.system.context.fillStyle = "rgb(255,0,0)";
        ig.system.context.beginPath();
        ig.system.context.rect(
						(this.pos.x - ig.game.screen.x + 1) * ig.system.scale, 
						(this.pos.y - ig.game.screen.y - 7) * ig.system.scale, 
						((this.size.x - 2) * (this.health / this.maxHealth)) * ig.system.scale, 
						2 * ig.system.scale
					);
        ig.system.context.closePath();
        ig.system.context.fill();
		
		this.parent();
    },	
	
	handleMovementTrace: function( res ) {
		this.parent( res );
		
		// collision with a wall? return!
		if( res.collision.x ) {
			this.flip = !this.flip;
		}
	},	
	
	check: function( other ) {
		other.receiveDamage( 10, this );
	}
});

});

Thank you so much!!!!!!!! Also, I don't understand what is meant by, "dimensions" in the level editor, are the dimensions the layer's size? So if I had a 200X200 I'd type those numbers in the box?

No problem. I don't use WM so someone else will need to field the rest of your questions.

The dimensions refer to tiles. So if your tiles are 16x16 pixels each, then a 200x200 map would be 3200x3200 pixels.

Remember to specify your tilesize for each layer.