Marumari

Health bar Plugin doesn't upgrade its position

Recommended Posts

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;

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.