Resolution Matching

Basically, on one computer, I have a resolution of 1600x900 while on another i have a resolution of 1920x1080. How do i get the content to be in the same place no matter the resolution as i have to move buttons everytime?

There are lot’s of different solutions to this problem depending on the results you want.

The simplest is to have a off-screen render target at a fixed resolution you work in, then draw this to the screen at the end of the render pass.

I hate this solution as you get scaling artefacts all over the place and to me it looks awful.

The best solution is to write your code with varying resolution in mind. It’s a lot of work though.

Use a coordinate system based on 0-1 and when you create a widget work out the screen location based on the display resolution.

So instead of saying " I want a window 100 pixels wide and 200 deep at x = 10 pixels y = 10 pixels"

You have to say “I want a window 5.2% wide and 10.4% deep at x = 0.52%, y=0.52%”

Of course for this to look good you still need to change your rendering of the actual widgets. Typically doing 9 draw calls for each window instead of 1

Another way I have seen work is to use a matrix.

When you draw each widget you pass in a matrix that scales all the coordinates , you can pass in a matrix to spritebatch very easily.

Basically it comes down to two things.

  1. How much you care about scaling artefacts
  2. How much work you are willing to do
1 Like

protected override void Initialize()
{
// scale the display to the screen set your own screen size
TouchPanel.DisplayHeight = 800;
TouchPanel.DisplayWidth = 600;

        Viewport bp = new Viewport(0, 0, 600, 800);
        GraphicsDevice.Viewport = bp;

        this.Window.AllowUserResizing = true;
        this.Window.BeginScreenDeviceChange(true);
      
        base.Initialize();
    }

this works on all platforms for get the start of XNA framework the backbuffer stuff in the graphics.

render all your stuff out to a rendertarget
and use a sprite to draw the rendertarget
renderTarget2D = new RenderTarget2D(GraphicsDevice, 600, 800);

in your draw code
GraphicsDevice.SetRenderTarget(renderTarget2D);

render all your 3d or 2d stuff

GraphicsDevice.SetRenderTarget(null);
GraphicsDevice.Clear(Color.Black);
spriteBatch.Begin();
spriteBatch.Draw(renderTarget2D, new Rectangle(0, 0, GraphicsDevice.Viewport.Width, GraphicsDevice.Viewport.Height), Color.White);
spriteBatch.End();

that all there to it
Michael Hansen

Hmm, I suppose one should put this in a tutorial at some point?