Solving Resolution Independent Rendering And 2D Camera Using Monogame
As i promised in my previous post where i announced my Windows 8 game Marbles, i will try to tackle some of the common problems that beginner game developers encounter.
In this post i will jump ahead a little and talk about Resolution Independent Rendering using Monogame.
What the heck is Resolution Independent Rendering?
Well its fancy name for finding ways to not care about resolution during your game development.
Idea is that you render always using fixed (internal) virtual resolution you choose and then simply stretch or shrink all that for the real resolution of the current device you are using to display the game.
Sounds simple right?
Why solving Resolution Independent Rendering?
Because of multiple reasons:
- First of all its very important and difficult subject. You don’t want to care about resolution on which you are displaying your game. Game developer has enough problems to solve even without this.
- Every game developer that is targeting multiple devices/platforms has to solve this in one way or another
- I struggled until i found a solution for this and want to share it with the community
- many people lately asked me to share code for this and i kept sending them same email with zipped source code for this so it seems like a good idea for blog post
How are we going to solve it?
Firstly, we will decide on the internal resolution for our game, lets say 1366×768.
Then we will determine what is the real screen resolution of the device/monitor where we are rendering our game.
Then we will determine what is the best fit rectangle that we can get on this real screen that matches our virtual resolution (but always maintaining aspect ratio of the Virtual Resolution we decided so we don’t have stretching/shrinking artefacts).
For example if real screen resolution is bigger then our internal virtual resolution, we will create a best fit ‘viewport’ inside of that larger resolution by maintaining aspect ratio but stretching our viewport – therefore our game screens will be stretched and rendered inside this bigger viewport on the screen.
For smaller screen we will do the opposite – shrink the viewport and maintain aspect ratio of our virtual resolution – therefore our game gfx will first shrink to fit into the smaller viewport and then be rendered on the screen.
Since the viewport we decide on will often not fill the real screen around it we will fill it with some color – effect known in film industry as Letterboxing.
Once we know that centered viewport rectangle where we will render our stretched/shrinked screen we then create transformation matrix that we will use in all the rendering calls (by passing it to the SpriteBatch.Begin method).
Also we need to set the Mogame/XNA ViewPort property to that same viewport to limit rendering only to this region on the real screen.
To be honest, I’m not the one who invented this technique, first time i saw someone using GraphicDevice Viewport for this is David Amadors blog post on same subject where he shares example on how to achieve resolution independence with XNA.
But this was not enough for me i wanted to have also a Camera on top of that so that i can rotate zoom etc.
So i included camera that builds up on this resolution transformation matrix of the Resolution Renderer and creates its own view matrix (rotated, zoomed, translated etc).
Where is the code???
In the sample visual studio 2012 solution you can see this in action where we are rendering a fixed image of 1366×768 to any screen you try it on, stretching and shrinking it accordingly without any changes in the code. Also you can use keyboard + and – to control camera zoom and Shift + and Shift – to rotate it.
And the screenshots?
Here are the screenshots of the sample code running on 3 different screens/devices:
1680×1050 monitor: image is stretched with little orange bar above
1280×1024: image is shrinked and we have strong pillarboxing effect
1024×768 – image is shrinked with some pillarboxing
Note: this orange color is just for the demo, code allows you to easily set what color will the Pillarbox be.
In the sample Visual Studio 2012 solution for Monogame 3.0.1 you will want to check out two important classes:
1. ResolutionIndependentRenderer – this class handles everything about resolutions and creates viewport transformation matrix for resolution independence
2. Camera2D – this class usess ResolutionIndependentRenderer and its matrix and creates final camera view matrix you should use for SpriteBatch and allows you to set camera position, zoom, rotate etc
Here is the code for ResolutionIndependentRenderer:
001 | using Microsoft.Xna.Framework; |
002 | using Microsoft.Xna.Framework.Graphics; |
003 |
004 | namespace Roboblob.XNA.WinRT.ResolutionIndependence |
005 | { |
006 | public class ResolutionIndependentRenderer |
007 | { |
008 | private readonly Game _game; |
009 | private Viewport _viewport; |
010 | private float _ratioX; |
011 | private float _ratioY; |
012 | private Vector2 _virtualMousePosition = new Vector2(); |
013 |
014 | public Color BackgroundColor = Color.Orange; |
015 |
016 | public ResolutionIndependentRenderer(Game game) |
017 | { |
018 | _game = game; |
019 | VirtualWidth = 1366; |
020 | VirtualHeight = 768; |
021 |
022 | ScreenWidth = 1024; |
023 | ScreenHeight = 768; |
024 | } |
025 |
026 | public int VirtualHeight; |
027 |
028 | public int VirtualWidth; |
029 |
030 | public int ScreenWidth; |
031 | public int ScreenHeight; |
032 |
033 | public void Initialize() |
034 | { |
035 | SetupVirtualScreenViewport(); |
036 |
037 | _ratioX = (float)_viewport.Width / VirtualWidth; |
038 | _ratioY = (float)_viewport.Height / VirtualHeight; |
039 |
040 | _dirtyMatrix = true; |
041 | } |
042 |
043 | public void SetupFullViewport() |
044 | { |
045 | var vp = new Viewport(); |
046 | vp.X = vp.Y = 0; |
047 | vp.Width = ScreenWidth; |
048 | vp.Height = ScreenHeight; |
049 | _game.GraphicsDevice.Viewport = vp; |
050 | _dirtyMatrix = true; |
051 | } |
052 |
053 | public void BeginDraw() |
054 | { |
055 | // Start by reseting viewport to (0,0,1,1) |
056 | SetupFullViewport(); |
057 | // Clear to Black |
058 | _game.GraphicsDevice.Clear(BackgroundColor); |
059 | // Calculate Proper Viewport according to Aspect Ratio |
060 | SetupVirtualScreenViewport(); |
061 | // and clear that |
062 | // This way we are gonna have black bars if aspect ratio requires it and |
063 | // the clear color on the rest |
064 | } |
065 |
066 | public bool RenderingToScreenIsFinished; |
067 | private static Matrix _scaleMatrix; |
068 | private bool _dirtyMatrix = true; |
069 |
070 | public Matrix GetTransformationMatrix() |
071 | { |
072 | if (_dirtyMatrix) |
073 | RecreateScaleMatrix(); |
074 |
075 | return _scaleMatrix; |
076 | } |
077 |
078 | private void RecreateScaleMatrix() |
079 | { |
080 | Matrix.CreateScale((float)ScreenWidth / VirtualWidth, (float)ScreenWidth / VirtualWidth, 1f, out _scaleMatrix); |
081 | _dirtyMatrix = false; |
082 | } |
083 |
084 | public Vector2 ScaleMouseToScreenCoordinates(Vector2 screenPosition) |
085 | { |
086 | var realX = screenPosition.X - _viewport.X; |
087 | var realY = screenPosition.Y - _viewport.Y; |
088 |
089 | _virtualMousePosition.X = realX / _ratioX; |
090 | _virtualMousePosition.Y = realY / _ratioY; |
091 |
092 | return _virtualMousePosition; |
093 | } |
094 |
095 | public void SetupVirtualScreenViewport() |
096 | { |
097 | var targetAspectRatio = VirtualWidth / (float) VirtualHeight; |
098 | // figure out the largest area that fits in this resolution at the desired aspect ratio |
099 | var width = ScreenWidth; |
100 | var height = (int)(width / targetAspectRatio + .5f); |
101 |
102 | if (height > ScreenHeight) |
103 | { |
104 | height = ScreenHeight; |
105 | // PillarBox |
106 | width = (int)(height * targetAspectRatio + .5f); |
107 | } |
108 |
109 | // set up the new viewport centered in the backbuffer |
110 | _viewport = new Viewport |
111 | { |
112 | X = (ScreenWidth / 2) - (width / 2), |
113 | Y = (ScreenHeight / 2) - (height / 2), |
114 | Width = width, |
115 | Height = height |
116 | }; |
117 |
118 | _game.GraphicsDevice.Viewport = _viewport; |
119 | } |
120 | } |
121 | } |
And then there is Camera2D that has all the usual camera properties that you can use to move it around and zoom rotate etc.
Here is the code for camera:
001 | using Microsoft.Xna.Framework; |
002 | using Roboblob.XNA.WinRT.ResolutionIndependence; |
003 |
004 | namespace Roboblob.XNA.WinRT.Camera |
005 | { |
006 | public class Camera2D |
007 | { |
008 | private float _zoom; |
009 | private float _rotation; |
010 | private Vector2 _position; |
011 | private Matrix _transform = Matrix.Identity; |
012 | private bool _isViewTransformationDirty = true; |
013 | private Matrix _camTranslationMatrix = Matrix.Identity; |
014 | private Matrix _camRotationMatrix = Matrix.Identity; |
015 | private Matrix _camScaleMatrix = Matrix.Identity; |
016 | private Matrix _resTranslationMatrix = Matrix.Identity; |
017 |
018 | protected ResolutionIndependentRenderer ResolutionIndependentRenderer; |
019 | private Vector3 _camTranslationVector = Vector3.Zero; |
020 | private Vector3 _camScaleVector = Vector3.Zero; |
021 | private Vector3 _resTranslationVector = Vector3.Zero; |
022 |
023 | public Camera2D(ResolutionIndependentRenderer resolutionIndependence) |
024 | { |
025 | ResolutionIndependentRenderer = resolutionIndependence; |
026 |
027 | _zoom = 0.1f; |
028 | _rotation = 0.0f; |
029 | _position = Vector2.Zero; |
030 | } |
031 |
032 | public Vector2 Position |
033 | { |
034 | get { return _position; } |
035 | set |
036 | { |
037 | _position = value; |
038 | _isViewTransformationDirty = true; |
039 | } |
040 | } |
041 |
042 | public void Move(Vector2 amount) |
043 | { |
044 | Position += amount; |
045 | } |
046 |
047 | public void SetPosition(Vector2 position) |
048 | { |
049 | Position = position; |
050 | } |
051 |
052 | public float Zoom |
053 | { |
054 | get { return _zoom; } |
055 | set |
056 | { |
057 | _zoom = value; |
058 | if (_zoom < 0.1f) |
059 | { |
060 | _zoom = 0.1f; |
061 | } |
062 | _isViewTransformationDirty = true; |
063 | } |
064 | } |
065 |
066 | public float Rotation |
067 | { |
068 | get |
069 | { |
070 | return _rotation; |
071 | } |
072 | set |
073 | { |
074 | _rotation = value; |
075 | _isViewTransformationDirty = true; |
076 | } |
077 | } |
078 |
079 | public Matrix GetViewTransformationMatrix() |
080 | { |
081 | if (_isViewTransformationDirty) |
082 | { |
083 | _camTranslationVector.X = -_position.X; |
084 | _camTranslationVector.Y = -_position.Y; |
085 |
086 | Matrix.CreateTranslation(ref _camTranslationVector, out _camTranslationMatrix); |
087 | Matrix.CreateRotationZ(_rotation, out _camRotationMatrix); |
088 |
089 | _camScaleVector.X = _zoom; |
090 | _camScaleVector.Y = _zoom; |
091 | _camScaleVector.Z = 1; |
092 |
093 | Matrix.CreateScale(ref _camScaleVector, out _camScaleMatrix); |
094 |
095 | _resTranslationVector.X = ResolutionIndependentRenderer.VirtualWidth*0.5f; |
096 | _resTranslationVector.Y = ResolutionIndependentRenderer.VirtualHeight * 0.5f; |
097 | _resTranslationVector.Z = 0; |
098 |
099 | Matrix.CreateTranslation(ref _resTranslationVector, out _resTranslationMatrix); |
100 |
101 | _transform = _camTranslationMatrix * |
102 | _camRotationMatrix * |
103 | _camScaleMatrix * |
104 | _resTranslationMatrix * |
105 | ResolutionIndependentRenderer.GetTransformationMatrix(); |
106 |
107 | _isViewTransformationDirty = false; |
108 | } |
109 |
110 | return _transform; |
111 | } |
112 |
113 | public void RecalculateTransformationMatrices() |
114 | { |
115 | _isViewTransformationDirty = true; |
116 | } |
117 | } |
118 | } |
How to use all this???
Its simple
In your Game create instance of ResolutionIndependentRenderer and SimpleCamera2D.
Camera accepts the instance of ResolutionIndependentRenderer in the constructor cause it uses its resolution Matrix to calculate its own view Matrix.
On start of your game (or whenever your real screen resolution changes) – user rotates the device, or moves the game to another monitor on desktop PC etc. – you must initialize the
ResolutionIndependentRenderer like this and also invalidate the camera matrix:
01 | private void InitializeResolutionIndependence(int realScreenWidth, int realScreenHeight) |
02 | { |
03 | _resolutionIndependence.VirtualWidth = 1366; |
04 | _resolutionIndependence.VirtualHeight = 768; |
05 | _resolutionIndependence.ScreenWidth = realScreenWidth; |
06 | _resolutionIndependence.ScreenHeight = realScreenHeight; |
07 | _resolutionIndependence.Initialize(); |
08 |
09 | _camera.RecalculateTransformationMatrices(); |
10 | } |
As you see above we are passing to the ResolutionIndependentRenderer virtual resolution we want to use internally and the real resolution of the screen, and then we recalculate matrices in the camera. From that point we can use the same cached camera matrix until we change position or zoom etc (this is handled internally in the camera code).
Here exceptionally we manually have to notify the Camera class that we changed the ResolutionIndependentRenderer matrix so it can recalculate its own matrix.
Next stop is our Draw method of the game:
01 | protected override void Draw(GameTime gameTime) |
02 | { |
03 | _resolutionIndependence.BeginDraw(); |
04 | _spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend, SamplerState.LinearWrap, DepthStencilState.None, RasterizerState.CullNone, null, _camera.GetViewTransformationMatrix()); |
05 | _spriteBatch.Draw(_bkg, _bkgPos, Color.White); |
06 | _spriteBatch.DrawString(_debugFont, string.Format("Translated Mouse Pos: x:{0:0} y:{1:0}",_screenMousePos.X,_screenMousePos.Y), _mouseDrawPos, Color.Yellow); |
07 | _spriteBatch.DrawString(_debugFont, _instructions, _instructionsDrawPos, Color.Yellow); |
08 | _spriteBatch.End(); |
09 |
10 | // TODO: Add your drawing code here |
11 |
12 | base.Draw(gameTime); |
13 | } |
Calling the BeginDraw method on ResolutionIndependentRenderer internally first sets the viewport to full screen, clear it with color that is set in its Background property and then sets the virtual resolution viewport to our virtual resolution so whatever we draw its drawn in the correct centered rectangle.
That way we get that color fill around our game.
Another thing to notice there is that we are passing a camera view matrix to the SpriteBatch.Begin call:
1 | _spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend, SamplerState.LinearWrap, DepthStencilState.None, RasterizerState.CullNone, |
2 | null, _camera.GetViewTransformationMatrix()); |
This is very important cause if you don’t do this, you will still be drawing to the full screen and we don’t want that.
By passing the Matrix from our camera to the SpriteBatch we tell it to rotate, zoom and translate all our draws to the correct place
Benefit of all this is that we can setup camera and zoom and rotate our screen and move camera around.
At start of the sample code i center the camera to the middle of the virtual screen and set zoom to 1.0 but you can change/animate those values and have some nice effects.
Here is how the camera initialization code looks like:
1 | _camera = new Camera2D(_resolutionIndependence); |
2 | _camera.Zoom = 1f; |
3 | _camera.Position = new Vector2(_resolutionIndependence.VirtualWidth / 2, _resolutionIndependence.VirtualHeight / 2); |
Download the sample visual studio 2012 solution and play with it.
Try to run it on multiple screen resolutions, it should always adapt as best possible and maintain aspect ratio of virtual resolution when stretching/shrinking it to the real screen.
Another cool feature of the ResolutionIndependentRenderer is the ability to convert our real screen mouse position to the virtual mouse position:
1 | _screenMousePos = _resolutionIndependence.ScaleMouseToScreenCoordinates(_inputHelper.MousePosition); |
This is needed because our mouse events are happening in the real screen resolution and we need to convert (translate) them to the correct position in our virtual resolution space which is usually shifted (unless your screen is same size as your virtual resolution) so this method allows you to do that easily.
I hope this code will be of help to all the aspiring XNA/Monogame developers out there!
Check out the sample and let me know if it helps you!
THAT is realy awesome! Thanks for such a nice piece of code! I’ve found many implementations on the net but none of them was such complete!
It saved me a whole bunch of time!
Do you have a solution for the new Windows 8.1 windowing modes? The new windowing modes have the same three states (snapped, filled, and fullscreen), but snapped and filled modes can now be pretty much any size. I ran your sample project, and filled worked well at any size, but snapped remained at 320. Probably something in the monogame framework, but I’m trying to find a workaround right now so that I can get my update out for the 8.1 launch.
Unfortunately i don’t have Win 8.1 so i cannot check, but im sure that my solution for resolution independence works for any resolution.
Just make sure to set the parameters (ScreenSize and VirtualScreenSize) correctly.
Your solution, with respect to the snapped view on windows 8.1 currently demonstrates an unexpected behavior. The application continues treating this window as if it’s width is 320, and the content is scaled likewise.
OK, so it turns out this was pretty much my fault, and I must apologize. Building an application that works with the new Windows 8.1 RC features requires first installing Visual Studio 2013 RC. Opening your solution in 2013 RC and retargetting it for 8.1 RTM solved the issue I was running into. Your patience and hard work on this tutorial/project are much appreciated.
This is a great solution, because the first one did not handle for a 2D camera, but unfortunately I wasn’t able to get the result I was looking for. I’m developing for 1366×768 and running my game on a 24 inch 1920×1080 resolution monitor and finding problems with my 2D textures. My sprites scale nicely, which saves me from operating on them all of the time, but my fullscreen textures don’t fill the screen, leaving me with an off-centered effect.(drawing at vector.zero, leaving the letterbox to the right and bottom of the screen!) I’m sure things are supposed to be centered, so do you know what might be causing this?
Oops! Nevermind….As soon as I posted my problem, I turned around and solved the problem. I was drawing my background 2D textures with a fullscreen rectangle variable.
Thanks so much for this great solution!
Hi Rico,
yes its very common, once you share the problem with someone it solves it self in your mind
I’m glad you have it working finally!
If you build something interesting share with us!
Have a great day!
Slobo
Hi Slobo!
Actually, I already have several games out on Windows Phone, and thanks to skillful coders such as yourself; I can now translate to Windows 8 and other devices. I am getting ready to start using Unity Pro, but have several XNA games that I am going to translate using Monogame.
I loved making games for Windows phone, because I could target one resolution. After coding about 50 percent of a game for Windows desktop using Vector calculations for each sprites/textures scale, I found the Resolution Independent code, but it didn’t account for the 2D camera like yours does!
Thank you very much for identifying the needed upgrade to the first solution and sharing! I can now scrap the archaic way I was going about handling multiple resolutions!
I will definitely post back to your site when the first game is done using XNA/Monogame/IndependentResolution2Dcamera code!
So how do I set a resolution exactly? Setting the preferred back buffer width and height works, but in fullscreen, it takes my native resolution. I would check out the sample project, but I need Windows 8 to view it.
To clarify, this works perfectly when running windowed. It letterboxes and scales nicely. But if I want to make it fullscreen, my 1280×720 background test texture is being drawn at the top left, leaving huge black bars at the bottom and the right. Perhaps you could clarify a bit on how to initialize this renderer correctly?
Hi,
yes probably some problem with initialization. You need to call method InitializeResolutionIndependence with proper values (real resolution of screen) whenever your screen size changes, so i presume you are not doing that properly when you run it in full screen mode.
Send me some sample code that demonstrates your problem maybe i could help you.
I will send you my private email address directly…
I really like this I have been working on implementing it in my code. One thing I changed that solved my Background placement issues was to move setting the VirtualWidth and VirtualHeight to LoadContent before Camera initialization. I did this because I was having issues with my background being pushed down and to the right. I figured out that the position is only set on Camera initialization so it is of no use to set it after it is needed.
I was having issues with the scaling being off when it would switch to pillarbox so I did a little retooling to the ResolutionIndependentRenderer.cs to get it to work.
Added a _scale field.
private double _scale;
changed SetupVirtualScreenViewport to calculate and use _scale
int height, width;
double widthScale = 0, heightScale = 0;
widthScale = (double)ScreenWidth / (double)VirtualWidth;
heightScale = (double)ScreenHeight / (double)VirtualHeight;
_scale = Math.Min(widthScale, heightScale);
width = (int)(VirtualWidth * _scale);
height = (int)(VirtualHeight * _scale);
// set up the new viewport centered in the backbuffer
_viewport = new Viewport
{
X = (ScreenWidth - width) / 2,
Y = (ScreenHeight - height) / 2,
Width = width,
Height = height
};
_game.GraphicsDevice.Viewport = _viewport;
Changed RecreateScaleMatrix to use _scale
Matrix.CreateScale((float)_scale, (float)_scale, 1f, out _scaleMatrix);
_dirtyMatrix = false;
Hi John,
thanks for the reply and for sharing your update to the code, i hope other people will find it useful.
That corrected the screen pos problem I was having, great stuff many thanks to both of you!
I know this is an old post but I just recently found it and have integrated it into my game ( I’m porting a PC game to iOS). I must say that this has saved me countless hours and I can’t thank you enough!
I am running into an issue however, when targeting retina ipads (2048×1536). My virtual resolution is set to 1280×720 and when I run the game, my textures are all scaled perfectly, but the viewport is getting clipped to the top left. I am at a loss as to why this is happening, it works perfectly on my regular ipad(1024×768).
Any thoughts or comments would be greatly appreciated.
Thanks again!
Hi Jon, im glad my post helped in some way.
Regarding clipped viewport can you please send me some screenshot of this problem and part of code where you initialize the resolution
of my class.
I suspect that after screen is initalized you just need to reinitialize the class with proper size of the screen.
You can send me more details on spavkov [a t] gmail dot com
Thanks! I sent you an email.
Hello,
I am actually experiencing this same problem in 2017 and haven’t been able to fix it on my own. I was wondering is this is something to do with having a more recent version of MonoGame. Could you share the solution, if you found it? Thank you.
Hi,
First of all, great post!
I’m having sort of same problems as Jon. roboblob, could you perhaps post the solution for this issue?
resolution the app was built for:
Width = 768;
HeightHeight = 1280;
Real resolution:
Width = 720;
Height= 1280;
So what happens is:
– Orange spacing on top
– Orange spacing on the bottom
– Orange spacing at the right side
But I’d expect that it would resize it to full width (720) with smaller spacing on top and bottom.
Any suggestions?
Ok,
Managed to fix the one that i mentioned above, seemed to be an issue in my code.
But I got another issue at the moment:
resolution the app was built for in windows phone:
Width = 768;
HeightHeight = 1280;
on android i am testing with
Width = 225;
HeightHeight = 301;
For some reason the content does not fit into the window?
picture of the issue can be found here:
http://i61.tinypic.com/szv66v.png
Is there a way to translate the mouse position on the real screen to the virtual screen based on the zoom of the camera?
So that 0,0 on the real screen isn’t 0,0 on the virtual screen if the zoom != 1.
I hope I exlpained it enough.
Thanks for the great solution.
I think this sould work.
Vector2 CameraWindowDimensions = new Vector2(ResolutionIndependentRenderer.VirtualWidth, ResolutionIndependentRenderer.VirtualHeight) / Camera2D.Zoom;
Vector2 CameraWindowTopLeftCorner = Camera2D.Position - (CameraWindowDimensions / 2);
// This is the scaled mouse position based on the camera position and zoom
Vector2 CameraScaledMousePosition = CameraWindowTopLeftCorner + (ResolutionIndependentRenderer.ScaleMouseToScreenCoordinates(MousePosition) / Camera2D.Zoom);
Hello everyone first I want to say thank you. This is working for my project. Lumia 1520 game scaled down to 800 x 480. I did run into a problem. I see you supported converted mouse positions. Any chance to support touch positions?
How do i get the user realScreenWidth, realScreenHeight? s;
Hi,
I’ve been using this solution for a while but I have a problem. When I zoom with the camera the mouse position is off, the more I move the mouse from the center the offset increases. It works perfectly well as long as I don’t zoom though. Any idea?
Thank you,
Simon
Was wondering if there is a way to draw to the letterbox orange areas? basically I need a way to tell if someone has touched outside the play area and wanted to represent a graphic of some kind so users know to press there?