Image resolution and size in mobile apps

Question

I use monogame. Currently, I have a problem that prevents me to advance. this problem is concerning the image resolution and size to use.

What I want to know is Can I use the same images or I must use different images (Background images whish fill all the screen) for each device according to the resolution and/or the size of the screen.

Thank you in advance.

Answer 1

You can use just one image and scale it to fit the desired resolution. The simplest way to do a background image is to use the SpriteBatch.Draw overload that takes a destination rectangle like so:

var width = _graphicsDeviceManager.PreferredBackBufferWidth;
var height = _graphicsDeviceManager.PreferredBackBufferHeight;
var destinationRectangle = new Rectangle(0, 0, width, height);

_spriteBatch.Begin();
_spriteBatch.Draw(_backgroundTexture, destinationRectangle, null, Color.White);
// draw other sprites here
_spriteBatch.End();

Keep in mind that your images are going to look better if you are scaling them down rather than up, so make them fairly large so they look good on tablets as well as phones. I tend to use 1600x960 because it's twice the size of a common phone resolution 800x480.

The other thing to consider is that the image may with stretch into a different aspect ratio on some screens. In my opinion, this is okay most of the time, but you may want to implement a more sophisticated scaling system. Some people like to use Pillarboxing, Letterboxing or simply cut off the sides in a non-widescreen (not sure what this is called).

Alternately, you could use different images for different resolutions for a higher quality result. Although, I haven't seen this approach used much in games but I think it's pretty common in apps.

Answer 2

you must use diffrent image for each resolution, and put images of the same resolution in one folder to order your code.