Creating a gauge UI mechanic

Hello, (this is my first time posting so not very familiar with how things work here) straight to the point I’m making a gauge for my Flashlight. I originally followed a health gauge tutorial to do this part and it works, but now I’m trying to recreate it with a Imagelabel since I have new assets for it.

I was wondering if I can get some of your opinions on how I can approach this, my issue is, I have to make the image fill up and out whenever the tool is on, however when I tried doing a simulation of how I used to do it, I immediately realize that I can’t use the same method I used on the tutorial, which just basically shrinks the size of the frame(green bar), I’d like to get feedback on how i can approach this situation.

image

I think there is no way of doing it with the roblox engine

You can use UI gradients to do the color.

Just have 0.000 be white, 0.001 be grey and 1.000 grey.

Then, adjust the X offset instead of the size and you’re good.

3 Likes

Thanks this might actually help with my issue.

Not sure if I fully understood if this is similar to what you were asking for.
Code inside the file is commented to help guide!

FillUI.rbxm (4.7 KB)
RobloxStudioBeta_iiBqCZTPlE

2 Likes

These UIs look good! I’m pretty sure you can use gradients of some sort to do the job.