Health bar without image collapsing to the centre in Unity 2D

Question

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?

Answer 1

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: The filling (set to 65% full by changing the Scale.X):

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: