How would I achieve this?

Help and Feedback Art Design Support
#1

Fairly simple question, how would i make the red frame only be inside the heart outline, So if its outside its not visible. I would like this for a health ui
image

#2

I would do the following:

  • Download the image (if haven’t already)
  • Open an image editing software (I use GIMP)
  • Set the dark area to white so it can be recolored from studio
  • Export as a transparent image
  • Upload to Roblox
  • Edit the ImageColor property of the ImageLabel to red
#3

the fill has to be an actual ui element so that i can scale it in accordance
to the players health.

#4

I see what you’re trying to do now. Have you tried using a UIGradient?

#5

ui gradient changes the color of the hearts outline

#6

Oh, the simplest thing I could come up with then is to create multiple images of different fractions of a heart.

#7

that would require 100 images for every possible player health

#8

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.

#9

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

#10

image

You want it like this, but reversed, right?

#11

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

#12

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

#13

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

#14

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:

#15

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

image

Gradient configuration:

image
image715Ă—344 102 KB

1 Like
#16

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.

#17

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

#18

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

1 Like
#19

how did you make the ui only inside the heart

#20

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