• 16
• 15
• 12
• 9
• 10

# Independent resolution

This topic is 2047 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hi,

I am developing a game with XNA and I am a little desperate with resolutions. For now I have only implemented the main menu but I want to get a game that is independent of the resolution. As I am a beginner, I haven't taken into account the resolution so far. When I started to change the resolution, began my real headache.

The background image that I use has a 1920x1080 resolution, so it has an aspect ratio 16:9 (panoramic). The initial resolution was 800x600, so the background image looks stretched. The same happens with resolutions with aspect ratio 4:3 (640x480, 1024x768...).

Before post in this forum, I search information on Internet and I find this solution: http://www.david-amador.com/2010/03/xna-2d-independent-resolution-rendering/ (and similar in other pages). The solution offered by the site seems perfect to me at first because I wasn't thinking of using two resolutions (one internal for drawing and one that correspond to the size of the windows).

However I has been observing some problems:

- The first thing is the fullscreen mode. When I turns the game in fullscreen mode and its resolution is lower than the OS's resolution, the game doesn't stretch the resolution to fill the entire screen. This makes that the game looks at the center of the screen but appears black border on both sides of the screen.

- The second problem is again with the aspect ratio. As I say above, the aspect ratio of my background image is 16:9. However the resolutions that I am trying has an aspect ratio of 4:3. With the page solution, I has the same problem (the background image seens to be stretched). I started to research the code to find a solution and changing the function RecreateScaleMatrix() to this:
[source lang="csharp"]
private static void RecreateScaleMatrix()
{
_dirtyMatrix = false;
float aspect = 16.0f / 9.0f;
_scaleMatrix =
Matrix.CreateScale((float)_device.GraphicsDevice.Viewport.Width / _virtualWidth,
(float)_device.GraphicsDevice.Viewport.Height / _virtualHeight, 1f) *
Matrix.CreateScale(1, EngineManager.GameGraphicsDevice.Viewport.AspectRatio / aspect, 1) *
Matrix.CreateTranslation(0,
(_device.GraphicsDevice.Viewport.Height - (_device.GraphicsDevice.Viewport.Height / aspect)) / 4.0f,
0);
}
[/source]
seems to be solved, but only on certain resolutions and futher reducing the rectangle which show the final result.

I have been thinking all these problems all day and I realized that without knowing exactly the resolution of the image to draw in advance (it can be have a aspect ratio of 4:3, 16:9 or other) is almost impossible to draw an image clearly.

Does anyone know how to solve all these problems? I have lost many days only in this and I am really frustrated.

PD: Excuse my English level.

##### Share on other sites
I've seen the blog and downloaded the source code, that is for XNA 3.0.

If you use XNA 4.0 you must change a line on your spriteBatch.Begin() call like this:
 spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.AlphaBlend, SamplerState.LinearClamp, DepthStencilState.None, RasterizerState.CullNone, null, Resolution.getTransformationMatrix()); 
Note: if you want old stile blocky pixels change SamplerState.LinearClamp to SamplerState.PointClamp.

The small image with a black border is due to the wrong setting of:
 Resolution.SetVirtualResolution(1024, 768); Resolution.SetResolution(1280, 800, false); 
the SetResolution() must be always been set to the real size of the window (or real resolution in full-screen):
 Resolution.SetVirtualResolution(1024, 768); Resolution.SetResolution(GraphicsDevice.DisplayMode.Width, GraphicsDevice.DisplayMode.Height, true); 

Now you can freely change the SetVirtualResolution() to any resolution you want.

With these corrections the code work properly on XNA 4.0 (I have tested it) and retain correct aspect ratio when drawing with SpriteBatch, without changing any other code.

Has last note if you prefer black border you need to change the _Device.GraphicsDevice.Clear(Color.CornflowerBlue); inside the Resolution.BeginDraw(); (in resolution.cs)

Hope it helped.
If you have questions, please tell me.