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

[Just2Terrify (J2T)]

---

I’m currently working on creating a new GUIs that is PC, and mobile friendly… without creating two separate versions of the GUIs. It becomes very tiresome to set two separate GUI systems up. I want them to be in the same positions, and be the same size; but for their respective resolutions.

The healthbar is the only thing that is somewhat doing this correctly, but if I put it in the position I desire it to be in… it gets over-ran by the Tools, and to prevent that; I have to move it up drastically on the Desktop version.

I’m fully lost on what to do, the most I understand about GUIs is that Scale is a permanent scale, and Offset isn’t… I think? I’ve tried to understand it, but I am unable to understand it properly.

---

[robloxfannumber6 (pool)]

Do you already use UiAspectRatioConstraints with your GUIs?

UIAspectRatioConstraint | Documentation - Roblox Creator Hub

[Just2Terrify (J2T)]

Yes, but they still gain too much in size and move on different devices/resolutions.

[Cookielnk]

I usually scale infrequent buttons on Offset like settings buttons and shop buttons
and only use Scale and sometimes with Offset for those frequently used buttons like combat buttons

it really depends on you how much details you want to show and how you handle it for me

like for example creating a chat system:

using both Xoffset and Yoffset on scaling is fine but on the chat system I made
I prefer the scaling on Xscale and Yoffset since I handle the messages to adjust size based on the absolute X size of the chat
so I have nothing to worry about the X size on every device. all I need to do is find a good Yoffset,
but if you are not still comfortable on the Offset then you will need to resize it on certain devices to handle it or combine it with Scale if the result is good

[Just2Terrify (J2T)]

I’ve tried to understand this… I genuinely just don’t understand any of this. I get how you do it, but I can’t translate it to mine at all.

[Cookielnk]

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) Will Be 190 In Pixels.
The Height Will Basically Be Smaller In Devices With Bigger Resolutions But The Width Will Remain 60% In Any Devices.

A Xscale Of 0.6 Means 60% Of The Absolute X Size Or Width Of The User’s Screen. The Number 1 Is Basically 100%.
So Doing UDim2.new(1, 0, 1, 0) Will Basically Size A Frame The Same Size As The User’s Resolution Or Screen Size.

You Can Also Try Combining Both Offset And Scale In The Same Dimension Because It Might Give You A Good Result:

UDim2.new(0.25, 280, 0, 190):

VS: UDim2.new(0.6, 0, 0, 190)

This Is Just Another Option Of Handling This Scaling Thing In Every Devices. Most Popular Games I See Usually Resize Everything Depending On The User’s Device, Some Games Actually Make A System To Make Users Choose What Device To Choose So They Can Identify Which Comfortable Scaling Will Be Set On Their UI And I Believe MM2 Does This.

[Just2Terrify (J2T)]

Thank you! This is much more clear to me now, I only have one final question; do you use this for both position, and scaling?

[Cookielnk]

yes and I consider anchor point for positioning as well