Hello!
I’m not a UI designer, so I’m pretty lost on how to clip images into ImageLabel borders.
I have a similar black border created, but can’t seem to get the actual health itself to fit in. I tried to layer a separate frame on top, but it won’t fit the shape of the ImageLabel image.
Any help would be great, thanks.
Fro that you will have to create a very very very custom GUI, that’s probably not enough
Solved in another post. Thanks.
Would be great if you linked to post for someone looking at this in the future 
Edit: Thank you
You need to have 2 separate images for the health bar: one for the border (stroke) and the other for the fill. While exporting the fill, keep it solid white (#FFFFFF).
You’re going to have to use an UIGradient for this, so it would be useful to read it’s documentation. Although, to do this you only really need to use the in-game gradient editor and the offset property
Add an UIGradient under your fill image. Now color the health bar as it would look when it’s 100% full.
Now to add in “sharp lines” in the design, you need to first click twice on wherever you want said line to appear. In this case, it’s preferable to do so at the end, and you’ll understand why later.
(Numbered for the tutorial)
Add in the colors for your line in the third and fourth points and the color you’d like the bar to show when it’s empty in the fifth and sixth points.
Then overlap the second & third, fourth & fifth lines as much as you can.
To show the health bar as being full, you have to set it’s offset property on the X axis to something around 0.1, depending on your design.
To show it’s state, HP has to be directly proportional to the X offset, maximum of 0.1 and minimum of -1.
This is at 0.4
And this is at -1 (minimum in this case, though you should really play around with these values)
This will work on any shape, even if mine in this case is a simple rectangle.
I also know that the colors are not that great, but it’s just for the sake of this “tutorial”.
Good luck!
I’d suggest linking the solution like luketeam5 said for people finding this in the future, and marking the post as solved to help prevent confusion.
You can do thing like this, but it’s not easy.
You need create 2 Images:
(I won’t draw good here sorry)
Black is outline, green is inner
So, you should know how place outline, so I’ll tell you about inner system:
Your Inner here is “GreenBar” object. It parented to Inner-cut object, which have clips descendants set to true. So it will cut it. (I used frame with UI gradient, you should use imageLabel) To show hp left, resize Inner-cut. GreenBar should have PIXEL size set, sadly.
I tried doing this however the bar isn’t as accurate. Not sure if it’s something to do with the imagelabel itself or just scaling issues.
Health is at 90, appears full on the health bar.
Seems to me like it’s only noticeable once it’s below 85. Is there a way around this?
Try looking into frame sizes and Image size. Probably, you cutting air. There’s shouldn’t be any transparent pixels on border on image. (maybe 2-3, but not 50-100)
how would I go about making the bar size tween smoother?
