How to use UIAspectRatioConstraint?

Simply said, I’m experimenting with constraints as I’m starting to notice my screen UI elements stretch by using ‘Scale’.

When I insert the UIAspectRatioConstraint into a frame, it resizes to something totally different with me having to manually adjust it. The size itself may be similar to the one that doesn’t use the constraint, but what if I want it to be exactly the same as it was?

How to use this feature properly and if so, what do I do?

Best regards.

7 Likes

I use this nifty plugin for pretty much this purpose: :stuck_out_tongue: When you click on something and press the add constraint button, it will auto scale it so you don’t do the math. I find this most useful in cases like ScrollingFrames. I set the CanvasSize to 0, 0, 0, 0 and make my UI. I then use the plugin, get the UIAspectRatioConstraint, and clone it into my UIGrid/ListLayout, and it will scale up perfectly on all devices when I increase the CanvasSize / add more UIs to the ScrollingFrame. I’m sure there’s more of a use to this on device scaling with ImageLabels and such, so it might be useful there too. I suggest using the plugin I provided though as it works 100% of the time for me.

3 Likes

Simply divide the original value of dominant axis by the subordinate axis, both in pixels, to obtain the ratio that the constraint will always maintain.

Say we have a ui element with 250 pixels in size in the x-dimension, and 100 pixels in size in the y-dimension, and the dominant axis is Width (the x-dimension), you’ll divide 250 by 100 to get 2.5 - that will be your aspect ratio

19 Likes

Would you know why that won’t work? I’m having trouble using this plugin with scroll frames… Also for some reason on bigger screens the ui would shift position from the side and there will be empty space to the right