How do I set scalable positions for UI elements?

Help and Feedback Scripting Support
#1

This is really simple, but I’ve been struggling with it, I’ve only used the relative parts of the UDim2 function (UDim2.new(this,0,this,0), but it is still inconsistent across devices.

#2

Hello!

I would suggest you doing following steps:

  1. Use anchor points
  2. Use AspectRatioConstraints
  3. UIConstraints, for automatic scaling.

–
Anchor Points:

local scalablePositions = script.Parent
scalablePositions.AnchorPoint = Vector2.new(0.5, 0.5)
scalablePositions.Position = UDim2.new(0.5, 0, 0.5, 0)
-- This centers it.

Let me know if this fixes your issue!

2 Likes
#3

I’ve used anchor points and used aspect ratio constraints (this helped a bit).

Which UI constraints should I use?

1 Like
#4

Great to hear that that AnchorPoints and AspectRatioConstraints have helped a bit so far.

Well, you could use a few different ones, but let’s first start of by using the UISizeConstraint:

This ensures that your UI elements stau within a minimum and maximum size range, preventing them from becoming too large or too small, common sense.

local sizeConstraint = instance.new("UISizeConstraint",  yourVariable)
sizeConstraint.MinSize = Vector2.new(minW, minH)
sizeConstraint.MaxSize = Vector2.new(maxW, maxH)

You could try combining a few other ones to get a better result.
UISizeConstraint, UIPadding, UIGridLayout, UIListLayout

2 Likes
#5

To add on to this regarding AspectRatioConstraints, they are fairly easy to implement in scripting. The ratio is just x / y.

local frame = game.StarterGui.ScreenGui.Frame2
local absoluteSize = frame.AbsoluteSize
local x, y = absoluteSize.X, absoluteSize.Y
local ratio = x / y
local AspectType = Enum.AspectType.FitWithinMaxSize -- OR Enum.AspectType.ScaleWithParentSize

local aspect = Instance.new('UIAspectRatioConstraint')
aspect.AspectRatio = ratio
aspect.AspectType = AspectType
aspect.Parent = frame

This would give you the same result as using a plugin such as AutoScale Lite.

1 Like
#6

Hey x6nnx!

Thanks for the helpful addition! Indeed, UIAspectRatioConstraint is a great way to ensure that UI elements scale properly based on their width and height. You’ve provided a nice explination on it!

As @x6nnx replied, here’s a breakdown on what his script does for the OP.
You can adjust the AspectType depending on how you want the element to behave:

  • FitWithinMaxSize: This makes sure that the frame fits within the maximum size allowed by its parent, while maintaining the aspect ratio.
  • ScaleWithParentSize: This scales the frame according to the size of the parent while keeping the aspect ratio intact.

The script he provided is indeed a good alternative to plugins like AutoScale Lite, and it can be easily customized for various UI Elements.

1 Like
#7

Wouldn’t this cause some issues if the game was running on a really small device or a really big device?