Repositioning and resizing when i change the size of my window

Question

I am trying to write a game.

When someone resizes the window of my game, I need all the graphics i have drawn on the screen to reposition correctly so that the ratio of the graphics' width and height remain correct and that the new position determined by x and y, have been adjusted for the new size screen.

In the following image, the top left corner is 0,0... all coordinates / widths / heights are measured from this point.

What do I need to do to x, y, width and height from the variable width and height of my screen in order to keep this aspect ratio correct?

SIDE NOTE: the aspect ratio of the screen will always be 16:9!

Answer 1

You have two values to work with, the change in X (dx) and the change in Y (dy) (really the ratio between the two sizes). When changing from one size to another while maintaining the same aspect ratio, dx and dy will be very close to each other (slight differences due to the integer aspect of pixel counts).

So, in your example:

dx = 1376/1920 = .716
dy = 768/1080 = .711

This is a factor you'll apply to size and position values to scale them to the new screen. So again, in your example, your box would be changed in size:

100*.716 = 71.6
100*.711 = 71.1

And the position would likewise change:

1850*.716 = 1325.8
20*.711 = 14.2

The general formula being:

NewPosition.x = (NewScreenWidth/OldScreenWidth) * CurrentPosition.x;
NewPosition.y = (NewScreenYHeight/OldScreenHeight) * CurrentPosition.y;

NewSize.x = (NewScreenWidth/OldScreenWidth) * OldSize.x;
NewSize.y = (NewScreenHeight/OldScreenHeight) * OldSize.y;