# GUI aspect ratio independence

This topic is 2090 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I'm making a 2D GUI for my game. I get screen resolution independence by using percentages for x, y & width, height for the controls relative to it's parent container where the top level is the entire screen. This helps make my GUI look exactly the same on all resolutions of the same aspect ratio.

Now I want to make it aspect ratio independent so that I don't have to make my screens per aspect ratio. So when I initially make the GUI, I use a base screen res/aspect ratio to get it to look just right. I want to take this base and make it look the same (positioning and sizing) on any resolution the player selects for the game. What is the math on something like that?

##### Share on other sites

Depends on what you mean.  Do you mean you want letter boxing, so the actual controls are in correct aspect ratio as your base version ... or do you mean if the screen is 20% wider, you want your controls to be 20% wider?  Either way, you can see that if you just thing about it from those 2 choice, the answer is almost obvious.

##### Share on other sites

Opps.  Accidentally hit post.  So anyway .. lets say your base aspect ratio was probably either 4/3 or 16/9 doesn't matter .. but whatever it is.  You consider that the base rectable, which is 1bwu wide (1 base width unit) and 1bhu tall (base height unit).  So now for 4/3, 1bwu = 1.333_bhu ... So then you do this math on your other aspect ratio ... lets 1swu (screen width unit) = 1.777_shu.  So if you want to letterbox, you need to create letterboxes equal to 0.222 (1.777 - 1.333 / 2) shu wide on each side.  If you want to stretch instead, you just mulitiple your bwu widths by 0.444 to stretch them wider.

##### Share on other sites

on top of the options xai mentioned you can also place your GUI elements relative to an arbitrary screen edge/corner/center rather than relative to a fixed origin.

Edited by SimonForsman

##### Share on other sites

No letterboxing. I think that looks bad.

From using %'s what I see is that the position (x,y) of the controls can always use straight up % and look the way I want. ie. x,y at 50% will always be the same position on any resolution because it's using 50% of it's parent and if no parent then that's calculating based on the screen width/height.

However using % for size (width, height) doesn't work correctly when done on a base resolution. ie. 50% width is not the same on a 4:3 vs 16:9. It'll appear much wider. However I don't want it to appear that much wider. I want it to look proportionate just like it does on my base resolution that I developed on. It will be wider than the 4:3 base resolution but not what 50% width would give you. Somehow it needs to know that 50% at 4:3 would = some other % at 16:9 to look basically the same on screen when I scale the control images.

Edited by rpiller

##### Share on other sites

No letterboxing. I think that looks bad.

From using %'s what I see is that the position (x,y) of the controls can always use straight up % and look the way I want. ie. x,y at 50% will always be the same position on any resolution because it's using 50% of it's parent and if no parent then that's calculating based on the screen width/height.

However using % for size (width, height) doesn't work correctly when done on a base resolution. ie. 50% width is not the same on a 4:3 vs 16:9. It'll appear much wider. However I don't want it to appear that much wider. I want it to look proportionate just like it does on my base resolution that I developed on. It will be wider than the 4:3 base resolution but not what 50% width would give you. Somehow it needs to know that 50% at 4:3 would = some other % at 16:9 to look basically the same on screen when I scale the control images.

I gave you a solution that does just that.

skip the percentages and use a coordinate system where the viewport is always 1 unit high and resolution.x / resolution.y wide and then place your objects relative to different corners,edges (or the center) instead.

so if you place a 0.5 units wide and 0.1 unit high healthbar 0.05 units down and 0.25 units to the left (to compensate for its width) from the top-center you just draw it at:

x = res.x / 2 + (-0.25 * res.y) //not a typo, we always multiply with the vertical resolution, the horizontal resolution only affects the origin position

y = 0 + (0.05 * res.y)

no stretching, no letterboxing and element size will be the same at 1440x1080 and 1920x1080, a wider aspect ratio only gives you more clean space in the center of the screen (if you place GUI elements at the left and right edges)

Edited by SimonForsman

##### Share on other sites

You have the position formula, but what would the size (width/height), of the control, formula be? I don't want it to be the same absolute size on every resolution. I want it to scale proportionately with the resolution.so that you won't have more clean space but so it looks the same on every resolution.

As far as I can tell using %'s for position does the same as what you're saying as the % is always based on the top/left corner of the parent control. Results in the same positioning it would seem, and for me %'s make more sense in my head. The question still remains on the sizing of controls though and how to scale them proportionately across all resolutions using a base resolution that the values were designed against.

I'm making an editor to design my GUI screens. In this editor you give a default resolution that you position all the controls against. In the editor the positioning will be in pixels, but when I save the positioning to file I'm converting them to %'s. The game will read the %'s against the resolution and position based on that. This way everything is done automatically for me. I'm going for a WYSIWYG editor meaning the position & size of the controls will always look that exact same on every resolution giving the exact same look across all resolutions.

Edited by rpiller

##### Share on other sites

You have the position formula, but what would the size (width/height), of the control, formula be? I don't want it to be the same absolute size on every resolution. I want it to scale proportionately with the resolution.so that you won't have more clean space but so it looks the same on every resolution.

As far as I can tell using %'s for position does the same as what you're saying as the % is always based on the top/left corner of the parent control. Results in the same positioning it would seem, and for me %'s make more sense in my head. The question still remains on the sizing of controls though and how to scale them proportionately across all resolutions using a base resolution that the values were designed against.

if you use percentages for position you have to use them for scale as well or things will get bad.

consider for example an object that is 1% wide and placed at x:99% (it will reach the edge of the screen perfectly).

if you make the window wider and keep x:99% you also have to keep the width at 1% (if you reduce the width to avoid stretching it won't reach the edge anymore and its position will be off).

With the system i described the scale is always size * resolution.y

so a 0.1x0.1 square sprite becomes 108x108px at both 1920x1080 and 1440x1080 (or any other resolution that is 1080px high,

at 800x600 however it would be 60x60px

##### Share on other sites

OK, I'll give this a shot. I have to see it in action and the same settings for different resolutions as I can't picture how it would exactly look in terms of size (I get position) in my head. I get that you'd get more clean space but for some reason I feel like that's not ideal. I feel like trying to closely match the screen space volume the UI takes up on all screen resolutions is ideal but maybe it's just not possible.

What is res.x & res.y? Resolution x & y would be 0's wouldn't they or are you assuming the positioning was done before this code and res.x and res.y represent the top-center point?

so if you place a 0.5 units wide and 0.1 unit high healthbar 0.05 units down and 0.25 units to the left (to compensate for its width) from the top-center you just draw it at:

x = res.x / 2 + (-0.25 * res.y) //not a typo, we always multiply with the vertical resolution, the horizontal resolution only affects the origin position
y = 0 + (0.05 * res.y) 

So the size formula in the above situation would be: width = .5 * res.width & .1 * res.width?

So basically all controls have to be given a starting point of either the edges, corners, or center and then these units are offsets from that?

Edited by rpiller

##### Share on other sites

One approach is to use both scale and pixel for positioning and size.

So position would be

(XScale, XPixels, YScale, YPixels)

So you may set XScale to 1 (assuming it goes from 0-1), and XPixels to -100 to add a gui element 100 pixels away from the RIGHT side of the screen.

You can also incorporate the relative-to-one-screen-dimension thing on top, so scale would be relative to either X or Y size of the screen only instead of X corresponding to screen X size and Y to Y size.

• 18
• 29
• 11
• 21
• 16