How would you make a UI look the same on all devices?

[vf9r]

What you see on my game on the average laptop:

What you see on an iPhone 5:

What you see on an iPad Mini:

Now why are they all different? How would I make them all look the same or at least in some way managable?

[FerbZides]

UIAspectRatioConstraint maybe the answer for this since it makes all UI equal on all Devices

[ThatTimothy]

Use scale and not offset for positioning and sizing your plan button.

If you set the anchor point to {0.5, 0.5} and position to {0.5, 0, 0.5, 0}, the button will be centered.

The format for positions and scales are
{xScale, xOffset, yScale, yOffset}

Scales are a value 0 to 1 where 1 is the full screen.
Offsets are in pixels.

[SOTR654]

Use this plugin:

[Plugin] AutoScale Lite for GUIs - Scale your UI

[AutoScale Lite Banenr] Overview The plugin has two main functions. Converting a UI element’s size/position to Scale or Offset, and the auto scaling feature. The Add Constraint feature makes use of the UIAspectRatioConstraint which ensures that your UI retains it’s size on all screen sizes. You can add this constraint to your UI manually but my plugin does the calculating of the AspectRatio property by dividing the AbsoluteSizes so you don’t have to! [image] How do I use it hmmmmm? Firs…

[vf9r]

Even with this, it still doesn’t work.

[vf9r]

This only worked for the main screen, not the other one.

[FerbZides]

are you using offset? seems like you are just by looking at the thread

[vf9r]

I am, how would I make it so it’s converted to regular instead of offset?

[FerbZides]

well this function helps me convert ui into scale

function Scale(offX, offY) -- > UDim2 Scale version from the Offset
    local Camera = workspace.CurrentCamera
    return UDim2.fromScale(offX / Camera.ViewportSize.X, offY / Camera.ViewportSize.Y)
end

[PseudoPerson]

I recommend making a large frame with a set aspect ratio (using an UIAspectRatioConstraint) then putting all of your UI inside the frame (set the AnchorPoint to 0.5, 0.5 and the Position to 0.5, 0, 0.5, 0 to center the frame). With the set ratio, you can then use scale for everything (in general, never use offset unless you know what you’re doing). If everything fits in the frame and you don’t use offset, the UI will scale properly on all devices (note this is only for centered UI, for UI anchored to the side you can do something similar but with a different AnchorPoint, Position, and AspectRatio).