Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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!

share|improve this question
    
    
@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. –  Jimmyt1988 Jun 15 '13 at 0:25

1 Answer 1

up vote 1 down vote accepted

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;
share|improve this answer
    
do you mean NewPosition.x = ( newScreenWidth / oldScreenWidth ) * currentPosition.x? –  Jimmyt1988 Jun 14 '13 at 0:09
    
Nice one thanks. Makes sense. Let me finish putting in the code into my game and i'll tick it off! –  Jimmyt1988 Jun 14 '13 at 0:13
    
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 –  Jimmyt1988 Jun 15 '13 at 0:15
1  
Great! Glad it's working. Good luck with your game! Come by chat and tell us about it sometime. –  Byte56 Jun 15 '13 at 0:35
    
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? –  Jimmyt1988 Jul 2 '13 at 23:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.