How Do I Scale All GUIS Perfectly?

My main question for this topic is how do I scale all GUIS perfectly?

I’m aware of plugins that automatically edit some position, size, and offset properties. (Like the GUI Rescaler plugin.) However, I was wondering how to do this without using plugins.

I’ve reviewed some code, and I have a couple of questions:

  • Does this involve AbsoluteSize?
  • Is there a formula or a way to do this “with math” in a script?
  • Do you even need a script to do this?
3 Likes

You modify the Scaler property of UDim

local x = GuiObject;

x.Size = UDim2.FromScale(.5,.5)
x.Position = UDim2.FromScale(.5,.5)
x.AnchorPoint = Vector2.new(.5,.5);

This will set the Size and Position of the GUI to exactly 1/2 of the width of x and y axis of the screen.

The anchor point just moves the part that it mesures from to half way through the frame.

You don’t even need to script this, you can just enter the values into the properties of the object.

When I try to scale my Frame that is at the top of the screen;


This is what comes out when I play the game;

This seems a bit preposterous , Something that is at a scale of {(1,0),(0.1,0} cant possibly look like the second picture.

Are you sure there isn’t any code that changes this? And are you sure that you are not using Offset instead of Scale?

It would also help if you sent a picture of your properties of the frame just so we have a set value of what you are using for your values.

This is my Explorer Tab;

1

This is my Position Local Script; (I’m aware I’m not identifying PlayerGui, but it still works and I don’t think that affects anything.)

local Frame = script.Parent

Frame.Size = UDim2.fromScale(.5,.5)
Frame.Position = UDim2.fromScale(.5,.5)
Frame.AnchorPoint = Vector2.new(.5,.5)

There is no code that changes this.

Properties: (Click to see all)

That explains the second picture, is the first picture taken in studio test mode or just in studio?

I have one suspicion that may or may not be correct, but it might be possible that when you join it in studio, you may need to add a :WaitForChild() to wait for the actual player to spawn in before it causes the change (This is just a wild assumption)

Other than that, the code should work fine, and like I said above, the code creates the gui in the second picture.

The first picture was taken in studio. I edited it a bit the size a bit, it is now {1, 0},{0.1, 0}
(But that still didn’t change anything.)

I took your idea into consideration and used a wait() to wait for the player to load.

This is my new code:

local LocalPlayer = game.Players.LocalPlayer
local PGUI = LocalPlayer.PlayerGui
local Frame = PGUI:WaitForChild("TestGUI").Frame

wait(3)
print("Changed!")
Frame.Size = UDim2.fromScale(.5,.5)
Frame.Position = UDim2.fromScale(.5,.5)
Frame.AnchorPoint = Vector2.new(.5,.5)

This is the outcome:

(It basically just changes the position, size, and anchorpoint properties to the second photo.)

Don’t use code. Scaling UI within studio using properties is incredibly easy. The images you showed below, you could easily just take the code you’re using, and put that into the default property of the frame.

1 Like

The issue is that the code wont change it until the game is played, so any size constraints you have on the frame will be displayed in studio mode until it is tested.

if you want it to look like the second photo in studio, you have to change the size of the GUI in StarterGui.TestGUI.Frame manually. Click size, then change it to {0.5,0},{0.5,0} and do the same with the anchor point.

Coding wise:
I suggest doing something like this:

local LocalPlayer = game.Players.LocalPlayer
local PGUI = LocalPlayer.PlayerGui
local Frame = PGUI:WaitForChild("TestGUI").Frame

if game.Players:WaitForChild(LocalPlayer.Name) then
print("Changed!")
Frame.Size = UDim2.fromScale(.5,.5)
Frame.Position = UDim2.fromScale(.5,.5)
Frame.AnchorPoint = Vector2.new(.5,.5)

end

This will make it so when a player enters your game, it changes to the correct position that you wanted on the screen/

I don’t want it to look like the second picture. I just wanted it to look like the first picture, but scaled properly on all devices so everyone can see the same thing.

Oh! then just delete the script haha, what you have in the properties is fine, I thought you wanted what was in the second photo.

Just keep what you have ( {1,0},{0.1,0} ) , cause since you used scaling, this will automatically adjust it’s length for all devices (Mobile, different computers ect)

Offset is when you want an absolute value ( one that doesnt change no matter the size of the screen)

You have the right idea though, just continue using Scaling instead of offset

Delete the script. Set its size to {1, 0, 0.1, 0}

Lol, sorry for the confusion! @Revelted @NinjoOnline

Before I never used Scale and Position when editing UI’s, I always used to drag them across the screen. That’s why I made this topic for help on how to rescale them.

I’ll just use properties from now on to scale my UIs, thank you guys for the help! :slight_smile: :partying_face:

2 Likes

When UIs are first inserted, their position is automatically put in scaled units however the size is always in offset units, so when you click and drag, it will keep its position, however if you click and resize , it will resize it in offset units.

Quick fix
I always immediately just type {0.1,0},{0.1,0} into the size bar, this sets it to keep the scale units when you drag to resize :stuck_out_tongue:

8 Likes