Need Help With Clip/Mask UI Components

Help and Feedback Art Design Support
, ,
#1

Hello all, I come asking for some help on a matter which has kept me up for 7 hours straight staring at my screen and scratching my head trying to figure this out.

Basically I am trying to make a progress bar by clipping part of the image to hide it. This is the end effect I am going for:

https://gyazo.com/bd855eeb4e40b4162b8f74d98c893c87

However this is currently what I have:
https://gyazo.com/5e9a2f9edad8d8418da310c1034c11af

I am currently using the Scale Option for Size and Position for each UI Element. There was a thread about this before but the user having the issue ended up using Offset for the solution. I am looking for a way to get around that as using Offset makes it so that specific part of the UI does not properly scale to all devices/screen sizes as I need it to. If anyone knows how to fix this/get around it or have any suggestions please let me know.

3 Likes
#3

I believe this is what you’re trying to achieve:

Clip.rbxm (3.3 KB)

Just move the Frame* into where ever it needs to stay and change the image to your green circle.

#4

You can put the image into a ScrollingFrame, however I haven’t checked the attachment on 1st comment try that first.

#5

Make a frame covering the entirety of the circle, enable ClipsDescendants, tween the position of the green circle out of it and/or change the frame w/ ClipsDescendants’ size

#6

I’ve covered this technique in the past for the more general case of regular loading bars, but it’s easily adaptable to this case: How would I mask an image on top of another like Bubble Gum Simulator? - #6 by Elttob

Simply replace those rounded corner frames with your images, and you’ll be good to go! There’s a full explanation of how it works included too. :slightly_smiling_face:

2 Likes
#7

Thank you so much! Works like an absolute charm