Scripting HelpersARCHIVE
A little piece of Roblox history. Preserved for everyone, one question at a time.Read about the archive →
✓ ANSWER ACCEPTED

My UI is totally messing up when I load in a real server but in Studio it's fine?

I have a main menu User Interface that looks good in Studio, stays looking good in Studio Test mode but as soon as the screen size changes, whether that be me shortening the Studio Test screen or going into a real server and full screening, everything just messes up its position. I have everything positioned in Scale not offset as I have learned its better.

My Explorer: http://prntscr.com/lg40fb

Menu when in studio: http://prntscr.com/lg40j1

Menu in real server with bigger screen: http://prntscr.com/lg40mp

I do not have a clue as to why this is happening as everything is in scale so it should be positioning and sizing the same no matter the screen size but it's not.

9 comments

0

devforum.roblox.com/t/properly-scaling-main-gui/65139

1

Took inspiration from that gui, and tried the fixes for that as well.

0

can't tell what's getting messed up, they look the same other than those _| shapes

0

Just the positioning of the textlabels and the L shapes.

0

are the textboxes using right/center aligned text? that could be the issue as the larger scaled textbox will cause it to center differently

0

also what are the L shapes made of? are they images, two different frames, or what?

0

 The L shapes are two different frames for each one, and ill check the textlabel aligned text. Edit: all the textlabels have center alligned text.

0

you (probably) want it left aligned since it's aligned left within the larger frame. for the different frames, if you put one inside the other and position it based on scale, their relative positions should stay the same across screensize.

0

^ for the first part: that is, the textbox is on the left of the frame. another note is that you don't need to launch it up ingame, there's an emulator under the "test" tab.

2 answers

✓ Accepted answer

In the frames and text labels there are things called anchor points. If you have the anchor point at (0, 0) it decides the positioning relative to the top left corner. However if you do something like (0.5, 0.5) it will decide where to put it relative to the middle of the GUI object. If you mess around with those and the parents of the objects you are moving around you might end up getting the result you desire.

An easy fix is to change all your sizes of the gui from x coord 2 to x coord 1 and y coord 2 to y coord 1, here is an example:

Example:

-- suppose your gui size is
UDim2.new(0,1000,0,1000)
-- change that ^ to:
UDim2.new(1,0,1,0)

Another example:

Suppose your gui size is
UDim2.new(0,400,0,400)
-- change ^ to:
UDim2.new(.4,0,.4,0)

After changing the GUI sizes, test your game and change the size of the screen, it will now stay fixed into which ever screen size you choose.

You could also program a script that detects the platform and change the gui like that but, it will be too much to handle, getting every latest phone created....

Click answer if this works.

2 comments

0

but the in studio the screen isn't 1000x1000

1

Thing is, I already did that with everything in the Menu. Example: http://prntscr.com/lg45yo

This discussion is preserved as it was. New answers, comments, and votes are closed.