I see in many games this kind of loading screen
And since I’m making a game, I’d like to make a loading screen that looks like this, but I have no idea how to do it.
If anyone knows a way to do this please let me know
3 Likes
For something like this, it can be as simple as having two copies of the image: a pink one and a grey one. The pink one is underneath the grey one, and as loading progresses, the bottom of the grey image is slowly cropped away to reveal the pink underneath.
3 Likes
I think it is necessary to use Clip Descendants, not sure
1 Like
Yeah, there doesn’t seem to be an easy way to crop an image while keeping it in the same place without placing the imagelabel within a frame with ClipDescendants enabled.
1 Like
I’ve done this quite a bit. You have an image label in the background. You then have a transparent frame in side the image label with Clips Descendants enabled with another image label (different colors or whatever you want to fill it with.)
So Hierarchy:
ImageLabel1
|_ Frame
|_ ImageLabel2
In the case of this example you gave, this is the settings I would set when making the GUI:
ImageLabel1:
Size = UDim2.new(0,200,0,100)
Frame:
BackgroundTransparency = 1
ClipsDescendents = true
Size = UDim2.new(1,0,1,0)
Position=UDim2.new(0,0,1,0)
AnchorPoint = Vector2.new(0,1)
ImageLabel2:
Size = UDim2.new(1,0,0,100)
Position = UDim2.new(0,0,1,0)
AnchorPoint = Vector2.new(0,1)
Then all you need to change is Frame’s size's scale.y to what you want. Like .5 for half way.
Here’s an image, the red is the imagelabel2.
26 Likes
Thank you, you helped me a lot 
3 Likes
This question has been asked before. @Elttob made a quick tutorial on how to do what specifically Bubble Gum Simulator does. It relies on less hard-coded magic than @Ninja_Deer’s solution, doesn’t use AnchorPoint and contains code.
Essentially, what you aim to do is resize a holder frame to a certain scale and then resize the actual image to a division of 1 over the scale of the holder. So 0.25 on the X of the holder should make the image scale at 4 on the X.
Container: {0.25, 0, 0, 50}
Image: {1/Container.Scale.X, 0, 1, 0}
The above is the formula to be followed to achieve the effect you want.
1 Like
This is actually an interesting approach to undoing the ImageLabel2’s size from the Container. When you are scripting it, you have to do twice the work (which is not much in the first place), but the advantage is that you can change the size of the main image label without worrying about the size of the imagelabel2.
I personally never change the size of the main image label, so I never needed to worry about something like this.
Thanks for sharing, I’ll be doing this in the future if I have a constantly changing mainlabel size
Yeah, that’s pretty much all this is. To compare and contrast the two, it’s essentially looking at revealing an image and undoing the container’s scale.
Why undoing the container size makes for a stronger solution is that you can account for arbitrary Gui sizes and you get a form of abstraction on the system. Here, we get the benefit of resizing rather than repositioning and we modify the container instead of the image.
It’s basically like pasting two images on top of each other and the container controls the size flow. Change the container, reveal more. What’s more, the container will also change when you change the main image label since it uses scale on all ends. Your only numerical dependencies become the size of the original image (up to you what to do there, not really a dependency) and the container size (just have to scale across X or Y by a percentage of your definition).