Help with GUI scaling

I don’t really get how it works, I have seen some tutorials but its crazy… I mean, u put same values in different objects and doesn’t behave the same. Btw I managed to make it more or less how I wanted, but I want it to autoscale for every kind of screen and it just looks horrible:

I want it to autoscale every element inside the light blue frame so that it looks pretty much the same in different screen sizes but rescaled. This frame has this config:

I need to understand what does AnchorPoint, Size and Position works and how can they variate when the Parent (Frame in this case) has a specific size. Thanks

1 Like

Just to mention that there exsits a plugin which does this work for you, which you can find it here for free:

1 Like

Tried it but didn’t really work. Will try this one… Btw I would appreciate a little bit of explanation of how this thing works :frowning:

This should help.

1 Like

This happens with that plugin lol:

Hmmm can we see the layout of the Guis in properties?

This is how I placed it (3 white rectangles = the ones in Team Selection.
Layout on Main (light blue part) = 2
Layout 3 rectangkles = 0

Alright, lets start from the beginning. First, the difference between scale and offset. Scale is a value between 1 and 0 that scales depending on the size of the window. So, if you set a frame’s position, 0, .5, 0) it will be set to center of the screen. Offset is simply the exact number of pixels from the left or top of the screen. Now, say you make a frame within a screen gui with scale values. That frame will be scaled depending on the screen size itself. Now, say you make another frame within the other. Now, it wont scale to the window, but rather to the frame it’s parented to. Now, we can get to anchor point. Anchor point is just where the “origin” is located on a gui object. For example, the default value of anchor point is (0, 0). This means that the origin is the top left of the object. If you set it to (.5, .5), it’s the exact center of that object.

Now to fix the problem. From the looks of it, there’s three frames that are positioned in thirds of the screen and are centered. So, to do this I would first make the anchor points of each frame (.5, .5) and for the first frame, set the position to (.25, 0, .5, 0), then the second to (.5, 0, .5, 0), then the third (.75, 0, .5). I hope this helps!


Well, thats exacly the explanation I was looking for, and… gues what?

Now I just need to fix picture annd name

I was just wondering how to do It with the user photo so that it just changes X and Y proportionally (100x100---->50x50 in smaller screen for ex) without changing size (or the photo would look horrible). Thx

Thsis happens when I apply the rescale GUI plugin… any help to mantain same size but without changing scale?

You don’t have to worry about that. The reason it resizes is because other people’s devices. You can check the legit size up in the left corner that has a device as its logo :frowning:

And It only does that is cause it uses constraints. Constraints are things for the gui. It resizes the the device size

Its like if its tries to rescale first the left ones and then the right ones… lol

Just use the UIAspectRatioConstraint object in the main GUI frame.

looks fine but it doesnt keep frames, look:

and the triangles goes out of the frame… mb something wrong?

Use scale on the frames and make sure they have their anchor point set properly, could you show me their propertys?
An example of 1 rectangle…

Strange, they are parented to the main frame right?, if they are then a anchorpoint of 0.5,0.5 with a size scale and a set position should work fine. It does for me. You must be using some kind of extra constraint within the actual ui objects themselves.