Lets say your GUI uses a logical width and height of 1920x1080 pixels.

Your actual screen width and height can change at any time like when the user resizes the window or changes resolution.

All of the coordinates and dimensions expressed by your GUI code are expressed relative to the logical size and you must do the conversion when you render the textured 2 triangle box.

So you need to do the following:

Compute the ratio of logical width to screen width, and the same for height.

The smallest ratio becomes the zoom factor.

Compute the padding needed to center the GUI.

(this is basically the make-the-image-fill-a-box-and-preserve-aspect-ratio algorithm)

I've implemented it, and I'm drawing it to the screen with identity world matrix.

So basically screen_x = logical_x * ratio;

I haven't figured out the padding yet (i seem to have too much padding)

and the zoom seems to be a bit off when the window is extremely squished into a rectangle.

What irritates me is that I've solved this before but now I can't remember how and I can't find that code from so long ago.

I was going at it completely wrong.

OK, so the way that works is...

Compute the ratios like before.

Take the greatest ratio and use it to normalize the two ratios (divide both of them by the biggest one).

Use these two normalized ratios as the zoom factor (ie, ratio_x becomes zoom_x)

To find the padding, find the extra space and divide by half. (ie, padding_x = (1.0f - zoom_x) * 0.5f ).

So when you render the box, you take the x position, y position, width and height, divide by logical screen dimensions, multiply by zoom factor, and add padding and you end up with vertex coords in the range of 0.0 to 1.0f.

To use those with identify matrix, you do x * 2.0f - 1.0f.

For those of you who are wondering what I'm doing...

I'm zooming the GUI down and adding padding to center it so that I can have a consistent GUI across all screen resolutions and aspect ratios.

When you position and size the GUI elements, you only need to place them using the logical 1920x1080 screen space. The user doesn't have to manually drag things around because their screen is too big or too small.

The only downside is the textures for the GUI elements will become blurry as you scale them down for really low resolutions.

The only downside is the textures for the GUI elements will become blurry as you scale them down for really low resolutions.

You can avoid this by treating your UI elements (controls) as "box" elements, i.e. borders and content, like in CSS. It might be a bit more effort to implement, but it should be worth it. The box-drawing can probably be implemented as a simple pixel shader, by using the sampling coordinates to keep the sampling of borders (edges and corners) at their original width/height, and to only scale the horizontal edges horizontally, the vertical ones vertically and the content/background should be scaled in both directions. Alternatively, instead of scaling, you could also repeat the edges/content.