How to adjust position relative to resolutions?

Question

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 ?

Answer 1

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:

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.

Answer 2

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.

Answer 3

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.