Hello all,

This post encompasses several questions that I cannot fully untangle from each other, so the understanding of it may be hampered slightly as I will be writing in a stream of consciousness style. Please note that the game I am making is a 2D breakout style game using textured quads in D3D11 to render sprites. No 3D elements are present in my game whatsoever.

My main problem is knowing how to size and resize bitmaps for display on a multitude of displays. The first that that I want to note is that I would optimally like my game to be run on any aspect ratio and any resolution, for any device (including all standard PC resolutions, as well as iPhone and mobile resolutions). Consider the game Diablo 3. When one resizes the window of Diablo 3 the contents seem to "stretch" to fit that window. This leads me to believe that all assets in Diablo 3 were made for a specific aspect ratio (say 16:9), and that display on any other aspect ratio will lead to distortion, similar to trying to watch an old 4:3 television show on a 16:9 HDTV. The other possibility is that all assets are created for a multitude of aspect ratios, i.e. 4:3 and 16:10 and/or 16:10. My first question would be is it necessary to create new assets for each aspect ratio, and is that a common practice, or is it more common for the assets to simply be created for the most common aspect ratio (i.e. 16:9 in the case of PC) and stretched to fit any non-standard monitors that a user may have?

The other option I considered was making all sprites for 16:9 and then using black bars on screens with a different aspect ratio i.e. bars above and below the game on a 16:10 2560x1660 monitor and the like, and reverse for 4:3 monitors. This is a bit cheezy I admit and is something that I would like to avoid, but if it will eliminate stretching and ensure that the game is displayed uniformly on all systems without the need to reauthor assets (i.e. bitmaps, sprites), then it may be worth considering.

Last, I am currently authoring all my bitmaps in a native resolution of 1920x1080p. Let me explain this. If I want to have a background image (say a junk yard scene) I will create a 1920 x 1080 bitmap and load that as a textured quad across the whole screen. If I want a character to be 1/10 as tall as the screen then I will make him 108 pixels in height, if that makes any sense. The one exception I am making to this is the all black background, for which I am using a single black pixel in my sprite atlas and then blowing it up to fit the full screen by passing the dest rect to D3D11 in floating point coordinates fro [-1,1] ( I hope that makes sense. I pass all my rects through my program with [-1,1] coordinates for dest and [0,1] coords for source rects as this is how D3D11 expects texture and screen space coordinates to be passed.)

I believe it is a common practice of Indie and/or 2D game developers to make their pixel art at a (much) lower resolution and simply blow up the image on the screen (perhaps using a scale variable, which I have implemented in my SpriteInstance class, meaning that each individual instance of a bitmap can be scaled to please). However, I am wondering if this is to be avoided because it will reduce the visual fidelity of the images and limit what is possible artistically, even while there is no longer any hardware or system restriction that would enforce such strict memory use.

I have also heard that tile based approaches to rendering level backgrounds are nice (I still don't really understand why they would be nicer than a monolithic background though, except for to save memory, and perhaps for customizability reasons). My spriteAtlas (texture atlas) for each level (i have one per level) is very very large (larger than 2000x2000) because I have the full sized background plus full size frames of each character animation, npc, each block, and the ball.

Should I use a lower resolution to produce my bitmap art, and should I use tiling to create backgrounds instead of using monolithic backgrounds? And should I be passing all my rects as floats (is there a possible loss of accuracy from the int-float conversion, or will floats always maintain 100% of the accuracy that a pixel location can give - I would assume this is the case with a IEEE 32 bit float as they have 23 bits of accuracy)? Should I use black bars, or have all non-16:9 players simply get a stretched image? Is the implementation of this stretching different in 2D and 3D?

I know this is a lot of questions, but these things have been on my mind lately. If you can answer some or all of my queries, please do, as it will help me in my development greatly.

Thank you again for all your help.

-Dave Ottley

Resolution matching is very tough thing to get right, and the solution depends on what you're willing to sacrifice. At the studio I work at we author all our elements at a 1280x720 resolution, (we primarily work on the Xbox), and we will scale our sprites as necessary, using their "native" width / "native" resolution as their "width" and scale the sprite by the new resolution. This will induce some stretching on larger screens, but it also means that all of our UI elements are in the same location, (relative to the native format), and that was important to us.

If you're looking at not increasing stretching, there are a lot of solutions, but they all come with drawbacks, like increasing playspace to avoid stretching, (this is where tiling helps), but then you have placement issues. Good luck!