Health Heart UI

I’m trying to make a Heart UI for Health in game, but I don’t know how to remove the corners that are in.

image

I’m not really good with the GUI so I hope someone could help me.

3 Likes

You can enable “ClipDescendants” on that frame so it removes the corners.

2 Likes

I already tried that but the heart is a square frame so it doesn’t change anything
image

2 Likes

EDIT: The module is not exactly what you need, but you can tweak it to support UI elements.

ClipDescendants won’t work at all because it only clips around the bounding boxes, not the image itself.

Instead of a square frame, you should create a heart image that will serve as your health UI.

I’m also going to assume you want the heart itself to “scroll” up/down in size based on how much health the player has, in which case I have an answer for that problem already here:

1 Like

Also, please don’t actually use the Image Clipping library that someone else linked - not just for this, but for anything, really.

The way it works is by projecting the image onto a MeshPart, and then displaying that MeshPart into a ViewportFrame on your screen.

All that alone should sound expensive already, but the performance gets even worse in your case, considering your health UI is dynamic (player health constantly changes).

Not to mention it won’t work very well in your usecase.

Just use UIGradients. It’s cheaper, faster, and less of a hassle.

1 Like

You can use this same method but with images, you would just need to have a filled heart image which you would move up as you move frame with ClipsDescendants down.

You can use UI Gradients like so:

Make a GUI Gradient in your image and then setting it’s end keypoint to black, add another keypoint at 0.501 and set it to black as well, add another at 0.5 and set it to white and make sure that the start keypoint is white as well. Now you can rotate the gradient till it fits how you want the bar to progress and then you can modifiy it’s Offset property to move it up and down.

ALTERNATIVELY

You can do a little bit of search to find that this blessing of a topic:

exists!

So basically, before making a topic, do your research. There is always going to be someone who asked a similar question or a tutorial on it.

3 Likes

You could try to design your own in a paint editor program. As that will be the easiest option for now.

Create an image of the filled heart, then as @awry_y said, insert a UIGradient and use the number sequence value of the Transparency property or the color property depending on if you want it to be transparent or have a background

If the heart isn’t transparent inside itself, maybe you could get that same heart and just resize it a bit smaller and put it inside the heart?

How to make it lob sided lol

It would look off-center if the heart is lob sided (not sure)
image

But a perfect circle seems to work (kinda)
image

Proper way:

Make a frame inside the heart and make it transparent and center it:

And make the cloned heart max size and center it:

heart.rbxm (5.2 KB)

2 Likes

That seems to be the best choice, but now about coding…

local fullHP = -0.26 --Y offset for filled heart
local noHP = 0.27 --Y offset for empty heart
local UIGradient = script.Parent.UIGradient

humanoid.HealthChanged:Connect(function()
	local currentHP = humanoid.Health
	
	UIGradient.Offset = Vector2.new(0, fullHP * (currentHP / humanoid.MaxHealth))
end)

I tried doing this but it only goes to the half of heart
image

EDIT: Nevermind I found a solution. Thank you everyone for all replies, I appreciate it :heart:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.