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?

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.

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.

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.

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.

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?