How to Scale Gui

[borrisify (m_vqu)]

Introduction

Hey there! In this tutorial, I will demonstrate a good way to scale GUI’s on all devices. If you have created GUI’s before, you may have encountered issues with the scaling. That’s why i have created this tutorial!

1st step

In the properties tab, find the size property in your gui element.

Click the expand arrow on the size properties “x” and “y”.

Now you will see the inside properties “Scale” and “Offset”. Set both the offset properties
to 0. We don’t want any offset in our Gui’s.

Now the gui element will appear very small. Click the little dot and hold and drag the dot to the size you want the gui element to be.

This is the size I’m going with.

2nd step

In the properties tab, find the “AnchorPoint” property. Click the arrow down, and change these
two values to 0.5.

Last step

Now in the explorer tab, in your gui element, click the plus symbol and insert a “UIAspectRatioConstraint.” Change the “AspectRatio” property to whatever you want the frame
to look like on all devices.

Final Result:

Ending

I hope this tutorial was useful! This was actually my first one so let me know what i can improve in the next one :).

[Just2Terrify (J2T)]

This doesn’t always work, this will at times have issues simulating on other devices… especially if it has a different position besides the center of the screen.

What is the best way to keep a consistent size, and scale on all platforms?

Okay, This Is Your UDim2: UDim2.new(Xscale, Xoffset, Yscale, Yoffset) When I Say Scaling On Offset It Means Filling Only The Xoffset And Yoffset: UDim2.new(0, 100, 0, 100) And When I Say Scaling On Scale It Means Filling Only The Xscale and Yscale: UDim2.new(0.5, 0, 0.5, 0) From The Chat System I Made, I Used Scale And Offset On Scaling My Chat: UDim2.new(0.6, 0, 0, 190) But Not Both Dimensions Which Is The X And Y. The Width(X) Of My Chat Will Be 60% In All Devices And The Height(Y) Wi…

This is an alternative way, and for me… a much more consistent way to scale GUIs.

[borrisify (m_vqu)]

Yeah, unfortunately this method doesn’t always work. I’ll have to try this one, thanks for that!

[DonaldDuck5150]

or you can do what i do and use this plugin that does all of that with the click of a button, and yes it always works

[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…

still cool tutorial though it helps people understand it better