How would I achieve this?

[talis783 (Repliz)]

that would require 100 images for every possible player health

[WaffleLover_4000]

Not really. It would probably require ~5. The different hearts could be duplicated rather than have one for each health level. Similarly to how it’s done in Minecraft.

[talis783 (Repliz)]

i mean the red part gets closer to the top with the % of health the player has, so 100% is fully read, 50% is half and so on, i could make like 10 images and round it to the closest however

[WaffleLover_4000]

You want it like this, but reversed, right?

[talis783 (Repliz)]

i want the inside of the heart to be being filled from bottom to top

[Brylan_Leske (Brylan)]

Create a filled version of the heart icon, white, and use a uiGradient on it.

[talis783 (Repliz)]

i dont work with ui often, could you explain how this would work

[Solar_Eos]

If you are talking about filling the image, no, you can’t do it in Roblox.

Roblox also doesn’t support UI masking, so your only option is to make 2 images: the outline, and the fill.
You then composite them together in Roblox to make your health UI.

As for making it fill, you use UIGradients, and I’ll quote myself from another post that had this problem:

@Solar_Eos

A good alternative is to use UIGradients, where you have 2 colors but you make them “fade across” really quickly. The idea is to make sure the “fade” is unnoticeable, so you get a crisp edge between the colors, which can then be adjusted during runtime to make a good resource bar.

Keep in mind though, that changing colors for a UIGradient during runtime can be expensive.
If performance is a concern, you may want to use UIGradient.Offset to adjust the position of the edge instead.

I also hope the images are (or will be) white, or this idea is not going to work well.

[WaffleLover_4000]

I’ve got an idea on how this would work, I made this with two images from the toolbox.

Gradient configuration:

[Brylan_Leske (Brylan)]

Use whatever tool you used to create the outlined heart icon to create a filled version, solid white. Then use the UIGradient on that.

The reason the UIGradient wont work on the outlined heart you have is because it only has an outline to color in, if the image is filled, it can color the whole thing.

[talis783 (Repliz)]

would this allow me to change how much of the heart is filled in

[WaffleLover_4000]

A gradient would allow you to change how much the heart is filled in.

[talis783 (Repliz)]

how did you make the ui only inside the heart

[WaffleLover_4000]

It’s another image that’s takes place of the transparency inside of the heart

[talis783 (Repliz)]

i dont understand, i dont work with ui

[WaffleLover_4000]

So basically, the inside of the top heart image is transparent (see though), and there is another heart underneath the heart that doesn’t have a transparent inside.

[talis783 (Repliz)]

i ended up with this, how can i make only the ui that is inside the heart be visible

[WaffleLover_4000]

There’s supposed to be another image label underneath that heart decal that’s the shape of the heart.

[talis783 (Repliz)]

i got it thanks

dsafsaaaadaffafafs