Game-Development: How to make my spritegame dynamic for resolutions?

Question

I'm writing an XNA game. But I want an intelligent way of making the game dynamic for different resolutions. For people who know The World of Goo: just like The World of Goo. So the amount of visible area has to be independent of the resolution. So, if I set a higher resolution. I don't want to see more. I only want more detail. Of course the sprites do have detail.

Short Example: I've got a sprite of 64x64. When my resolution is:

• 720p: I want to draw it with a size of (for example!) 42x42.
• 1080p: It has to be drawn with a size of 64x64. (So 1080p means full size of the sprite)
• 480p: It has to be drawn with a size of 32x32.

So, each sprite has to look the same on the screen, independent of the resolution.

But I don't know how to do it.
Any help?

Answer 1

I never used XNA but usually to solve this kind of issue you just need to abstract the position of your sprites from the actual resolution of the screen.

This means that you could store object position with absolute coordinates (eg. in range 0.0f - 1.0) so that x = 0.0is the leftmost pixel visible and 1.0is the rightmost, same story for the ycoordinate.

You then calculate everything according to this coordinate space and you worry about transforming them just before the actual drawing. Of course for this approach you need to have different size that must keep the same ratio in a resolution-indipendent way.

For example, if you have 1080p then you choose to have 64x64 sprites, 1080/64 gives 16.875, so for a 720p resolution you will need 42.6pixels (like you chose: 42x42) and so on for other resolutions.

The transformation is then quite straightforward:

float xcord = ...
float ycord = ...

int xscreen = (int)(xcord*xresolution)
int yscreen = (int)(ycord*yresolution)

(I don't know if XNA already uses floats for coordinates)

In addition I actually don't know what kind of game you are making, but if your screen will show just a viewport of the whole world/game/whatever you can easily integrate the scrolling part together with this transformation because you can easily offset it to obtain screen coordinates:

float xcord = 15.4 /* something absolute to the world*/
int xscreen = (int)((xcord - xviewport_offset) * xresolution)

where xviewport_offsetshould be the coordinate of the left side of the view port, of course the difference should be < 1.0 otherwise the sprite would be outside.

Answer 2

When using SpriteBatch pass a scaling matrix (Matrix.CreateScale) to SpriteBatch.Begin.

Don't forget to take into consideration the aspect ratio (this question may be worth reading).

You can combine scaling and transform matrices to handle scrolling, etc.

You might want to read my answers on this topic here (including the links in that answer to answers that talk about how world/view/project spaces work) and here and possibly here and here as well.