Progress Icons Help

So I need ideas on how to replicate this in roblox

image

basically image clipping and I want to be able to do this without having to have some sort of background border behind the image

I did research and sprite sheets seem to be a option but is there a different method of going about doing this?

this is what I need it for

image

Edit: Figured it out

1 Like

Could you say how you did it for people who might see this in the future?

Put the ImageLabel you want to use inside of a Frame

Enable ClipDescendants on the Frame and make it transparent

set the size of the ImageLabel to the Frames size in offset

change the size of the Frame to clip the ImageLabel

tip (if you want a background place the Frame inside of a new ImageLabel with the same Image as the original ImageLabel and set the color to black/grey etc)
IconClip.rbxm (2.8 KB)

(Scale with code)
if you want the image to scale then make the Frame’s size scale and whenever the absolute size of the Frame is changed update the size of the ImageLabel to the Frame’s absolute size

btw I figured out this method by watching one of crazyman32’s videos

3 Likes

Here’s another way it can be done. I’m not sure how the ClipDescendants method works with scaling, but this method will work fine with scale.

Have a top layer image which is transparent (the shape is transparent, background is filled in). Then they tween a simple frame underneath that and it looks like it’s filling in the transparent part of the top image.

the only issue with that is that it requires a background and only works with a shape of a image and not the actual image its self

Edit: but that way still works well for people who don’t have detailed images and don’t mind or are able to use a background image @mrfergie