Health bar Plugin doesn't upgrade its position

[Marumari]

Hey,

im trying to give any enemy in my game a health meter.  The problem is im using a Plugin and i cant upgrade the position of the Health bar. I want that the health bars move above any enemy.  Any idea how to fix it?

Im using this plugin: https://github.com/matthiaswh/phaser-health-meter

Here is my Code for the enemys

var Enemy = function(game, x, y) {
    Phaser.Sprite.call(this, game, x, y, 'atlas', 'sprite' + game.rnd.integerInRange(1, 10));
    this.anchor.setTo(0.5, 0.5);

  this.game.physics.arcade.enable(this);
  this.enableBody = true;
  this.body.gravity.y = 400;
  this.physicsBodyType = Phaser.Physics.ARCADE;
  this.body.velocity.x = -100;

  this.health = 100;
  this.maxHealth = 100;

  this.preloadBar = game.add.sprite(this.x, this.y, 'preloadBar');
  this.preloadBar.anchor.setTo(0.5, 0.5);
  this.game.load.setPreloadSprite(this.preloadBar);

  this.healthMeterBar = this.game.add.plugin(Phaser.Plugin.HealthMeter);

    //this.game.physics.arcade.enable(this);
    this.update = function() {
    if(this.x <= 120){
      this.kill();
    }
    this.healthMeterBar.bar(this, {
        y: this.y-45, x: this.x,
        width: 80, height: 10,
        foreground: '#01DF01',
        background: '#aa0000',
        alpha: 0.6
    });

    }
};
Enemy.prototype = Object.create(Phaser.Sprite.prototype);
Enemy.prototype.constructor = Enemy;

 

[espace]

Hi, you must put the healthbar position in the update function on your enemy to follow the enemy x and y position.

[Marumari]

How can i upgrade the position of the healthbar? this.healthMeterBar.bar.x = this.x; Is not working and i have no idea what to type instead.

[espace]

Read these doc :

https://github.com/bmarwane/phaser.healthbar/blob/master/README.md

And try :

this.myHealthBar = new HealthBar(this.game, {x: 200, y: 200, width: 120});
this.update=()=>{
this.myHealthBar.x=this.x
//Try maybe this also
//this.myHealthBar.x=this.body.x
}

 

[Marumari]

Thx i did read the doc and downloaded the new plugin to test it. But it still not working the new Healthbar doesn't upgrade its position as well.

[Marumari]

push

 

[espace]

hi,

See my files attached (test_bar.zip), it works.

Just open the index.html file and drag the circle and the healtbar follow the circle.

Have a good day.

 

var config = {
	width: 800,
	height: 800,
	renderer: Phaser.CANVAS,
	antialias: true,
	multiTexture: true,
	state: {
		preload: create,
		update: update
	},
}

let game = new Phaser.Game(config);
var circle;
var bar;

function create () {
	this.game.scale.pageAlignHorizontally = true;
	this.game.scale.pageAlignVertically = true;
	this.game.scale.refresh();

	circle = game.add.graphics(0, 0);
	circle.beginFill(0xFF0000, 1);
	circle.drawCircle(300, 300, 100);

	//  Input Enable the sprite
	circle.inputEnabled = true;

	//  Allow dragging
	circle.input.enableDrag();
	
        //healthbar
	var bar_config = {
		width: 250,
		height: 40,
		x: 200,
		y: 400,
		bg: {
			color: '#Fff828'
		},
		bar: {
			color: '#FEFF03'
		},
		animationDuration: 200,
		flipped: false
	};

	bar = new HealthBar(this.game, bar_config);

	//here you discover the properties of  bar => HealthBar and you see sub-sprites like barSprite, bgSprite and others ...
        // in dev. tools on chrome and firefox also, just type bar in the console
	console.log(bar)
}

function update () {
        bar.bgSprite.x=circle.x
	bar.bgSprite.y=circle.y	
        bar.barSprite.x=circle.x
	bar.barSprite.y=circle.y
}

 

test_bar.zip

[espace]

Have you test it ? Normally marks it as solved, it's helpful for the others who search the same thing.