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 have a lot of objects on the screen and would like at different resolutions, object's positions rendered correctly on the screen irrespective of the resolution. Is it correct to multiply the position by aspect ratio ?

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted

Instead of noting your objects position with a 2d vector(absolute, in pixels) you should use a mix of two 2d vectors (relative, in percentage component and offset component)

The percentage component are two float variables with a value in the range 0.0 ~ 1.0. It specifies how much away from screen origin you are.

This explains it: enter image description here

This way, you can do it: {(0.5f,0.5f), (0,0)} to put an object on the center of the screen, {(0.0f,1f), (0,-5)} to put an object on the 5 pixels above the bottom of the screen. Etc.

To achieve this, you should use something like this to calculate the absolute coordinates given the relative:

Vector2 getAbsolute(RelativeVector rel)
{
    float x = (rel.percentage.X * ScreenWidth) + rel.Offset.X;
    float y = (rel.percentage.Y * ScreenHeight) + rel.Offset.Y;
    return new Vector2(x, y).
}

Should work fine. Lots of GUI systems use this approach.

EDIT:

As @milkplus stated, anchoring is a good way to do it too, and if I'm not mistaken it's also how Windows do it on it's UI designers.

Just in case, you can simulate it with Relative positioning too. You just have to specify the edge you want to use (0.0, 0.0, 1.0, 0.0, etc), and use the offset component. If you use a this relative position: {(1.0, 0.5), (-50, 0)} the object will always be 50 pixels away from right edge.

share|improve this answer
    
What do you mean by rel.percentage ? –  Ahmed Saleh Oct 12 '12 at 21:59
    
@MoazELdeen See my edit –  Gustavo Maciel Oct 12 '12 at 22:18
add comment

Instead of scaling like @Gustavo suggests, you could also just anchor your screen objects to the edges. That's how UI designers often work. A negative screen coodinate is taken to be anchored to the right or bottom.

if (x<0)
   x += ScreenWidth;
if (y<0)
   y += ScreenHeight;

For development, you could scale width and height for resolution. I would recommend uniform scaling instead of using the aspect ratio. Take the minimum of (designWidth/screenWidth) and (designHeight/screenHeight) to scale your UI elements. I normally pick ipad2 resolution (1024,768) as my design resolution.

For production, I would recommend having different sets of bitmaps rather than scaling.

share|improve this answer
add comment

If you originally setup your GUI while considering a system with resolution Width X Height, you can position items in other resolutions in x * newWidth / Width, y * newHeight / Height (make sure to cast these integers' values to floats). Items' widths and heights can be treated the same way. Essentially, like you said:

  1. Calculating the ratio between the original resolution and the current one.
  2. Multiply the position or size of the item by change in ratio % from the original display resolution.
share|improve this answer
add comment

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.