Health Bar Gui help

How can I make a health bar like this?

I have some trouble making it because it’s not a straight line.

1 Like

I believe you can use sprite sheets in order to create animations with UI’s that are shaped like this. Frankly, I don’t know much about how sprite sheets function within Roblox, so perhaps some research on your side help you.

1 Like

Sorry if this off topic but are you making a sao game?

No, it’s a hunter x hunter game but I really like their GUI.

1 Like

If you use layers, I could think of this:

Try to make a transparent layer and under that layer, add the green UI bar and in between, the black outline.

Try to experiment with layers because I’m sure there’s this thing where you can add something under a transparent layer and the transparent layer will cover the layer below it.

Another example:
Let’s say red square is on top of green square and red square covers 50% of green square. Now if we make red square transparent, green square is still 50% covered by the now transparent red square.

Just my idea but yeah, I could imagine this.

1 Like

Yes I know what you mean but I don’t know how to make that because if the layer on top is transparent you’ll just be able to see through it

There’s two ways of using transparent layers.

First one is that anything under the transparent layer is visible.

Second one is that anything under the transparent layer is not visible ( which is what you should try to achieve ).

I am not sure how to do this but you should try to research about that as that’s just my idea on how it could be done.

How I’d do this is by making an image of the Health unit bar, black out the background(so the background isn’t invisible), place the image into a scrolling frame(so it can disappear when moving out of the box) and then setup the x position of the image to move based on the percentage of health the player has.