Cropping UI elements on a billboard?

Hi, and thanks for reading in advance.

I’m attempting to use this little indicator to demonstrate progress towards building specific game-related structures. The outer gear spins - simple enough - but my goal is to get the inner circle to fill up from the bottom as completion progresses. Obviously, I want to do this without the circle leaking outside the gear borders in such a way that it appears to be a circle forming, rather than simply shifting position. I’ve fiddled around with ImageRectOffset and ImageRectSize, but they aren’t proving to be of any use seeing as I’m not using direct pixel offsets and am instead using scaled sizes on every element contained within the UI. Setting either property to any value causes the circle to disappear entirely, regardless of the ScaleType parameter. Crop seems to somewhat accomplish what I’m after, but I need to find a way to shift the image within the label without actually repositioning the label itself.

If anyone knows how this can be done, I’d appreciate your help. Thanks!

1 Like

You are trying to have the white circle fill up?

Yup. I’ve tried using ClipsDescendants and just disproportionately shifting each element, but billboards have a nasty habit of causing elements to disappear when using scaled coordinates above 1 or below -1.


https://gyazo.com/8c2b1b33de2f4d007441866956885e63

Here is some basic code to get you started. The 250 is significant because the circle image is 250x250 pixels. Make sure to set that to the size of your image.

2 Likes

OP’s Originally had a scale one, i’m not sure why you’re offering a Offset solution when there is actually a Scale possibility :

edit : my mistake for not properly realize RectSize is a offset selection that can also be affected by AnchorPoint, as i don’t use it at all on my own version.

2 Likes

It does use scale. I don’t know why you think it uses offset. UDim2.fromScale()