opendevcode Posted February 19, 2014 Share Posted February 19, 2014 I am thinking of adding some GUI on my character. How do you create health bars using sprites? Thank you Link to comment Share on other sites More sharing options...
XekeDeath Posted February 19, 2014 Share Posted February 19, 2014 Create the sprite as you normally would.Add it to the character as a child.Scale it as needed. Link to comment Share on other sites More sharing options...
xronn Posted February 19, 2014 Share Posted February 19, 2014 Is there any examples of this because threads like this keep coming up, I'm also looking for an example. I guess you do something like healthBar = player.health / player.maxhealth Then make some bar scale with the output of that I'm not sure. Link to comment Share on other sites More sharing options...
RayMon22 Posted February 19, 2014 Share Posted February 19, 2014 You need to make a child to the player if you would like the bar to be near the player I think not really sure Link to comment Share on other sites More sharing options...
opendevcode Posted February 20, 2014 Author Share Posted February 20, 2014 Create the sprite as you normally would.Add it to the character as a child.Scale it as needed.Would scaling affect the quality of the image? Is there any cutting method that could be used? Something that will strip only some parts of the image? Link to comment Share on other sites More sharing options...
XekeDeath Posted February 20, 2014 Share Posted February 20, 2014 Yes, scaling does effect the visual quality of an image.You can look into cropping it, like the preloader bar in the base example template, but that may have some undesirable qualities such as changing all health bars at once.You can also investigate masking, but I haven't looked at that enough to tell you much about it. I'd go for a single colour image, with the source being as big as it can be, and scaling down from there. Or, use a graphics object and just draw solid fill rectangles. opendevcode 1 Link to comment Share on other sites More sharing options...
turnA Posted February 20, 2014 Share Posted February 20, 2014 I suggest you use cropping.Sample code:var healthbar = this.game.add.sprite(0,0,'healthbar');healthbar.cropEnabled = true;healthbar.crop.width = (character.health / character.maxHealth) * healthbar.widthJust one limitation though, the crop is applied on texture level. So all Sprite using the same texture will be cropped.Useful only if you have one healthbar to show kay and opendevcode 2 Link to comment Share on other sites More sharing options...
1-800-STAR-WARS Posted February 20, 2014 Share Posted February 20, 2014 Here's a little snippet for graphics based healthbars that go from green to red as health gets lower (copied straight out of a game and minimally edited for context so hopefully it makes sense)this.healthbar = game.add.graphics(0,0);this.group.add(this.healthbar); // this.group being a pre-initialised group for this entity...this.hp = 20;this.totalhp = 20;this._lasthp = 0;if (this._lasthp !== this.hp) { this.healthbar.clear(); var x = (this.hp / this.totalhp) * 100; var colour = utils.rgbToHex((x > 50 ? 1-2*(x-50)/100.0 : 1.0) * 255, (x > 50 ? 1.0 : 2*x/100.0) * 255, 0); this.healthbar.beginFill(colour); this.healthbar.lineStyle(5, colour, 1); this.healthbar.moveTo(0,-5); this.healthbar.lineTo(config.tileSize * this.hp / this.totalhp, -5); this.healthbar.endFill();}this._lasthp = this.hp;Here's utils.rgbToHex:rgbToHex: function (r, g, { return "0x" + ((1 << 24) + (r << 16) + (g << 8) + .toString(16).slice(1);}(I think there's already a function somewhere in Phaser to do that part but when I wrote the code I wasn't aware of it) Also config.tileSize is, predictably, the size of tiles in px (this was a top down game) but you can specify whatever width you want the full bar to be there. This was written a while ago so I have no idea if it works for later versions of Phaser but it's fairly simple so it should do. amuseum, ekstrakt, L2L2L and 1 other 4 Link to comment Share on other sites More sharing options...
Unkrass Posted August 8, 2014 Share Posted August 8, 2014 Do you really need this line? It worked without that on my project.this.healthbar.endFill()Btw: where do these methods (beginFill/lineStyle etc.) come from? I can't find them in the phaser docs and neither in JS documentations. Would be really helpful to have explanations like in the phaser namespace doc. Link to comment Share on other sites More sharing options...
MichaelD Posted August 8, 2014 Share Posted August 8, 2014 I'm using width, I have a sprite object with width = 0;Then I add some width to it to show it grow or reduced You can apply a percentage to show how much width you want to reduce like: obj.width = obj.width + (damagePerc * obj.maxWidth); // damagePerc can be any percentage like 0.1(10%), 0.5(50%) Link to comment Share on other sites More sharing options...
beeglebug Posted August 8, 2014 Share Posted August 8, 2014 Rather than scaling or cropping, could you not create a horizontally tileable image then use a TilingSprite and adjust the width? valueerror 1 Link to comment Share on other sites More sharing options...
Dumtard Posted August 8, 2014 Share Posted August 8, 2014 Btw: where do these methods (beginFill/lineStyle etc.) come from? I can't find them in the phaser docs and neither in JS documentations. Would be really helpful to have explanations like in the phaser namespace doc.pixi.jshttp://www.goodboydigital.com/pixijs/docs/classes/Graphics.html Link to comment Share on other sites More sharing options...
Gerben Posted August 8, 2014 Share Posted August 8, 2014 -- edit: nevermind -- Link to comment Share on other sites More sharing options...
Unkrass Posted August 13, 2014 Share Posted August 13, 2014 pixi.jshttp://www.goodboydigital.com/pixijs/docs/classes/Graphics.htmlThanks, I was so lost without this! Link to comment Share on other sites More sharing options...
kay Posted August 13, 2014 Share Posted August 13, 2014 I did it with 2 layers of sprites. One is the empty bar, one is the filled. When something of concern happens, I update the value backing the bar and rerender it. This is the spritesheet for the bars.3 bar sprites, empty, life and endurance.Every bar consists of one start and end sprite and a few middle sprites. This is how it looks in the game class Game.gui.Bar x:10px y:10px width:60px max:100 current:100 # the current value of the bar bar-parts: void # the sprites this bar currently contains #constructor (@x, @y, @sprite = id:'bars' start-frame:0 middle-frame:1 stop-frame:2)-> @game = Game.phaser-game @bar-parts = [] # method used by @draw to create the sprites @draw-bar = (x, frame)-> sprite = @game.add.sprite x, @y, @sprite.id, frame sprite.fixed-to-camera = yes return sprite @draw! #updates the tracked value, destroys the bar and renders it new update:(@current)!~> for bar-part in @bar-parts bar-part.destroy! @bar-parts = [] @draw! #renders the whole bar new with the current value draw:!~> used-width = Math.round @width / (@max / @current) @bar-parts.push @draw-bar @x, @sprite.start-frame for i from 1 til used-width @bar-parts.push @draw-bar @x + i * 16px, @sprite.middle-frame if @current is @max @bar-parts.push @draw-bar @x + used-width * 16px, @sprite.stop-frame else @bar-parts.push @draw-bar @x + used-width * 16px, @sprite.middle-frameI like the cropping idea, because my approach doesn't let me use arbitrary lengths.But on the other hand I don't have to hold a sprite for a whole bar. This is from a prototype and should be reimplemented with reuse of sprites. But ATM it works for me. Link to comment Share on other sites More sharing options...
ForgeableSum Posted February 28, 2015 Share Posted February 28, 2015 I like 1-800-STAR-WARS's method. It seems a bit overkill to use an entire sprite for a healthbar. One problem I ran into with 1-800-STAR-WARS's method is that Pixi's lineStyle method changes the line style that Phaser's debug methods use. So you end up with really thick lines if you set it to something like 5 pixels. Even if you use lineStyle on a child sprite, it still affects the parent sprite's debug lines. I'm not sure why. To get around this, I just set the lineStyle width back to one on the sprite. So instead of:if (this._lasthp !== this.hp) {this.healthbar.clear();var x = (this.hp / this.totalhp) * 100;var colour = utils.rgbToHex((x > 50 ? 1-2*(x-50)/100.0 : 1.0) * 255, (x > 50 ? 1.0 : 2*x/100.0) * 255, 0);this.healthbar.beginFill(colour);this.healthbar.lineStyle(5, colour, 1);this.healthbar.moveTo(0,-5);this.healthbar.lineTo(config.tileSize * this.hp / this.totalhp, -5);this.healthbar.endFill();}I did this:if (this._lasthp !== this.hp) {this.healthbar.clear();var x = (this.hp / this.totalhp) * 100;var colour = utils.rgbToHex((x > 50 ? 1-2*(x-50)/100.0 : 1.0) * 255, (x > 50 ? 1.0 : 2*x/100.0) * 255, 0);this.healthbar.beginFill(colour);this.healthbar.lineStyle(5, colour, 1);this.healthbar.moveTo(0,-5);this.healthbar.lineTo(config.tileSize * this.hp / this.totalhp, -5);this.healthbar.lineStyle(1, colour, 1);}That way the healthbar is still 5 pixels wide and debugging lines are 1 pixels (as they should be). Link to comment Share on other sites More sharing options...
jdnichollsc Posted May 8, 2015 Share Posted May 8, 2015 My example: http://codepen.io/jdnichollsc/pen/oXXRMz Regards, Nicholls hoskope 1 Link to comment Share on other sites More sharing options...
ForgeableSum Posted May 8, 2015 Share Posted May 8, 2015 My example: http://codepen.io/jdnichollsc/pen/oXXRMz Regards, Nicholls Thanks for posting this, Nicholls. I like it because it has a container so you can tell what the original health was regardless of what the current health is. What I don't like about though is that it uses a BitMap data object which is not nearly as light-weight as a graphic. jdnichollsc 1 Link to comment Share on other sites More sharing options...
Mar-1 Posted September 2, 2015 Share Posted September 2, 2015 My example: http://codepen.io/jdnichollsc/pen/oXXRMz Regards, Nicholls Your example inspired me to create this little HealthBar ,i tried to make it customizable to fit all needs, i hope that it will be helpful.link on github. jdnichollsc 1 Link to comment Share on other sites More sharing options...
demisephi Posted September 2, 2015 Share Posted September 2, 2015 i made healthbars using scaling sprites in little experiment im workin on http://links.slashflash.pl/rpg let me know how I can do it better jdnichollsc 1 Link to comment Share on other sites More sharing options...
jdnichollsc Posted September 2, 2015 Share Posted September 2, 2015 Your example inspired me to create this little HealthBar ,i tried to make it customizable to fit all needs, i hope that it will be helpful.link on github. Nice Link to comment Share on other sites More sharing options...
ForgeableSum Posted September 3, 2015 Share Posted September 3, 2015 Your example inspired me to create this little HealthBar ,i tried to make it customizable to fit all needs, i hope that it will be helpful.link on github.Unless you have like, only 1 or two characters with healthbars, creating a bitmap data object and updating it for each healthbar is too expensive an operation. I just create a single Phaser.Graphic which contains all of the healthbars for all of the characters in the game world. Here's what it looks like:http://imgur.com/CZs5fwu My current implementation though has the healthbars going down incrementally (like in your example). You can do this with a tween or set interval: var decrease = setInterval(function() { if (intCount === increment) { clearInterval(decrease); } else { defender.health = defender.health - (damage / increment); } intCount++; }, 50); jdnichollsc 1 Link to comment Share on other sites More sharing options...
jdnichollsc Posted September 3, 2015 Share Posted September 3, 2015 Unless you have like, only 1 or two characters with healthbars, creating a bitmap data object and updating it for each healthbar is too expensive an operation. I just create a single Phaser.Graphic which contains all of the healthbars for all of the characters in the game world. Here's what it looks like:http://imgur.com/CZs5fwu My current implementation though has the healthbars going down incrementally (like in your example). You can do this with a tween or set interval: var decrease = setInterval(function() { if (intCount === increment) { clearInterval(decrease); } else { defender.health = defender.health - (damage / increment); } intCount++; }, 50); Perfect! Link to comment Share on other sites More sharing options...
CodeToWin Posted September 3, 2015 Share Posted September 3, 2015 create: function() { healthBar = this.add.sprite(0, 988, 'healthBar'); maxHealth = this.add.sprite(0, 1000, 'healthBar'); healthBar.anchor.setTo(0,1); healthBar.scale.setTo(1, 0.5); maxHealth.anchor.setTo(0,1); maxHealth.alpha = 0.5; healthBar.fixedToCamera = true; maxHealth.fixedToCamera = true;}bulletHitPlayer: function(player, bullet) { this.game.cameraShaker.setupShake(10); bullet.kill(); player.health -= 10; healthBar.scale.setTo(player.health/100, 0.5); if (player.health <= 0) { player.kill(); } }The above is my simplistic implementation of the health bar. The maxHealthBar outlines the full health and is always visible to let the player know approximately what percentage they are at. Link to comment Share on other sites More sharing options...
Recommended Posts