0
\$\begingroup\$

I am trying to create a health bar that collapse symmetrically to the centre. The color palette of my game is minimal and the health bar is only one color that does not change with size. I am new to Unity and am not sure how to achieve this.

This video uses a GameObject with an Image component, adds the health bar sprite to the image, makes the Image type fill and then changes the fill amount from the script.

I have two questions for my particular case,

  1. I would prefer not to use an image. Since the bar is one color I can use color selector to make the bar, but then it does not have the fill type. Is there a way to do using only color?

  2. The the bar is anchored at one end left or right. I want to anchor it at the centre. One work around is to use two objects side by side and fill them in opposite directions to get the desired effect. Is there a better way?

\$\endgroup\$
  • \$\begingroup\$ Do you want it to work in 2d, in 3d or on a UI canvas? \$\endgroup\$ – Philipp Dec 7 '19 at 10:57
  • \$\begingroup\$ I am using Unity 2d and trying to implement it on a UI canvas. \$\endgroup\$ – twitu Dec 7 '19 at 11:09
0
\$\begingroup\$

tl;dr: control the size of the health bar by changing its scale.


Using an UI Image is just the easiest and most lightweight way to get Unity to fill a rectangular canvas area with colored pixels. So it's the optimal thing for your use-case.

If you do not want to draw a proper health bar image yet, you can simply create a new UI image and not assign any sprite asset to it. If you leave the source image blank ("None (Sprite)"), then Unity will visualize it as a solid color rectangle in the Color you assign to the Image component in the inspector.

If you want to do a health bar which fills up and depletes, then you should first create the background as a black image and then the filling as a child of that image in the color you want. Use the Width and Height of their Rect Transform to control their size. Make them the same size, or make the filling slightly smaller so you get a visible border around it.

If you now want to change the fill-state of the health bar, do so by manipulating the scale X of the filling between 1.0 (full) and 0.0 (empty). If you already have a script which manages damage, then you might do it from there. Or you can create a new script which references both the transform of the health bar filling and a game object, checks the health of the game object in Update, and calculates the new size for the health bar filling.

The parent health bar: Health Bar The filling (set to 65% full by changing the Scale.X): Filling

Bonus: Controlling the fill direction

You can control the direction from which the health bar fills by changing the Pivot and Anchor in the Rect Transform of the child. The default value (both 0.5) already gets you the behavior you describe (collapsing to the center). If you want it to collapse to the left, for example (like most health bars do), set the Pivot X to 0.0 and the Anchor Min X and Max X to 0.0. You will have to correct the Width and Pos X afterwards because Unity might change those during this process.

Variant with health bar collapsing to the left: Filling left

\$\endgroup\$
  • \$\begingroup\$ Thanks a lot. Works exactly as needed. However I have been warned about using scale, because it might give weird behaviour with different sized phone screens. Your thoughts on it? \$\endgroup\$ – twitu Dec 7 '19 at 12:26
  • \$\begingroup\$ @twitu I don't know what exactly you read about screen scaling, but in this particular use-case it shouldn't matter because the scale is relative to the scale of the parent object. In general, whenever someone tells you that you always should or always avoid something, it's more important to understand the underlying reason than to just accept it as an universal dogma. \$\endgroup\$ – Philipp Dec 7 '19 at 12:30
  • \$\begingroup\$ This method fails in a particular case. I added poison effects so that health decreases continuously with time and in this case the color of the bar isn't rendered, although the bar keeps becoming smaller with scale. I am using InvokeRepeating to call a function at regular intervals which decreases the health. \$\endgroup\$ – twitu Dec 13 '19 at 13:15
  • \$\begingroup\$ @twitu I have no idea why it wouldn't work in that case, but I could think of several things one could do wrong when trying to implement this. Can you please open a new question where you explain the problem in proper detail and post the code you use to decrease the health? \$\endgroup\$ – Philipp Dec 13 '19 at 13:39
  • \$\begingroup\$ created a new question at gamedev.stackexchange.com/q/177758/134198 \$\endgroup\$ – twitu Dec 14 '19 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for?Browse other questions tagged or ask your own question.