Creating proper UI scaling for multiple screen sizes

Is there any way to find a players absolute screen size without reading the absolute size of a GUI Frame?

The reason I need to do this is to apply certain scaling to UI elements for different screen sizes (with the UIScale instance), or is this the wrong route to take? Since I can’t find any good documentation on using UI constraints on more complex UI setups; in other words I am having trouble applying UIAspectRatioConstraint and UISizeConstraint properly to multiple UI element children in a frame.

The GUI I am working on:

32%20PM

4 Likes

Is this (Camera.ViewportSize) what you’re looking for?

Confused as to why you need to constrain the aspect ratio if you’re not using the .Scale property but are using the .Offset property instead (which I assume you are if you’re wanting to use UIScale)?

6 Likes

Constraining aspect ratios is still useful for things.
(Like ensuring images and certain elements retain a certain shape)
I use it for tooltip ‘boxes’ so they don’t morph or stretch oddly.

But yeah he should be using the scale property.
The most popular aspect ratios for desktop are
16:9 16:10 and 4:3
16:10

4:3

16:9

3 Likes

in other words I am having trouble applying UIAspectRatioConstraint and UISizeConstraint properly to multiple UI element children in a frame.

If your GUIs are all using entirely Scale for for size, plop a UIAspectRatioConstraint into the parent. Since Scale is based on the size of the parent, you only need one UIAspectRatioConstraint, in the parent. Everything inside will be based off of the same aspect ratio.

3 Likes

Yes, that sounds like it would work. Yet, I just realized the issue of different display resolutions.

I am using offset for the UI children sizes. I kind of find it overly complicated to apply scale to a UI element which needs to be a perfect square (the center image).

1 Like

If you’re looking for Absolute screen size, then there’s Player:GetMouse().ViewSizeX and Player:GetMouse().VIewSizeY. They return an integer value in pixels, not scale.

1 Like

You can achieve this by using this (obj.SizeConstraint).

If you set it to RelativeYY the scale of Y is shared with X whereas RelativeXX the scale of X is shared with Y.

aka if you set it to RelativeYY all you need to do is work out the .Scale value on the Y axis, and then set the same value into on the X axis and it should remain at an aspect ratio of 1:1. Then to keep the image position central you’d want to set the AnchorPoint to Vector2.new(.5,.5).

3 Likes

Yeah this works pretty nicely.
Notice how in all my screenshots my key redeem help box stays a perfect square. Thats because I use relative YY. I know on the Y axis I want it to be the same size as the title box but since I want a square I can use RelativeYY and set the X scale to 1 and it makes the X scale the same size as the Y scale

Scale used to take me a while to understand. To the point I built my own UI scaling solution prior to the UIScale object but its really one of the most versatile positioning solutions. (Although UIAspectRatioConstraint still has its place for a more diverse range of keeping things sized nicely depending on your hierarchy rather than basing it off the parent.)

2 Likes

I probably should go the route of not analyzing the screen size in pixels and applying the appropriate UIScale for a number of reasons. One being different screen resolutions, and two being people resizing their game window on desktop.

I am still unsure of how I am going to properly apply scale size with some UI elements, such as the left and right text-boxes. I guess I would apply a UI aspect ratio constraint to keep the size correct; still not entirely sure for how to position them.

Will definitely take some getting used to using scale for just about everything, and learning how to apply proper constraints to certain elements.

4 Likes