How Do I Make an Orb-Shaped Healthbar?

[Yorshcyt (Kido)]

Hello people! I wonder how I do to make a health bar this way, does anyone know?

[LadyCelastia (LadyCelestia)]

It’s actually really simple to make. You just need to make 2 ImageLabels orb-shaped, one semi-transparent and one not transparent and red. You have to put the red one’s ZIndex 1 higher than the background Frame’s ZIndex and 1 higher than the red one’s for the transparent one.

For the script, it’s just a simple health bar script, I’m sure that you know how to script one.

The only real challenge here is making/finding all the textures/images you need.

[colbert2677 (ImagineerColbert)]

Sounds like what you want is this:

Rounded Loading Bar

Sure! Here’s my Explorer setup: [image] Here’s the Base ImageLabel, just set up as you usually would: [image] You can position and size it however you like. Nothing crazy about the image settings either: [image] Inside that, I have a frame called Clipping: [image] It’s just an invisible frame with ClipsDescendants enabled, and it’s sized to match the current progress. For example, if the current progress is 25%, the size of that frame will be {0.25, 0}, {1, 0}, where the 0.25 represent…

Essentially, you get both images and put them on top of each other. A container helps determine the sizing of the red orb part while making it visible or not depending on the health value.

---

@LadyCelastia If you didn’t know, Guis had a property called ZIndexBehaviour. With the behaviour as Sibling, ZIndex changes aren’t too necessary. What you described was if Global behaviour were to be used.