How would I make a loading screen fit without being stretched?

Help and Feedback Scripting Support
#1

So I’ve got a loading screen but I don’t know how to go about making it cover the entire screen but not stretch to do so. What method do people use to do this? If I use a constraint it won’t cover the entire screen on all devices that aren’t the same shape as mine.

#2

Use the scale value of the UDim2 value and make sure you enable IgnoreGuiInset on the ScreenGui.

#3

That’s what I naturally do but then the gui stretches to fit the screen and it looks bad.

#4

You should probably use a UIAspectRatioConstraint to ensure that it fits the screen but maintains its size ratio.

1 Like
#5

By constraint I meant a UIAspectRatioConstraint (sorry for not specifying what I meant by constraint) I’ll give an example of what happens

The fact that it maintains its size ratio is the problem as all devices are different shapes (some are long like phones and some are more square like tablets)

#6

Before I propose my solution, I would like to note that this is a result I came up with using my meager knowledge and playing around with interfaces for a bit. In all honesty, I’m not even sure if this is what you want, but to my understanding it looks like you want that image to stretch replicate on the X axis and stretch on the Y axis. I should note that your image needs to appear repeatable to utilize this effectively, and there may be additional optimizations or methods I have completely overlooked.

  1. Make the image span across the entire screen (UDim2 {1, 0}, {1, 0} with XY size constraint)

  2. Set ScaleType to Tile. This causes the image to replicate when accommodating for unoccupied space within the bounds instead of stretching a single instance.

  3. Create a localscript to change the size of the tiles every frame. You may only need to do this once as opposed to every frame for mobile devices since they can’t resize their application (to my knowledge). Here is a rough idea of the code:

local image; --variable containing reference to image object
game:GetService'RunService':BindToRenderStep('loadGui', 0, function() --highest priority every frame
	image.TileSize = UDim2.new(0, image.AbsoluteSize.Y, 1, 0); --since we cant constraint the x axis to match the y axis for this specific property (to my knowledge), we'll just set the x size to be the absolute depth of the entire image object to achieve completely square tile. you can multiply that value to achieve a specific ratio i guess
end)

And there we go. I’ve tested it and it appears to work as I’ve intended it to:

image
image1514×515 93 KB