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.

enter image description here

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!

  • \$\begingroup\$ math.stackexchange.com/questions/419838/… \$\endgroup\$
    – Tetrad
    Commented Jun 14, 2013 at 15:32
  • \$\begingroup\$ @Tetrad - I'm not sure this really needs to be referenced here. The answer comes out as the same. It really was for my benefit only. I was struggling because I was using Byte56 technique before I came here but was confused that it wasn't working... I posted on the math forum to make sure I wasn't be a complete noob. then posted here to see why my code was not working. I successfully got the answer to both questions and then could see that it was that I was not re-declaring the size of the backbuffer thus it was incorrectly scaling it rather than it being the technique. \$\endgroup\$
    – Jimmyt1988
    Commented Jun 15, 2013 at 0:25

1 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;
  • \$\begingroup\$ do you mean NewPosition.x = ( newScreenWidth / oldScreenWidth ) * currentPosition.x? \$\endgroup\$
    – Jimmyt1988
    Commented Jun 14, 2013 at 0:09
  • \$\begingroup\$ Nice one thanks. Makes sense. Let me finish putting in the code into my game and i'll tick it off! \$\endgroup\$
    – Jimmyt1988
    Commented Jun 14, 2013 at 0:13
  • \$\begingroup\$ Cheers for the code. I had some issues and then found out that I have to redeclare the back buffer size too.. And then wow does it work. Hurrahh \$\endgroup\$
    – Jimmyt1988
    Commented Jun 15, 2013 at 0:15
  • 1
    \$\begingroup\$ Great! Glad it's working. Good luck with your game! Come by chat and tell us about it sometime. \$\endgroup\$
    – House
    Commented Jun 15, 2013 at 0:35
  • \$\begingroup\$ What happens if the aspect ratios of old width and new width and old height and new height differ? for example 1920 x 1200 down to 1920 x 1080. what do you normally do then? \$\endgroup\$
    – Jimmyt1988
    Commented Jul 2, 2013 at 23:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .