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.
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.
You can enable “ClipDescendants” on that frame so it removes the corners.
I already tried that but the heart is a square frame so it doesn’t change anything
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:
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.
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.
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?
It would look off-center if the heart is lob sided (not sure)
But a perfect circle seems to work (kinda)
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)
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
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.