Obnoxious gui scaling issue

Help and Feedback Art Design Support
#1

This thing is frustrating, I have watched countless gui tutorials to try and fix one issue.

I have used the AutoScale plugin and I have also tried to use Scale instead of Offset, but using Scale starts to squish and stretch the gui (ingame).

For this gui, I was using Offset + a UIAspectRatioConstraint and here is the issue:

This is how it looks like in studio (how it is supposed to look):
image
This is how it looks like on the mobile preview:
image
And this is how it looks like on my laptop when I am playing (1920x1080):

image
image674×562 69.1 KB

Any help would be amazing

#2

Are you using a UIListLayout? Can you show it’s properties if so?

Also, I suggest using an AnchorPoint of 0.5, 0.5 because it looks like it’d help, and you can very easily center things on-screen by setting it’s position to 0.5, 0, 0.5, 0 (with the AnchorPoint adjustment).

#3

For the upper selection part, I’m not using anything but for the low one with all the "None"s uses a ‘UIGridLayout’
Here are the properties of the UIGridLayout:

image
image341×631 83.2 KB

#4

Also, the anchor point thing doesn’t really work. I mean, it helps a bit but it’s not what I was looking for

image
image508×646 64.6 KB

#5

Try setting the anchor point to 0.5, 0.1, and the position to {0.5, 0, 0.1, 0}. If that doesn’t work, just try to mess around with the anchor point and position until you get it right.

My tutorial has a lot of information on this topic.

#6

It doesn’t work so well. (the anchor point thing)

image
image541×846 91.7 KB

#7

Are you doing that on the button holder frame itself? That is not what I meant, try doing it on the frame with the “None” buttons.

#8

It didn’t work a single bit, nothing has changed (i already did it with the frame with the buttons).
Also, the button thing doesn’t use a frame.

image
image520×853 88 KB

#9

I re-did that method and it solved half of my problems (just a bit of the “None” button problems)
But it still has an issue where it leaves a lot of space at the top and makes it look very ugly.

#10

Try adjusting the first value of the anchor point and the position some more. Like, 0.05 instead of 0.5.

#11

It doesn’t work. It just makes things worse. (btw I am still using Offset so my image buttons don’t get squished)

image
image475×716 74.3 KB

sorry for the delayed response, I was going through the ‘Same account launched experience from different device’ issue

#12

I hate postitioning GUIs… I can’t figure out a way to keep it in the exact same spot on all devices either, but parenting your GUIs to a Frame with an anchor point at .5, 0, .5, 0 should do the trick. Especially if you have the Auto Scale plugin.

#13

How does an Anchor point have a Scale value? Doesn’t it just have an offset value? Example: ‘0.5, 0.5’

#14

To create an accurate sized GUI:

Click on the Frame that houses all your UI elements, then look at the AbsoluteSize property.

Collapse the drop down, then divide the X by Y.

I do this:

print(Frame.AbsoluteSize.X / Frame.AbsoluteSize.Y)

Now create a UIAspectRatioConstraint on the Frame you obtained the absolute size. Copy the number that was printed and use that as your AspectRatio. It should be the normal size of your UI when you first made it, but it prevents it from scaling on Mobile devices weirdly, and should stay the same size depending on screen. I recommend setting all UI elements to Scale before doing this. If you don’t wish to figure out the values yourself, I recommend AutoScale Lite to unit convert it easily.

This is how I do my GUIs, works well. There is a bug with studio where the GUI might look off center, but it stays in the normal spot in-game

Hope this helps!

#15

It doesn’t help. I already used AutoScale and it does the same thing. Anyways, I tried the AutoScale plugin on the selection frame and it still leaves a small ugly gap at the top. Although, it did fix the shriking issue and the gap it leaves has shrunk.

image
image467×758 76.6 KB

But as for the frame with the “None” buttons, it gets shrunk and the buttons pop out if I use scale (on mobile). I am using a UIAspectRatioConstraint with a UIGridLayout and This is what Happens:
image

#16

I don’t think you need to use a UIAspectRatioConstraint with UIGridLayout as the Unit size persists regardless of AspectRatio modifications.

Instead of using Offset sized cells, use Scale sized cells for your UIGridLayout.

1 Like
#17

Thanks! It actually works. With everyone’s advice combined together it is fixed. Thanks to everybody for helping

image
image805×514 79.2 KB

1 Like