Problem with UI scaling

Hello devforum, I need some help with a UI scaling problem. I have tried soluctions like uiaspectratio constraints or setting scale type ti fit etc. but I can’t fix it.

This is how to UI should look in every device.:
image

Here is how it looks in other devices:
image

The numbers in the inventory and the bars strech for some reason.

Thanks for reading.

1 Like

I always use Scale for everything to ensure the interface will fit any device.
But if you want a fixed distance between borders and objects, you could add some offset to the current Size.Scale.

1 Like

Use this plugin to make a constraint, that way it should work on different devices.

1 Like

I said I tried adding constraints, I used that plugin.

How do I add offset to scale??

1 Like

I am trying to do it, but there is no change, the offset adds up to the scale and it moves more

To better help you, it will be good to see your frames.
You can create an empty Baseplate file, copy only your frames from your original project and paste to this new file. Save it and send here.

1 Like

UIScaling.rbxl (36.6 KB)

I’ve tried that plugin but it’s absolutely confusing to use.

You could of asked him to send an RBXMX file which would of been easier.

1 Like

The first problem I see is that you have 3 SreenGuis and you need only one:

Having only one ScreenGui, inside it you have to create a “Parent” frame with the final dimension for you GUI:

Set the parent frame only with Size.Scale to fill the maximum dimensions, which will be proportionally adjusted to the screen size. Use Size / Position Offset only if you want to force dimensions in pixels, independent of the screen size.
Also, I see you are almost not using Frames, you are parenting objects inside objects. The be more practical and intuitive, use the concept of “frame inside frame” and only put your final objects inside the last child frame.
Example:

FrameParent (Size.Scale = (0.3, 0.8))
---- SubFrame1 (Size.Scale = (0.8, 0.5))
-------- FrameChild1 (Size.Scale = (1, 0.5))
-------- FrameChild2 (Size.Scale = (1, 0.5))
---- SubFrame2 (Size.Scale = (0.8, 0.5))
-------- FrameChild1 (Size.Scale = (1, 0.5))
-------- FrameChild2 (Size.Scale = (1, 0.5))

Obviously, you’ll have to adapt the positions, using the Position Scale.
Also, use Position.Scale 0.5 (x and/or y) with AnchorPoint 0.5 (x and/or y) if you want to centralize any object.

1 Like