UI Sizing issue (Help needed!)

, ,

Hey, so I’m working on an admin panel and it looks perfectly good in studio. However, when I actually join the game from the roblox website/app, the gui looks all messed up. I’ve tried using the Autoscale Lite plugin but it keeps making it even worse. The Ui contains UiCorners, UiStrokes, TextLabels, Frames, ScreenGuis, a ScrollingFrame, a UiListLayout, and a few others. I don’t understand how to fix this, please help!

Roblox Studio:

In-game:

4 Likes

show me what the gui looks like in the explorer along with the size properties

2 Likes

Studio’s screen has different dimensions compared to the actual dimensions in-game.

To further prove this, notice the HD admin command buttons on the top left and notice that on the actual game, it is more smaller than the one on the studio.

You can use a rescale UI plugin. I find this very convenient

4 Likes

I tried that plugin but like I said, it breaks things further.

3 Likes

image

3 Likes

UI Sizes:

Background: {0, 1018},{0, 597}
ScrollingFrame: {0, 262},{0, 519}
PlayerSlot: {0, 277},{0, 43}
ProfileImage: {0, 43},{0, 43}
DisplayName: {0, 82},{0, 21}
GroupRank: {0, 82},{0, 21}
PlayerName: {0, 82},{0, 15}

1 Like

You have set all your sizes with offset, instead you should be using scale. Because scale sets the proportionate size of a UI image to its resolution while offset counts off pixels. Inside the brackets of each coordinate there are two values. e.g Background: X:{scale, offset},
Y: {scale, offset}. When setting the size with offset things like that happen so set all your offset values to 0 (basically all the non-Zero values you have) and all the other ones which are scale values set them to a number which suits you (its not going to be the same number as it would be in offset). Scale works in small numbers. For example a Frame with values {1,0}, {1,0} (all offsets zero, both scales one) would fit the entire screen. So a Frame with scale {0.5,0}, {0.5,0} will always, in no matter what resolution take up 50% of the screen (half the screen size) however, a Frame which seems to be taking up half a Computer screen using offset would take up more in a phone screen because as I said, offset uses pixels to count size. In general its best if offset values are always set to 0 so that the game looks the same in all resolutions

TL;DR change all your existing values(offset) to zero and set your existing 0 values(scale) into something that fits the size you want

4 Likes

what is the position of the scrollingframe and the background?

3 Likes

Thank you very much! I am going to try this. Will let you know if I have any further questions :slight_smile:

1 Like

I very much recommend AutoScale Lite - Roblox plugin to seamlessly scale your UI… Don’t mix scale up with constraints as they are two very different things, but his plugin is pretty intuitive…

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