Resolution and Aspect Ration Independent 2D Game Engine Design

[LP]

How do you ensure that a game looks good on different resolutions such as 800 X 600 and 1600 X 1200? And what to do about different aspect ratios where more horizontal screen place is suddenly available?

First, you should not think of "resolution" concept while working on your game, which I once discussed here.

Specifically, switching resolution on today's machines is a bad practice for end users as it will mess up with user's desktop, reorganize gadgets and so on; in any case, the end user is probably using the best possible resolution on the screen, which is typically the native screen of LCD display.

A) Choose a resolution and stick with it. Then change the screen's resolution to match your game's resolution. Personally I think this is a no-go. I curse programmers when they change my resolution.

A very bad idea considering what I've said above.

B) Choose a minimum resolution and make the game windowed. This sucks as well. Works ok for small resolutions but the game will likely be to small on large resolution screens.

The game may still get clipped on ultra-portable computers where resolutions can be as small as 800x480. On other machines with high DPI displays your game will look tiny.

C) Choose a (high) resolution and render to a buffer. Then render the buffer scaled so it fits the screen's resolution. This is the way I'm thinking about going right now. I'm going to render multiple layers to multiple rendertargets and combine them in the end anyways so it would be easy to scale them in the end.

This is the new DPI approach of Windows Vista and later. Honestly, it's just another way of using option (A) with exactly the same result but more complex implementation. A very bad idea if you ask me as your game will look blurred, degrading visual quality and increasing eye strain.

D) Create assets for different resolutions. Will give the best result for supported resolutions but it requires a lot of work creating the assets. The issue still exists for the resolutions not supported.
E) Use vector art. Vectors can be rasterised at the beginning or during loading. I'm not sure how much expensive it will be do this conversion. Vector art has great potential but there are some images that can't practically be created by vectors.
F) Use procedurally generated content. Like vectors it can be created at runtime for the specific resolution. However it is time consuming to design algorithms for generating images and it obviously won't work in all cases.

These solutions are not elegant and will either require a lot of work without achieving proper result on all configurations, or will degrade the visual quality of your application.

Regarding the aspect ratio:
A) Choose 4:3 ratio. Stretch the canvas for wider aspect ratios. The drawback is obvious. The wider aspect ratio the wierder distortion.
B) Choose 4:3 ratio and draw black bars around the sides. Better than A) in my oppinion but we're wasting screen estate.
C) Show more of the game world depending on the aspect ratio. For some games this will work. For other games it can completely destroy gameplay.

Thinking about aspect ratio is actually a move in the right direction, but you shouldn't really be thinking of aspect ratio per se, rather than the overall layout. My suggestion is the following.

First, try not to think of resolutions. Think of the screen layout and how many layouts you will support. If you have iPad, try to look at it vertically and horizontally.Try to imagine if iPad was shorter but longer (e.g. being a widescreen). Try to draw the organization layout on paper thinking where you will put your game's elements depending on the screen orientation and shape (e.g. closer to 4:3 or closer to 16:9).

Once you have the proper organization strategy, one important issue is how will you handle different DPI settings. For instance, you may want to include large icons and resize them to smaller versions on the fly to take advantage of high DPI displays and make the game look similar on different devices. Another alternative would be putting more elements with higher DPI settings, so instead of bigger icons, the user will see more of them. You can even try some hybrid approach as well.

If you plan your game's conceptual organization on different layouts (vertical/horizontal) and shapes (4:3, widescreen), properly handling different DPI settings, you will make the majority of your users happy. As you can see, this way you are not thinking of resolutions and aspect ratios, and you are not using vectors, procedural content and other stuff, which is not related here anyway. This is the best non-intrusive approach, which in many ways is enforced when you develop for iPhone/iPad, even though it perfectly applies to Windows/Mac OS systems.

In order to properly solve a problem, instead trying to fix the problem itself, you should change the conditions accordingly so the problem ceases to exist. You may want to check this article, which is more of philosophical nature, but still applies here.