How do I get the various elements of this UI to “stick together” so that when the screen size changes it doesn’t get messed up?
If it helps:
Don’t size and position UIObjects by the Scale part of their UDim2’s.
What would be the alternate?
You could size and position them with the Offset part of their UDim2’s and use a UIScale to correctly scale the entire ScreenGui based on the size of the user’s screen.
Here is an example of a UI I had to re-build (the original maker sized and positioned it via Scale, so it messed it up), but instead I used the Offset (size & position in pixels):
Where’s the offset property located within it?
It’s a sub-property (if that’s the right word), of the Size property. If you expand it, you can see the Scale and Offset for the X and Y axes. Scale usually (but not always) ranges from 0-1. This just determines what % of the screen it covers. Offset is the pixel amount for the size / position of the UIObject.
Edit: If you made your UI by dragging the built-in Roblox UI editor, I believe it automatically updates the Size property in Scale.
2 Likes
You should probably parent the BuyGems and GemCount to the Border Frame so it can respect its parent size and position (if you use scale instead of offset). The Gem Image could also have a UIAspectRatioConstraint to prevent it from stretching
Udim2.new(1, 0, 1, 0) -- this is an example of scale, it is scaled with its parent size or player's screen device
Udim2.new(0, 100, 0, 100) -- this is an example of offset, it is based of pixels
1 Like
Alright, so if I wanted to correct it so that it would scale together, what would I set the offset values to in relation to the position?
You could make sure both of the UIObject’s Position property has the same Offset on the X axis. This will keep them the same pixel distance from the left side of the screen.
1 Like
Thank you for your time & help
You should only ever size/position GuiObject instances according to scale, this is so that they render in the same positions/sizes as a ratio/percentage of the resolution/dimensions of the native device. For example.
Frame.Size= UDim2.new(0, 100, 0, 100) --this frame will always size at 100 pixels by 100 pixels for every device, which will result in it looking large on smaller devices and small on larger devices
Frame.Size = UDim2.new(0.1, 0, 0.1, 0) --this frame will always size at 10% of the devices screen width/x-dimension by 10% of the devices screen length/y-dimension, which will result in the frame appearing as a similar size respective to the devices size for all devices (aspect ratios could still cause some slight imbalance)
1 Like