Forums » Help » Healthbar Entity display problem

I've created a health bar entity which I plan to attach to the player and enemies. The problem is that I cannot get the health bar to stick where it should be. All the health bars seem to float around more than the parent moves. So the health bar travels twice as far as things move. All the health bars shift around as the player moves about. I do not know why as the images are supposed to be drawn in relation to the entities that spawned the health bar.

This is my code. You can see that I pass the player or enemy object to the health bar so it can track it and check its health and maximum health.

ig.module(
	'game.entities.health'
)
.requires(
	'impact.entity'
)
.defines(function(){
	EntityHealth = ig.Entity.extend({
		healthImg: new ig.Image('media/healthbar.png'),
		entityObj: null,
		
		init: function(x, y, settings) {
			this.entityObj = settings.entityObj;
			this.parent(x, y);
		},
		
		draw: function() {
			this.parent();
			var currentHealth = Math.floor((this.entityObj.health/this.entityObj.maxHealth) * 31);
			this.healthImg.draw(this.entityObj.pos.x, this.entityObj.pos.y, 0, 0, 1, 5);
			for (var i = 1; i < currentHealth; i++) {
				this.healthImg.draw(this.entityObj.pos.x + i, this.entityObj.pos.y, 1, 0, 1, 5);
			}
			for (var i = currentHealth; i < 31; i++) {
				this.healthImg.draw(this.entityObj.pos.x + i, this.entityObj.pos.y, 2, 0, 1, 5);
			}
			this.healthImg.draw(this.entityObj.pos.x + 31, this.entityObj.pos.y, 0, 0, 1, 5);
		}
	})
});

You can see the problem in action on my dev page.

http://project.dnsalias.com/

This is happening because the screen is following the player. If I stop it following then the health bar is displayed where I need it. My maths is failing me at the moment.

From main.js update function

var player = this.getEntitiesByType( EntityPlayer )[0];
    	if( player ) {
        	this.screen.x = player.pos.x - ig.system.width/2;
        	this.screen.y = player.pos.y - ig.system.height/2;
    	}

Got it. I have to set the position of the health bar relative to the player. Took me a while to get there. Here's the working health bar code which is now live on my dev site :)

ig.module(
	'game.entities.health'
)
.requires(
	'impact.game',
	'impact.entity'
)
.defines(function(){
	EntityHealth = ig.Entity.extend({
		healthImg: new ig.Image('media/healthbar.png'),
		entityObj: null,
		offSetX: null,
		offSetY: null,
		lastPosX: null,
		lastPosY: null,
		
		init: function(x, y, settings) {
			this.entityObj = settings.entityObj;
			this.parent(x, y);
		},
		
		draw: function() {
			this.parent();
			var player = ig.game.getEntitiesByType(EntityPlayer)[0];
			if (player) {
				this.lastPosX = player.pos.x;
				this.lastPosY = player.pos.y;
				this.offSetX = (this.entityObj.pos.x - player.pos.x) + ig.system.width/2;
				this.offSetY = (this.entityObj.pos.y - player.pos.y) + ig.system.height/2 - 10;
			} else {
				this.offSetX = (this.entityObj.pos.x - this.lastPosX) + ig.system.width/2;
				this.offSetY = (this.entityObj.pos.y - this.lastPosY) + ig.system.height/2 - 10;
			}
			var currentHealth = Math.floor((this.entityObj.health/this.entityObj.maxHealth) * 31);
			this.healthImg.draw(this.offSetX, this.offSetY, 0, 0, 1, 5);
			for (var i = 1; i < currentHealth; i++) {
				this.healthImg.draw(this.offSetX + i, this.offSetY, 1, 0, 1, 5);
			}
			for (var i = currentHealth; i < 31; i++) {
				this.healthImg.draw(this.offSetX + i, this.offSetY, 2, 0, 1, 5);
			}
			this.healthImg.draw(this.offSetX + 31, this.offSetY, 0, 0, 1, 5);
		}
	})
});