Health Heart UI

[michalll212 (Dragoneq)]

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.

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

[MikeartsRBLX (Verdancyx)]

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

[michalll212 (Dragoneq)]

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

[thedauser (dauser)]

Image Clipping Module

One of my smaller projects, but useful enough to share. This module is used to quickly create an image with a clipping mask. It works using ViewportFrames, MeshParts, and Decals. [image] The module gives you those top images. With a tiny tweak, I made it show what it’s doing on the bottom row. It places your image as a Decal onto a MeshPart, and puts that into a ViewportFrame. Once it’s done, nothing ever moves, so it’s roughly the same performance as ImageLabels. API: local ImageMask …

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

[Solar_Eos]

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:

How could I have a ImageLabel that Clips on a corner?

ClipDescendants works exclusively on the bounding box of any GuiObject - it doesn’t care about the image itself. 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 perform…

[Solar_Eos]

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.

[realmile (mile)]

Need help with health bar regarding UI corners

You would have a frame which is your background to the bar, inside of it you will have another invisible frame and inside of the invisible frame you will have another frame which is your fill, background and fill will have UICorner and the invisible frame will have ClipsDescendants on true. Now when you are scaling the fill frame, instead of scaling you will be moving the invisible frame backwards and fill frame forwards (this makes it so the fill frame stays in same spot, but because invisible …

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.

[lonely1and1afraid (Illusia)]

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:

The Ultimate Guide to Custom Loading/Health Bars

Hello everyone! In this brief tutorial I will explain how to get a loading bar/health bar effect like these: [image] [image] [image] And [image] HOW TO CREATE ROUNDED LOADING BAR Firstly, create a Frame called “FrameBase”. Put a UICorner in it to make it rounded. Change the BackgroundColor3 to whatever color you want. [image] [image] Next, insert a Frame called “Clipping”. [image] Set these properties on this clipping frame: [image] [image] [image] Now, insert another Frame …

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.

[snoobi77333 (CallMehSnoob)]

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

[Aqua_Turneur (Aqua)]

Create an image of the filled heart, then as @lonely1and1afraid 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

[neviquatro]

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)

But a perfect circle seems to work (kinda)

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)

[michalll212 (Dragoneq)]

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

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