How would I mask an image on top of another like Bubble Gum Simulator?

I am creating a loading screen for my game, and I have seen in various games but the one I can think of off of my mind is this one:

I’ve seen another thready about masking images on top of eachother but I didn’t find anything there that would fit this: Progress Circle UI Element

If anyone knows a way to do this please let me know because I am very confused.


The logo text is probably a PNG with an alpha channel with the pink layered behind it.

1 Like

I believe you’d be using one imagine within a frame and using the clipsdecendant property and then tweening the frame to progressively clip out the primary colorless image. I’m not at home and haven’t used that property in like 2 years, so if you don’t get a good answer before I get home, I can probably mock up a quick demo of it.

1 Like

I’ve attempted this but the colored image doesn’t sync up with the greyed out version.

I see. Just leaving work, so I’ll try and helping once I get home if someone else doesn’t beat me to the punch. May we see the progress and code that you had currently for tweening a UI with a ClipsDecendants frame?

You can use the same method as I outlined in a previous post. You’ll just need to change the images to be regular images rather than sliced images.


In general terms, we’re looking at ClipDescendants. This causes other UI objects’ visibility to restrict themselves to the UI which has ClipDescendants enabled; the UI object must be a descendant of the UI which has ClipDescendants.

Quite easy, in my opinion. Either you could do:

  • Scaling the filling bar with anchor point set 0, 1.
  • Moving the filling bar from bottom to top, Position = 0,0,0,2 to 0,0,0,1.

Of course, you have to use TweenSize or TweenPosition. Choose any method that is comfortable for you.