How to keep a perfect square frame inside a flexible size parent frame?

rogeriodec_games · July 17, 2021, 2:16pm

The main problem is: how to keep the same proportions of frames on screens of different sizes? For that, I use Scale for everything.

Here is an example with a parent and a child frame, both of the same Size.Scale:

However, if I need a perfect squared child frame I cannot use Scale, as its size will be influenced by the parent frame. In this case, I have to use Offset:

But here’s the problem: offset won’t allow the parent frame to resize the child square:

So, what do I have to do to keep a square frame inside a flexible size parent frame?

Tommybridge · July 17, 2021, 2:44pm

Use SizeConstraints.
Read more here:
https://developer.roblox.com/en-us/api-reference/property/GuiObject/SizeConstraint
You might have to tinker around with the Scale for it to look correctly.

rogeriodec_games · July 17, 2021, 2:52pm

I didn’t get that.
Could you show me how with this project?
square.rbxl (29.8 KB)

Tommybridge · July 17, 2021, 2:56pm

square2.rbxl (29.9 KB)
Here ya go, there’re two perfect squares, one uses RelativeXX while the other uses RelativeYY. They both make a perfect square but each behave different when you scale the parent frame.

steven4547466 · July 17, 2021, 2:59pm

You can use a UIAspectRatioConstraint and set the aspect ratio to 1.

rogeriodec_games · July 17, 2021, 3:00pm

That’s perfect, thank you very much!