Forums » Help » Howto request: Health Bar or Power bar/meter

Noob question:

Perhaps i'm looking for the wrong keywords, but I can't seem to find info on creating a health bar or the like.

I'm trying to make a simplistic golf game where you hold a button (or virtual button) and a meter or bar increases the longer you hold it (until it reaches max/100% filled).

I saw how it could be approached by drawing a rectangle and then filling it (based on the impact.loader class), but I was hoping to use a sprite, but can't quite wrap my head around how to do the animation...

Very new to this, so any tips to get me on the right path/code snippets or examples would be appreciated!

Thanks!

I just this minute posted an article about this very thing so you sir are in luck. Looking in the code section of the forum is always nice to take a look at lots of good code examples there. Anyways here my link http://probableprogrammer.com/html5/health-bar-entity/

Awesome... thank you!

Would it be greedy of me to ask you to share your code for the attack mechanism for heroes labyrinth demo? (the thing that goes back and forth and presumably if you hit it in the red does more damage -- at least that's what I assume it does).

Pretty cool what you've put together so far!

rampy

The attack mechanism involves a pretty decent amount of code so I will not be sharing that part sorry. It's much more involved than just a health bar.

Awh.. where is the love? ;)

Here is a quick example on how the attack accuracy meter can be done using context draws:

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

EntityAttack = ig.Entity.extend({
	size: {x:0, y:0},
	collides: ig.Entity.COLLIDES.NONE,
	gravityFactor: 0,
	
	running: true,
	gauge: 0,
		
	update: function() {
		if (ig.input.pressed('click')) {
			if (this.running) {
				this.running = false;
				var accuracy = Math.abs(220 - (this.gauge+5));
				
				if (accuracy < 10) {
					console.log('Critical! (' + accuracy + ')');
				} else if (accuracy < 38) {
					console.log('Not Bad! (' + accuracy + ')');
				} else {
					console.log('Swing and a miss! (' + accuracy + ')');
				}
			} else {
				this.running = true;
			}			
		}
	},
	
	draw: function() {
		ig.system.context.fillStyle = "rgb(255,255,255)";
		ig.system.context.strokeStyle = "rgb(255,255,255)";
		ig.system.context.lineWidth = 3;
		ig.system.context.beginPath();
		ig.system.context.rect(this.pos.x, this.pos.y, 300, 50);
		ig.system.context.closePath();
		ig.system.context.fill();
		ig.system.context.stroke();		
		
		ig.system.context.fillStyle = "rgb(255,222,0)";
		ig.system.context.beginPath();
		ig.system.context.rect(this.pos.x + 180, this.pos.y, 80, 50);
		ig.system.context.closePath();
		ig.system.context.fill();
		
		ig.system.context.fillStyle = "rgb(255,0,0)";
		ig.system.context.beginPath();
		ig.system.context.rect(this.pos.x + 210, this.pos.y, 20, 50);
		ig.system.context.closePath();
		ig.system.context.fill();
		
		ig.system.context.fillStyle = "rgb(0,0,0)";
		ig.system.context.beginPath();
		ig.system.context.rect((this.pos.x + this.gauge), this.pos.y, 10, 50);
		ig.system.context.closePath();
		ig.system.context.fill();
		
		if (this.gauge >= 290) {
			this.step = -8;
		} else if (this.gauge <= 0) {
			this.step = +8;
		}
		
		if (this.running) {
			this.gauge += this.step;
		}
	}
	
});

});

And here is probably a bit more like you are looking for:

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

EntityAttack = ig.Entity.extend({
	size: {x:0, y:0},
	collides: ig.Entity.COLLIDES.NONE,
	gravityFactor: 0,
	
	running: false,
	gauge: 0,
		
	update: function() {
		if (ig.input.state('click')) {
			this.running = true;
		}
		
		if (ig.input.released('click')) {
			this.running = false;
			var accuracy = Math.round((this.gauge/300)*100);
			console.log(this.gauge + ' (' + accuracy + '%)');
		}
	},
	
	draw: function() {
		ig.system.context.fillStyle = "rgb(255,255,255)";
		ig.system.context.strokeStyle = "rgb(255,255,255)";
		ig.system.context.lineWidth = 3;
		ig.system.context.beginPath();
		ig.system.context.rect(this.pos.x, this.pos.y, 300, 50);
		ig.system.context.closePath();
		ig.system.context.fill();
		ig.system.context.stroke();		
				
		ig.system.context.fillStyle = "rgb(0,0,0)";
		ig.system.context.beginPath();
		ig.system.context.rect(this.pos.x, this.pos.y, this.gauge, 50);
		ig.system.context.closePath();
		ig.system.context.fill();
		
		if (this.running) {
			this.gauge += 5;
		}

		if (this.gauge >= 300) {
			this.gauge = 0
		}
	}
	
});

});

Thanks to you both... some of this is starting to click :)

Silly add-on question... how would I place an image on top of this entity? Like, if I wanted to draw a more ornate outer rectangle with tick marks and a little more pizazz.

Is it a matter of just positioning it in the same spot and getting the z-order and transparency of the image correct?

Thanks again for the help - I am trying to figure out as much of this on my own as possible but there's a lot of holes in my javascript/OO/and impact framework understanding.

rampy

You can draw images with native impact functions.

http://impactjs.com/documentation/class-reference/image

There isn't really zindex when you are drawing, there is just order. So if you want to draw a background image you can draw that first, then do the animated part next, then you can draw the frame image. It'll draw it in order and stack properly. Whatever composition of image draws and context draws you want to do to achieve what you want.

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

EntityAttack = ig.Entity.extend({
    size: {x:0, y:0},
    collides: ig.Entity.COLLIDES.NONE,
    gravityFactor: 0,

    scaleBackground: new ig.Image( 'scale.png' );
    scaleFrame: new ig.Image( 'frame.png' );
    
    running: false,
    gauge: 0,
        
    update: function() {
        if (ig.input.state('click')) {
            this.running = true;
        }
        
        if (ig.input.released('click')) {
            this.running = false;
            var accuracy = Math.round((this.gauge/300)*100);
            console.log(this.gauge + ' (' + accuracy + '%)');
        }
    },
    
    draw: function() {
 
        this.scaleBackground.draw(this.pos.x, this.pos.y);
                
        ig.system.context.fillStyle = "rgb(0,0,0)";
        ig.system.context.beginPath();
        ig.system.context.rect(this.pos.x, this.pos.y, this.gauge, 50);
        ig.system.context.closePath();
        ig.system.context.fill();

        this.scaleFrame.draw(this.pos.x, this.pos.y);
        
        if (this.running) {
            this.gauge += 5;
        }

        if (this.gauge >= 300) {
            this.gauge = 0
        }
    }
    
});

});

(untested sample)

@Graphikos

What I tend to do in order to deal with drawing problems with zindex is create a base drawing entity and then use the entities zindex to deal with layer issues drawing. Works out for me pretty well.

If you plan on stacking multiple entities then yes, z-index applies. But drawing it all in the same entity, its just order.

thanks!

I was looking at the health bar code originally posted at the top, and noticed the giant if else block for selecting an animation state.

Seeing as all of these animation states are a single frame, all that writing seems a little excessive. Here is how I approached this in my Chuck the Con prototype:

//inside the draw function
player = this.getEntitiesByType(EntityPlayer)[0];
if(player){ 
    this.hpBars.draw(ig.system.width/2 - this.barDimensions.x * this.maxHealth/2, ig.system.height - 30, 0, 0 + (20 * player.health), 12 * this.maxHealth, 20);
}

It uses a sprite sheet to draw specific sections (inc/dec y value based on current health). It also easily adapts to various size health bars by checking how many of the hp bars to draw total.

Are there any advantages to using sprite sheets over something like this?