Aspect ratio changes GUI

Hi. I’m making a game, and I decided to add a GUI at the bottom of the screen showing the temperature of a certain element. This is done with a simple TextBox inside of a ScreenGui.
I can get it to look great in studio, but when i test it in a server (with a different screen size) the GUI is in a different part of the screen, where I really don’t want it.
I’ve looked a lot of places for support for this, but I have never really found anything that helps.
I’m very new to UI design, so I would really appreciate the help. :slight_smile:

3 Likes

An important thing to use when designing is Scale (not just Offset). AnchorPoints are very useful, too. When designing, you should use both scale and offset, as they complement each other and do things the other can’t.

You’d want to position it at the bottom by setting its position scale value to 1 – e.g. {0, 0}, {1, 0}
However due to the default AnchorPoint setting, you’d also want to set the Y anchor to 1 so you can see the full object.

1 Like

Thanks for the reply, as it did fix the Y position problem. It did not fix the X position problem though, as it still adjusts improperly with the aspect ratio, despite the fact that I’ve used the anchor points, scale, and offset for the position.

Where did you want it to be placed on the x axis? In the center?

EDIT: What the hell I got the reply just now

Have you read up on the UDim2 section in the wiki? Or this helps explain it a bit too in the Resizing an Element section:

If you want a GUI with a certain aspect ratio, then you should probably use Size instead of Scale, because Scale will go off your screen size which can change with different screens of course.

I know about all that, I’m the guy who wrote the UI design guide here – I’m just unsure of what his issue is exactly.

Also, it’s Offset and Scale, not Size and Scale. Scale is good for getting things in the same abstract position/size independent of screen size (e.g. he wanted something at the bottom, which will always be scale 1).

Yes, I do want it in the bottom center. The problem now, is that it doesn’t stay in the center of the screen when it is resized.

This is a good read.

1 Like

I’ve experimented with those features, and none of them really help…

1 Like

If you wan’t a gui in the center of the screen, put the anchor point at 0.5,0.5 and put both scale X and scale Y in position as 0.5.

1 Like

I do not want it in the center, I want it at the bottom center. When I get it there, it doesn’t stay when the screen is resized.

Show me what your gui looks like :grin:

Okay lol let me open studio

Okay so, put the anchor point X at 0.5 and the Y at 1:
image

And set the position X Scale to 0.5 and the position Y Scale at 1:
image

1 Like

I got this.

You must be doing something wrong, it’s meant to look like this:

I’m not sure what I am doing wrong. Should I show you the size of the object? Also, if you need it here is the path of the object.
image

Here is a place with the same gui, I just inserted a normal frame and edited the size, position and anchor point. (The size does not affect the position)

Gui Example.rbxl (13.4 KB)

Ah, in the picture it showed the anchor as being 0, 1 so I put that instead of being 0.5, 1. I’ll see if that helps.