UI Scale Question/Help

Help and Feedback Art Design Support
, ,
#1

Hey, I’ve been importing this full screen Shop UI that I have been working on into studio, below I’ll attach what the image looked like in photoshop. (All Gamepass Icons & Vectors were placeholders and not mine, just used for design concept)

AnimeBlitz
AnimeBlitz1920×1080 238 KB

I then began importing the UI into studio, and on normal laptops and PC devices it appears to look like this

image
image1529×803 91.8 KB

However, on mobile devices it ends up looking something like this, I’m not sure if this is because of the GUI Inset different mobile devices have, but even ignoring the inset in the properties of the ScreenGUI hasn’t really made much of a change haha

image
image1149×787 59.5 KB

My main question is, is there any way to fix this or workaround it, am I doing something wrong, or is this just a limitation I have to deal with haha

Please do let me know, looking for any answers or help!

2 Likes
#2

It looks like you’re having a GUI scaling issue.

I was watching a video on this for my game, and I recommend using the AutoScale Lite plugin.

Steps to Fix It:

  1. Set your main frame’s anchor point to (0.5, 0.5).

  2. If you’re using elements outside the main frame, set their anchor points to (0.5, 0.5) too.

    • If they’re inside the main frame, you don’t need to adjust them.

  3. If you scale a frame to fill the whole screen, it may look different on other devices.

Screenshot 2025-03-17 141349
Screenshot 2025-03-17 1413491919×824 123 KB

  1. Select all your frames, text buttons, image buttons, etc.
  2. Open the AutoScale Lite plugin:
    • Click Unit Conversion → Select Scale for Position/Size.
    • Select the main frame → Click Add Constraint.

If you didn’t get it, check out this video—it’s really helpful:

This should fix your scaling issues! :rocket:

#3

It’s not really a scaling issue I think, I do use the AutoScale plugin haha! The UI scales perfectly but I think its due to the fact mobile devices have different insets, like on a phone the right and left just doesn’t show the UI
image

#4

With a normal frame GUI it would work as theres nothing being displayed all the way at the top or the sides, however this has something being displayed on the WHOLE screen so maybe thats why its running into the issue?

1 Like
#5

yeah as I said If you scale a frame to fill the whole screen, it may look different on other devices

#6

I see, so theres no real workaround to make it fit the whole screen?

1 Like
#7

I’m not an expert when using ui but I recommend you watch the video it may help :man_shrugging:

#8

I have another idea you could add an image label then set the image to that background and use the plugin to set the scale and size then Click Add Constraint .

1 Like
#9

I think it can’t be fixed. But you can try messing with the ScreenGui properties (ClipToDeviceSafeArea, SafeAreaCompatibility, ScreenInsets).

Edit: if ImageLabel.ScaleType = Enum.ScaleType.Fit - that won’t help.

#10

Was tinkering with it myself a bit and I did fix it, it obviously will look a little different on all the devices, however its working much better now.

I just exported the WHOLE background as one image, imported it and set its size to 1,0,1,0, and set its image scale type to stretch, it then stretches over the needed areas for all devices without looking all weird

2 Likes