How would I resize GUIs to fit the screen of mobile users?

One of the most fundamental element of creating a Graphic User Interface. I always see questions like these all the time and the solution is really simple.

Before I get right into it, I’d suggest you take a look into Fundamentals of Graphic User Interface in Roblox It will help you a lot when manipulating small things like this. Nevertheless, I will still explain it here.

UDim2.new(xScale, xOffset, yScale, yOffset)

UDim2 is the Gui property when manipulating Size or Position of a Gui. The UDim2 takes in 4 arguments. The two being x and y Scale Property and the other being x and y Offset Property

What is Offset?

Offset is a type of UDim2 property that takes in values in pixels. This is only useful when you want to specifically position a Gui in a part of a screen.

Let’s say I have a Gui that I want to position. I would type a script something like this if I were to position it at Top, Right of the screen.

Frame.Position = UDim2.new(0, 1000, 0, 0)

You will realize that you would have to play around with the xOffset value until it is at your desired locations. But when you resize the Window or play in a Phone, in your case, the Gui does not change it’s location.

Why?

Because you are explicitly specifying that the Gui has to be positioned at 1000, 0, pixels. No matter what device you are on, the Gui will be at 1000, 0 pixels. No the Gui does not disappear. We simply cannot see it.

How to fix it?

Luckily, Roblox has a property that positions UI elements in Percentage. This feature being Scale. The feature of Scale is to position a Gui on the percentage specified no matter what device you are on.

Par exemple,

• You have a Gui that you want to position at right in the middle of the Screen.
• You would use the following code.

Frame.Position = UDim2.new(0.5, 0, 0.5, 0)

• Notice when you play in Emulator in the studio, it positions it in the center of the screen. This is because every screen has a percent ratio from 0% to 100% with 100% taking the value of 1. 1% is always the furthest portion of the Screen.

Thus to answer your question. Use the property of Scale for this feature. It might take some time to locate it at the position of your preference but It will surely stay at the current percentage specified in every single Screen.

[Note]: Roblox also has a feature called UI Editor which allows you to position your Gui in Scale. This is a handy feature of Roblox if you do not want to manually determine the percentage the Gui is positioned at.

If you still are unsure or have doubts, comment below and I will look more into your Gui.