Scaling inventory UI like the default roblox inventory

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!


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.

1 Like

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:

1 Like

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.

1 Like

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


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.

1 Like

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!