Curved Healthbar?

Help and Feedback Scripting Support
#21

Your ImageRectSize is equal to the size of the image (in pixels, not the size in the studio, the size in the drawing program used to make it. For this example, let’s use 500 by 500 as the image size). ImageRectOffset would be calculated by using the Y pixel size (in this case, it’s 500) divided by the percent change in size from the original size:

ImageRectOffset = Vector2.new(
    0,
    Frame.ImagePixelSize.Y - Frame.OriginalSize.Y / Frame.CurrentSize.Y * Frame.ImagePixelSize.Y
) -- Obviously "ImagePixelSize", "OriginalSize", and "CurrentSize" aren't properties, they're just examples

Here I have an image that has an exact pixel size of 420 by 420, with the frame size being 100 by 100. This means that the ImageRectSize is 420, 420. I will run this code for the dynamic change:

local Frame = game.StarterGui.ScreenGui.ImageLabel
Frame:GetPropertyChangedSignal("Size"):Connect(function()
    Frame.ImageRectOffset = Vector2.new(
        0,
        420 - Frame.AbsoluteSize.Y / 100 * 420
    --[ Frame.ImagePixelSize.Y - Frame.OriginalSize.Y / Frame.CurrentSize.Y * Frame.ImagePixelSize.Y ]--
    )
end)

2 Likes
#22

For example, the curve (in the viewport at least, again, you’ll need the size of the actual image), is 125 x 426. To fill half of the progress bar, you will take the Y size (426 pixels) and multiply it by the percentage of health.

I tried putting the offset to the size of the viewport, but it just dissapears like this:

#23

So I need to use the size of the actual image from photoshop? Rather than the size in the Studio properties window?

#24

Sorry, I was using the image’s size in the viewport (from the yellow label) as a reference. You will need the actual size of the image, as said above.

This is correct.

#25

Okay, so the size in Photoshop is

Width - 154

Height - 573

but when I put it in properly, it still dissapears…

Sorry if there’s something I’m not getting, try to bare with me :sweat:

#26

Leave the X as 0 in ImageRectOffset. You’d also have to resize the image as well.

#27

Couple of things here. ImageRectSize should be holding {154, 573} in the approach they have outlined, you then use offset to realign the image.
A simpler alternative approach is ScaleType Crop and Size (Scale - in your case Udim2.fromScale(1, fractionHere))

#28

Use a UIGradient object. Rotate it 90 degrees, create a harsh transparency gradient, and set the offset in your script according to your health. Tweak the gradient if needed.

1 Like