How would I pull this off?

[D0omspire (doomspire)]

I am working on a game with a Lantern & Oil based system. The oil slowly drains out while having the lantern equipped.

I want to make the bar look more stylized instead of a rectangle

I want to the edges of my rectangle to be triangular instead of blocky at the end.
I tried creating something in photopea (like photoshop) but ClipDescendants didn’t work.
The fill bar just protrudes and then cuts off from the image.

How do games pull off this UI?

[cuberoot5 (lohak)]

Upload a custom image of the shape you want, and then use a UIGradient with a TransparencySequence, and change the offset from there.

---

Here’s an example:

[bluebxrrybot (blueberry)]

If you utilize 9-slice on images, you can create this effect.

https://create.roblox.com/docs/ui/9-slice