Keeping scaled elements square

How can I scale square elements? For example, its overall size needs to change based on the screen’s size, but it needs to remain a square all the while. Is there any way to accomplish this without scripting it?

1 Like

This is the property you’re looking for: Documentation - Roblox Creator Hub

3 Likes

Assuming you’re talking about guis, you can accomplish this using the SizeConstraint property of the gui object. I think someone made a tutorial on this in the tutorial section, but I’m not 100% sure.

1 Like

Thank you! I don’t know how I never noticed this property. I was attempting to accomplish this through the recently added UI objects and none of them could accomplish this alone.

Keep in mind it only effects the scale aspects of the size. Offset is absolute and won’t be effected by this.

Or you can use UIAspectRatioConstraints:

Parenting one to a GUI element will force it’s size to a certain aspect ratio, and setting AspectRatio to 1 makes it square. You can change DominantAxis to height so its size is dependent on the largest height possible instead of the largest width.

4 Likes

Yeah, SizeConstraint is deprecated if I remember right, in favour of UIAspectRatioConstraints.

Don’t believe it said it was on wiki when I opened the page today.

It was never deprecated.

Ah, okay, for some reason I thought it was.

For those of you still having problems with this solution as I did. Problems such as that the gui object is sized good in one direction but when you resize the screen it is not constrained properly in that directions etc… This method works in keeping it square but it is messy and you can’t seem to keep the object within its parent frame.

So the solution I found which is ‘better’ is giving the object which you want to preserve its aspect ratio of, a parent frame which is just a regular frame with the default RelativeXY size constraint. Then giving you object a size of (1,0,1,0) to take up the full parent frame and then setting the objects “ScaleType” to “Fit”.

So in short, use this: ScaleType | Documentation - Roblox Creator Hub

1 Like