Forums » Code » Health Bar Entity

Here is another piece of code I used in my game Heroes Labyrinth this involves keeping a Health bar on top of the unit based on his current health. Take a look: http://probableprogrammer.com/html5/health-bar-entity/

And just as I was about to write one. Thanks!

Hmm, I think I would have just stuck two entities on top of each other, on background and one bar, and modified the x-size of the bar given the players health percentage. This way it looks like it will be more and more inefficient the the lower the health of the entities (more and more checks).

If you want to do some special animation (a blinking bar for example) you can still do that with one check in the update() function, regardless of having changed the x-size.

PS. Haven't actually tried modifying the size of an entity on the fly, but I don't see why it shouldn't work.

Cool, this is a good start for a health bar. I like how you made it an entity so it can be easily added to other entities.

I was able to make your code a lot shorter without modifying how it works.

Here is the entity starting from init()

    init: function( x, y, settings ) {
 
            this.addAnim( '10', 1, [0] );
            this.addAnim( '9', 1, [1] );
            this.addAnim( '8', 1, [2] );
            this.addAnim( '7', 1, [3] );
            this.addAnim( '6', 1, [4] );
            this.addAnim( '5', 1, [5] );
            this.addAnim( '4', 1, [6] );
            this.addAnim( '3', 1, [7] );
            this.addAnim( '2', 1, [8] );
            this.addAnim( '1', 1, [9] );
            this.addAnim( '0', 1, [10] );
 
            this.parent( x, y, settings );
            this.zIndex = 6;
    },
 
        update: function(){

        // Used to follow the Unit its assigned to.
        this.pos.x = this.Unit.pos.x;
        this.pos.y = this.Unit.pos.y;
        for (var i=10;i>-1;i--){
            //Checks the Health Values
            // maxHealth was created in the Entity and set to its initial health
        
            if(this.Unit.health == this.Unit.maxHealth){
                this.currentAnim = this.anims[10];
            }
            // Unit below max not below 90%
            else if(this.Unit.health >= (this.Unit.maxHealth * (i*0.1)) // 80%
                    && this.Unit.health < this.Unit.maxHealth * ((i*0.1)+0.1)) // 90%
            {
                this.currentAnim = this.anims[i];
            }else if (this.Unit.health <= 0 ){
                this.kill();
            }
        }
    }
 
});
 
});

You could make the code -even- shorter by simply setting up a single calculation:

// Used to follow the Unit its assigned to.
        this.pos.x = this.Unit.pos.x;
        this.pos.y = this.Unit.pos.y;

//Calculate health % and set anim
this.currentAnim = this.anims[10-(Math.floor(this.obj.health*10/this.obj.maxHealth))]

what's the advantage of using an entity to draw the stuff vs just having a class with a draw function that calls a couple context.drawRect() calls? Seems like overkill, but hey if it works do it!

@SlouchCouch I agree, but I only recently understood how to use the context.drawRect() in the draw method, whereas Entities are pretty clear.

If someone (maybe I'll do it) makes a demo of a health bar using draw, then I'm sure that would be the better solution in most cases.

I have one in my current game that i'm working on. Well it's not really a health meter, but it's a meter all the same. I'd throw some code up but i'm busy at work right now but maybe i can get to it later.

One thing to note is your draw coordinates directly on the canvas are different from your entity coordinates depending on the ig.game.screen locations and your ig.system.scale value. ig.system.getDrawPos() is your friend!

Thank you everyone for posting on this thread. You have all saved me some time in building my own health bars for my little project.

For a different method for health bars using context draws within an entity check out: http://impactjs.com/forums/help/how-to-place-mini-health-bars-on-enemies-level-editor-confusion

That's really cool mate! Will be looking into that.

Quote from Graphikos
For a different method for health bars using context draws within an entity check out: http://impactjs.com/forums/help/how-to-place-mini-health-bars-on-enemies-level-editor-confusion