Squashed GUI | Why?

Hi!
Recently , I’ve noticed that if I open the output window my GUI looks quite squashed.
I’ve tried many things including using AutoScale Lite’s built in features, Tried adding a constraint but again , it still looks squashed.
I use an ImageButton for each GUI individually.
Could anyone help me ?
Without the output window open:

With the output window open:

6 Likes

It’s possible you misused AutoScale’s constraint tool or you have your UI organized poorly. You may have to tweak it a bit to achieve the wanted result.

Hi!
Thanks for replying.
I’ve never really used UI constraints.
I tried adding one now to one of the GUIS , here’s how it looks like with the output window open:

How can I scale it properly?

1 Like

As far as I know, the easiest way to prevent squashing is to set all the gui elements’ position to offset, and size to scale. I believe AutoScale Lite has functionality for that.

1 Like

Did this to two of them.
Doesn’t seem to be working , here’s what happened.

1 Like

You shouldn’t be doing it individually, you should do it to the whole screengui.

1 Like

Insert a UIAspectRatioConstraint in each of the gui to prevent squishing and set its AspectRatio to 1 meaning 1:1 i.e square.

1 Like

In the button’s parent frame, add a UIAspectRatioConstraint and set the aspect ratio to 1. Resize the scale as desired. Set the position to (0, 0, 0.5, 0) and its anchor point to (0, 0.5). Position its children using scale. Its children should respect their parent’s aspect ratio and scaling.

It’s important for the buttons to have a parent frame, and be positioned relative to its parent frame, so both size and position are properly scaled. You may notice elements overlapping each other/getting further apart from each other without relative positioning.

You can also achieve this behaviour without a UIAspectRatioConstraint and by setting the parent frame’s size constraint property.

While offset has its use cases, avoid it for creating responsive layouts.

1 Like

image
This is with the output open.

Thank you ! it worked !
How do I adujst the location of the textbuttons so they will be on the left side (no space at all) of every player’s screen?

You can make a frame the size of the buttons with a UIAspectRatioConstraint and insert a UIListLayout in it. Then add all the buttons in the frame and set the size of all buttons to {1,0},{1,0}

Thanks ! anyway of doing it without a frame?

For simplistic sake do it with the frame or else its all manual.

1 Like

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.