How can I support different screen resolutions without scaling the sprites?

Question

I already tried to support different screen resolutions with scaling the sprites. But if I scale my sprites from 800x480 to 1920x1080 pixel, then the sprites look blurry. I want to use different sprites for each resolution to avoid the blurry effect.

How can my game choose the right sprite for each resolution? How can I do that?

How can I calculate the right measures for every sprite? For example, I use a 64x25 pixel sprite with a 800x480 pixel resolution. If I change the resolution to 1280x720, what should then be the measures of the sprite?

Can I calculate the measures like this?

sprite measures(1280x720): Width = 1.5f*64= 96, Height = 1.5fx25= 37,5

Should I round up or round down the height(37,5 pixel) of the sprite?

I create a Windows Phone game with Monogame, and I want to support every resolution from 800x480 to 1920x1080 pixel without scaling.

Answer 1

What you're attempting to do is not a common strategy (in fact, I don't think it's even a rare strategy), for several reasons:

• There are at least ten common phone resolutions between those you mentioned (http://www.sven.de/dpi/)
• Phone/tablet aspect ratios vary from 3:2 to 4:3 to 5:3 to 16:9. Will you also make wider and narrower sprites to accomodate for these variations? Will you make the screen wider or narrower?
• The very problem you mentioned - if you downscale and the numbers are not even, what do you do?

I will ask you to reconsider your position. Drawing the same art ten times just so it's not 'blurry' will force you to either spend a lot (and I mean a lot) of time on the art or rush it and have the same issue with quality. What if you have to redraw an asset?

More common strategies to deal with this issue are:

• Draw the sprites in a sufficiently high scale that they can be downscaled for all other resolutions
• reduce blurring by employing a harsher filter like bilinear or point, or shaders
• Upscale art by exactly 2x or 3x, padding the screen sides as appropriate

Now, the equations. Keep in mind I advised you repeatedly to not use them.

SpriteWidth = OldSpriteWidth * NewScreenWidth / OldScreenWidth
SpriteHeight = OldSpriteHeight * NewScreenHeight / OldScreenHeight

If you must, round up rather than down, as overlapping sprites is better than sprites with a gap between them.

Answer 2

Stop thinking pixels and start thinking abstract units.

Imagine that a screen is 100 units wide, and the art style and approach of your game dictates that the sprite should be 1/20th the screen width. Only then do you actually start thinking pixels.

Only then do you start thinking about artwork pixel dimensions. And specifically, think in terms of scaling DOWN your artwork, not up. Don't take little pictures, blow them up, and make them blurry. DO take big pictures and scale them down, so you never lose detail on scaling.

That said, it's not always just about scaling down. I'm going to point to a previous answer I gave at How do I scale down pixel art? that covers basically what I'd say about that.

Can you make a perfect set of images for every resolution you'll encounter? Yes, in fact this is the best approach IMO as you can optimize them for each resolution. But it's not the most realistic approach. Maybe this makes your game too big, you don't have the resources to create all the artwork, etc. But what you probably can do is create a set of 2-4 versions of your art at different resolutions. Create them to be optimal for what you think are the most common dimensions you'll see. And then for the ones they aren't perfect for, pick the appropriate one and scale it to what it should be.