UI won't size/position correctly on screens

Help and Feedback Art Design Support
,
#1

Hi! My name is HazSun and I’m a UI designer! I’ve been recently given a commission to import and scale UI so that it fits on all devices. I have watched certain videos and I believed that I knew how to do it properly, however there have been several issues.

Here is a GIF of how the UI is intended to work: https://gyazo.com/950c81f0b2cb0217873f19e18c85cafd

Here is an example of how the UI should be positioned in accordance to what I’ve done on studio

image
image823×468 233 KB

My UI is made out of roblox studio, so my first step after putting a screen gui down was to use either an image label or image button. After I set up the image, I would set the anchor point to the center
image
Then move on to sizing the UI. With sizing I learned to only use offsets, as well as using an UIAspectRatioConstraint.
image
With using the UIAspect, and size dimensions like:
image
which is basically just sizing using only offsets I was able to make all the UI look like the above image of the UI.

However, when I went to publish and check how it looked in game, it wasn’t what the intended look was:

image
image1356×558 533 KB

This is from the buyers POV:
image
image1026×308 234 KB

So for some reason, the UI collides and basically doesn’t do what it is intended to do - which is when the screen is changing sizes it should switch variables to look the same but different size

I’ve asked multiple people for some help with this, including @Etheroit, @2Hex, @InsanelyLuke and the methods theyve suggested aren’t working/I have already started out by doing those.

2Hex gave me the suggestion to switch the Size Constraints from XY to something else. When I tried that (*meaning I switched all the UI to YY then tested it) it didn’t work so I switched XX and that again didn’t work.

If anyone has a solution to this please do reply below! If you guys need more information about what I did, please tell me and I’ll try to give the information asap. Thank you so much!

2 Likes
#2

If the User Interface objects all use offset, I would recommend attempting to enable the IgnoreGuiInset property of the ScreenGui.

3 Likes
#3

It didn’t work - I did see a change in the UI and how it looked like it sort of fixed, however the buyer said it still isn’t correct.

#4

the problem im getting now is that when the screen is changing the sizes the UI gets smaller. For him the positions change as well.

#5

You might want to use grid layout for some UI there, such as the buttons. They’ll enforce the size of the child and add padding (you can just do padding layout, but enforcing UI size might be useful for you)

The main problem with grid layout and list layout is probably you can’t tween position.

1 Like
#6

Can you explain how to use UIGridLayout? is there certain variables or is it just something i can play around with

#7

The CellSize property is basically the grid size, which is the size you want it to enforce to all UI.

The CellPadding is the padding for each UI.

To use it, simply put it in your frame.

1 Like
#8

Oh, by the way, the frame holding the grid layout and the child has to be scale in position and size

2 Likes
#9

I think using UIGridLayout might solve you issue.

2 Likes
#10

Ah… I’ve encountered this issue before. You want to make sure that your ScreenGui > Property > IgnoreGuiInset is enabled. Then you want to get a plugin called “AutoScale GUI”. This plugin allows you to convert the size of UI that’s selected into scale sizing. You can then add the UIPositionAndSizeConstrant to the UI after doing so with the plugin.

1 Like