Fill up bars with a unique design

I am currently making an rpg, and i have a UI id really like to use, the problem is the experience and hunger bar are placed in a way i dont know how to code them.


Those are said bars, in unity it would be easy as theres a “fill image” option, but i dont see a way to do it on roblox, any help?

3 Likes

Hello Miniking, could you explain what exactly you want to do? What do you want to code, specifically?

Nik

1 Like

Assuming that the bars are all separate, you should be able to set the UIGradient’s transparency property in a script. It allows you to mask a certain part of the image out. which is what you’re likely looking for. You can generate a number sequence in a script to dynamically change the meter.

yes, id like to know how could i make it so at 50% for example the bar is half filled

any example of what you mean please? would be much easier to get what you’re saying

Create a UIGradient on the image with the following number sequence (for transparency)


Values (time, transparency)
(0, 0)
(0.09, 0)
(.01, 1)

Now change the offset property to a value depending on the stats you want to use. Get the percentage thats 0-1 with stat/maxStatValue and set the gradient offset to it.

You get something like this.
image
image

1 Like

exactly what i was looking for, thank you!
image

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.