Scaling inventory UI like the default roblox inventory

[Zenith322 (noob)]

I’ve created an “inventory” UI on the bottom of the screen similar to the default roblox inventory UI. The problem is the default UI is good with scaling the screen on the x axis, mine isn’t.

I’ve been trying to use UIAspectRatio and the SizeConstraint property (using YY instead of XY) of the frames to try to achieve this scaling on different resolutions, but both solutions have either shrunk my UI or mispositioned it (no longer placed in the center)

Below is what the default resolution looks like (looks fine):

Below is what the inventory looks like using UIAspectRatio with AspectRatio of 4 and AspectType: FitWithinMaxSize (see how it shrinks):

Below I am using AspectType: ScaleWithParentSize

Any help is appreciated!

[DivingInWater]

I am not sure how others do it, but for the UIs that I make, I change the size to 1,0,1,0 and then free scale it from there. If you are wanting to change the size from the property instead of free scaling then make sure to change the numbers on the left. Example {0.5, 0},{3, 0}. And make sure the position is the same.

[Zenith322 (noob)]

I already use scaling for my UI elements, unfortunately it looks terrible if I just only use scaling and the x-axis changes.

Here is an example:

[DivingInWater]

X axis does not really matter in much cases, most monitors/devices keep a ratio on there resolution. They don’t really have a big x axis and small y axis. Most of them has the Y Axis bigger than the X axis. But I do agree it looks bad like that, but tell me one device that has a resolution thats the same as what you are showing me.

[DivingInWater]

I’m not sure if this works. I haven’t tried it yet, but here.

What is a good method to properly scaling UI?

If keeping your UI pixel-perfect to the design matters at all, you’ll likely need to use UIScale to avoid having to mess with an unholy amount of UIAspectRatioConstraints. Often, unless you specifically need to deal with text lengths, using relative sizing (UDim2 Scale) with a couple of aspect ratio constraints is ok. If you wish to use UIScale, here’s a Roact component I wrote recently that scales UI fairly well: local Workspace = game:GetService("Workspace") local GuiService = game:GetServic…

[Zenith322 (noob)]

I believe its still a fairly relevant problem, and I feel the fix should not be terribly hard.
And that solution does not work, just tried it, it scales my inventory worse than the UI aspect ratios did.

[Zenith322 (noob)]

It’s been resolved by a really helpful guy on the HD discord (Dysche)

Essentially, here are the steps:

1. Set SizeConstraint to XY
2. Set Anchorpoint to 0.5, 0
3. Add an aspectratioconstraint to the frame
4. Use the aspectratioconstraint’s Ratio value to size it correctly
5. Check ScaleWithParentSize and Height in the constraint

And that’s it!