Morning/Afternoon everyone!
I’m attempting to create a curved health bar using the clip descendants method discussed in this forum prior. However, I’m noticing that it’s not at all possible to do so with a curved image?
I was wondering if any skilled scripters have managed to find a way to do this? Please let me know thanks!
If the bar still fills either vertically or horizontally, you can use ImageRectSize and ImageRectOffset to control the clipping of an image manually.
Basically, if you want it to be 60% full, you resize the object to be 60% size, and adjust the ImageRect properties to only show the bottom 60% of the image.
If you fill radially, then this won’t exactly work.
Wouldn’t something work with if you have that overlay above, but then the blue area which I take indicates the health is empty. So that means you can make a frame like this.
If you put said frame under the overlay, and tween it, and use clip descendants, would that work?
You can tween the progress bar, and every time someone dies, take some of the bar away, whilst there being a IntValue which also gets taken away, and when the IntValue hits 0, you kill the player. Pretty simple!
I see, so in order for it to work properly the health bar would need to stand vertically and not have a curve in it?
The image can have a curve, but it will still only fil bottom to top, or left to right. It won’t rotate with the curve of the image.
Unfortunately, it’s trying to get the bar to fill with the curve. As it stands, it just fills with the image cut off point.
That’s quite unfortunate. Thanks for filling me in.
You’ll want an image of the fill bar, not simply a frame.
You need to put the frame behind the curve using ZIndex and Make the actual curve filler transparent
Is it possible to resize the bar without it distorting?
Yes, this is what you use ImageRectSize and ImageRectOffset for. You can control which portion of the image you want to render.
Or you could have two frames and move the one respective to the health change, for example if the Health goes from 100 → 80, only the top would move, but 100 - > 25, both would change
What would to right way to utilize this be? It seems to be extremely finicky
It takes some knowledge and math experience to get it working right. These properties use integers for pixels, so you’ll need to know the size of the image that was uploaded.
For health, you’ll set the ImageRectSize to
imageSizeX, imageSizeY*percent
and set ImageRectOffset to
0, imageSizeY*(1-percent)
oh great, math is not my strong suit lmfao. ill do my best and let you know how it goes
What’s is this referring to? ImageSizeY x Percent? If so, Percent of what
I think they mean the percent that the bar is filled up. For example 60/100 health is 60%
I don’t think so, it’s doing this:
As @VitalWinter has already stated, you need the size of the image that was uploaded. From here, you alter the ImageRectOffset to the image’s size, multiplied by the percentage of health the player has.
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.
426 * (humanoid.Health / humanoid.MaxHealth
As you’re resizing on the Y axis, the X component of ImageRectOffset is set to the image’s width in pixels (and remains unchanged). Your ImageRectOffset property should look like 125,213 in the event the player has 50% of their health.
213 comes from 426 * 0.5.
Note: You will also need to change the size of the GUI element to match.
I hope this cleared some things up and my information is accurate.
