How to make my Monogame windows game compatible with every single screen type?

Question

First of all, I posted this question here and not at game development because I just started my project and this question is not really about XNA or Monogame libraries.

So, i am trying to make my game compatible with every single screen type. there are two aspects i need to pay attention to- ratio, and pixels size. before i'm creating any graphics for my game, ill need to know the dimensions of every single object in my game,(player,background, etc) and get the right dimensions to match the screen ratio, and change with it as well.

I searched the web looking for XNA/Monogame tutorials that show how to do that and i didn't find a single one. I tried basic fullscreen methods. but as you know, the object stand still and they wont move with the window. And as I mentioned before I need them to move and change size with the window to make my game compatible with every single screen type. (ratio and pixels(inch/cm))

Answer 1

I think the term you're looking for is resolution independence. I wrote a tutorial about it on my blog a while ago.

The way we do it in MonoGame.Extended is by scaling the entire sprite batch using a transformation matrix passed into the SpriteBatch.Begin method. We call them viewport adapters:

_spriteBatch.Begin(transformMatrix: _viewportAdapter.GetScaleMatrix());

What this does is transform everything rendered by a specified scale matrix.

The way it works is that you decide on what the virtual resoultion of your game and position everything relative to that. During the draw call you scale the graphics to match the actual resolution of your device.

For example, you might decide that your virtual resolution is 800x480 but you're rendering to an actual screen size of 1024x768 so the scale would be something like 1.28 x 1.6. Make sense? You can calculate a simple scale matrix like so:

var scaleX = (float)ActualWidth / VirtualWidth;
var scaleY = (float)ActualHeight / VirtualHeight;
var matrix = Matrix.CreateScale(scaleX, scaleY, 1.0f);

_spriteBatch.Begin(transformMatrix: matrix);

This will work as a basic approach. The only other thing you really need to know is that when you're dealing with actual screen coordinates, like the mouse position for example, you'll need to reverse the scaling back to your virtual resolution:

var invertedMatrix = Matrix.Invert(matrix);
virtualMousePosition = Vector2.Transform(new Vector2(x, y), invertedMatrix);

That's it for the basics. Of course, you can also get more sophisticated with letterboxing and pillar boxing approaches like I've described on my blog.