Help with GUI scaling

Help and Feedback Scripting Support
#1

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:


https://gyazo.com/089603727cf1174ff8cacf15d5ecd18b

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:

https://gyazo.com/f4d72015f48e7ba70e7c292597ae3e93
https://gyazo.com/064bf681c73e82dba09d335532fbc8a5

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
#2

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

1 Like
#3

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:

#4

This should help.

1 Like
Can you go in some type of gui mode so you can see the whole screen
GUI Won't Scale Properly [Still need help]
#5

This happens with that plugin lol: https://gyazo.com/a134a73f171e2f8f41576a346ecbd8aa

#6

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

#7

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

#8

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 UDim2.new(.5, 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!

2 Likes
#9

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

https://gyazo.com/d44d5ef31fb9ea39713a0ea34716a062

Now I just need to fix picture annd name

#10

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

#11

Thsis happens when I apply the rescale GUI plugin… any help to mantain same size but without changing scale?
https://gyazo.com/afba6dd6f44ae320ede330a7e669467f

#12

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

#13

https://gyazo.com/44ee2b5db7cec4a67c5f5f125f5b90b3 :frowning:

#14

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

#15

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

#16

Just use the UIAspectRatioConstraint object in the main GUI frame.

#17

looks fine but it doesnt keep frames, look:

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

#18

Use scale on the frames and make sure they have their anchor point set properly, could you show me their propertys?

#19

https://gyazo.com/00bde12e0cd6fab5b9a1f62f43b9760d
https://gyazo.com/21571d56777ec93c3893a0039b3ac743
https://gyazo.com/7182ffeb405c636e3b7dda54303cba74
An example of 1 rectangle…

#20

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.