Issue with custom health bar UI gradient

Hey there,

Recently I have been attempting to create a custom health and health bar system. But I have run into a problem:

I am using a UI gradient to scale the health bar, as I am using a weird shape, however, the UI gradient makes the bar become completely vertical, which is not what I want as the bar I am using has slanted edges.

I naturally tried to rotate the UI gradient, but this makes the values very strange to work with, as you can see in the video that I linked below:

I know I could also do some math to work out the difference and then adjust it accordingly, and in an earlier prototype I did do this, but there must be an easier way?

Any help would be greatly appreciated!

1 Like

maybe use another layer to keep the bar slanted so instead of changing the offset of the green piece. maybe try setting the offset of the grey piece

Sorry, could you elaborate on this? Iā€™m not really sure what you mean.

image
heres your background
image
Make sure background colour is green instead
image
Check clips descendants
image
place image or frame below to represent the grey area
image
And now you can control the grey area of your health bar

How would this solve my problem though? I want the green area to be slanted without the offset value of the UI gradient becoming weird (i.e (-0.5,0) at 0 rotation is the same as (-0.2,0) at -27 rotation)

i thought the problem was that the ui gradient was forcing it to be non slanted. So you couldve used the other piece of the bar that doesnt have a gradient on it to control so you dont have to even deal with it.