Positionning and Sizing UI for all screen Sizes

Im having trouble scaling the UI of my game. Ive looking through dev forum and found that using UIAspectRatioConstraint API Reference might solve my issue.

Unfortunately it didnt. Im not experienced with These types of constraints so i tried looking for other solutions but i didnt come across anything that was useful to me

Heres an example of the Issue im having. (And i cant properly position GUI in studio since i cant properly close all of my view tabs and edit the GUI at once)

So my question is, whats the best way to scale GUI for all devices no matter their screen size?

Help is appreciated, thank you for your time :slightly_smiling_face:

Why don’t you just use the Position Scale and Size Scale instead of Offset?

1 Like

I tried that but there didnt seem to be any difference. Ill see what i can do now

Scale is a scalar from 0-1 (0%-100%) for the users’ current screen-size on its respective axis. Size of {1,0,1,0} will always fill a whole screen as it is a dynamic value dependant on the screen it’s viewed on, whereas Size of {0, 1920, 0, 1080} will be a static size and only work on a 1080p monitor.

1 Like

I may be wrong, but does a scale of 1x1 include the top border of the game? If so, I think I make my scales slightly larger just to cover that.
I might be completely wrong though.

If you set ScreenGui.IgnoreGuiInset to true, it will scale to the very top disregarding the stock roblox topbar. Otherwise an offset of ~36 pixels covers it I believe.

2 Likes

You should only ever size/position GuiObject instances according to scale, this is so that they render in the same positions/sizes as a ratio/percentage of the resolution/dimensions of the native device. For example.

Frame.Size= UDim2.new(0, 100, 0, 100) --this frame will always size at 100 pixels by 100 pixels for every device, which will result in it looking large on smaller devices and small on larger devices
Frame.Size = UDim2.new(0.1, 0, 0.1, 0) --this frame will always size at 10% of the devices screen width/x-dimension by 10% of the devices screen length/y-dimension, which will result in the frame appearing as a similar size respective to the devices size for all devices (aspect ratios could still cause some slight imbalance)

Copied from a previous post of mine.

3 Likes

On the ScreenGui, make sure IgnoreGuiInset is enabled.
And, also use Scale instead of Offset, @Forummer has a good example of that above this.

i think that this should go into #help-and-feedback:game-design-support too, we dont have a UI Design Support category yet.

2 Likes