Marumari Posted June 23, 2018 Share Posted June 23, 2018 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; Link to comment Share on other sites More sharing options...
espace Posted June 26, 2018 Share Posted June 26, 2018 Hi, you must put the healthbar position in the update function on your enemy to follow the enemy x and y position. Link to comment Share on other sites More sharing options...
Marumari Posted June 26, 2018 Author Share Posted June 26, 2018 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. Link to comment Share on other sites More sharing options...
espace Posted June 26, 2018 Share Posted June 26, 2018 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 } Link to comment Share on other sites More sharing options...
Marumari Posted June 26, 2018 Author Share Posted June 26, 2018 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. Link to comment Share on other sites More sharing options...
Marumari Posted June 27, 2018 Author Share Posted June 27, 2018 push Link to comment Share on other sites More sharing options...
espace Posted June 28, 2018 Share Posted June 28, 2018 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 Link to comment Share on other sites More sharing options...
espace Posted July 3, 2018 Share Posted July 3, 2018 Have you test it ? Normally marks it as solved, it's helpful for the others who search the same thing. Link to comment Share on other sites More sharing options...
Recommended Posts