Resolution and Aspect Ration Independent 2D Game Engine Design

[pstudio]

I think that in most games, keeping the same experience despite the resolution is crucial, so there goes either fixed resolution or scaling. Scaling has the problem that, oh well, it takes some time and must be done such way that the result is this likeable.

Showing more of the game world will work only for... how to say it? not much action-packed? games. I mean, yes, you can show more space in a shooter, but this will allow the player to see more, making the game easier for him. And if we are talking about multiplayer, perhaps... That is an absolute no-go, as it gives one player advantage over the other. Although this will work fairly for puzzle, or turn-based strategy games, where the gameplay is not affected by one's speed of reaction and ability to tonice things quickly.

My only other idea than showing more of the game world, in case of additional screen space, would be a bigger UI; possibly providing more detailed information (but rather not more information, in terms of quantity) and maybe some additional buffer/shortcut space.

I pretty much agree. I many games it's important to keep the same experience across resolutions and for that reason I'm not keen on just showing more of the game world. At least not without careful consideration. Different UIs for different resolutions could be a solution.

OpenGL is good in that you can scale the coordinates. For example if you use Ortho style drawing, you can do something like:

glLoadIdentity;
glScalef(ClientWidth/100, ClientHeight/100, 1);

And now your coordinates will be 100 x 100 regardless of window size. Any graphics drawn with these will at all times be drawn in full window area, and you don't need to care if it's actually 1024x768 or 640x480. But often times you don't want to do that, because fonts or certain graphics will bend and look bad. Still, it's much faster than drawing to a buffer and scale it.

I don't see this will solve the problem in an elegant way. The game will ultimately be designed for one resolution and the game will look distorted on other resolutions.

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.

I find this interesting. Right now I'm mostly thinking in classical 2d action games/platformer etc. where the spatial relations between game objects are important. As I see it the layouts will primarily describe different UI layouts. You can't change the game world presentation because this will result in different experinces of the game. The extra space gained using wider aspect ratios can mostly be used for HUD display and insignificant parts of the game world. Or do you disagree with this statement?

Regarding properly DPI handling. What do you think properly DPI handling means? I was thinking of using assets of a high resolution and then downscale. I know resolution doesn't equal DPI or PPI but we typically only use resolution in pixels when talking about graphics in computer games. Is it that important to think in DPI instead? I can imagine that you could possibly gain from increasing font size on high DPI screens but does this the mean you'll have to create layouts for different aspect ratios and different DPI?

[paul_nicholls]

This thread makes some interesting reading, especially as I am thinking of making an Android game, but I not sure how to make a 800x600 game work with the various resolutions/DPI on different Android devices!

[Eric]

This thread makes some interesting reading, especially as I am thinking of making an Android game, but I not sure how to make a 800x600 game work with the various resolutions/DPI on different Android devices!

DPI in itself isn't so much an issue, if you have high/low resolution assets for the high/low DPI cases, you can just scale everything.

However much more problematic are:
* aspect ratio (4:3 vs 16:9 vs every variation that exists), leaving the unused space black works, but isn't too satisfying...
* device size, the ergonomics of a phone and a tablets are different (in terms of real world hand and fingers), and even amongst tablets, you don't handle a 7" tablet in the same way you handle 10"

I'm afraid that some radical UI redesign are necessary in many cases, just like console gamepad UIs don't match desktop mouse+keyboard UI.

[paul_nicholls]

DPI in itself isn't so much an issue, if you have high/low resolution assets for the high/low DPI cases, you can just scale everything.

However much more problematic are:
* aspect ratio (4:3 vs 16:9 vs every variation that exists), leaving the unused space black works, but isn't too satisfying...
* device size, the ergonomics of a phone and a tablets are different (in terms of real world hand and fingers), and even amongst tablets, you don't handle a 7" tablet in the same way you handle 10"

I'm afraid that some radical UI redesign are necessary in many cases, just like console gamepad UIs don't match desktop mouse+keyboard UI.

hmm...all interesting points Eric, thanks!

[SilverWarior]

I don't think there is an easy solution to this.
I do think that you should design the game engine acording to targeted audience. So you should optimize your game engine acording to the most comon aspect ratio used on your targeted platforms.
I don't think making different UI's for different aspect ratios is a solution. For instance if you make a bigger UI for users with widescreens you won't achive the same gameplay expirience with those who use standard monitors and would have smaler UI. Especialy if widescreen UI contains more information. So becouse using differen UI won't offer the same gaming expirience showing more world would be much easier solution to do.
But if you do intend for all of your players to have the same gaming expirience then you should lock your games aspect ratio so that only resolutions of that aspect ratio are posible. Also in this case you should take care so that all ingame object are drawn the same size regardles of the screen resolution.

Now as for using different resolutions (DPI's) you should use several instances of your graphics optimized for several different resolutions. Using only graphics optimized for high resolutions and scaling them donwn will make them look blured an lose some importand detailes. (slowly scale down any of your photos in your popular photo editing tool and you wil quickly inderstand what I mean). Also using grapphics optimized for small resolutions and caling them up will make them look pixelated (each pixel will look like smal square).
Offcourse you don't have to make graphics optimized for every posible resolution, you should make your graphics optimized for most oftem used resolutions and then scale them for other always using the one wich are the closest to the target resolution (les scaling means better results).

The best way is to use vectored graphics but as it has been sad not all of the graphics can be vectorised. So this means that the grephics must be developed acordingly from the verry start.

@Little offtopic
Widescreens could be easily used for making games with hotseat multiplayer by splitscreen method (verticaly spliting the scren into wto parts).

[LP]

Now as for using different resolutions (DPI's) you should use several instances of your graphics optimized for several different resolutions. Using only graphics optimized for high resolutions and scaling them donwn will make them look blured an lose some importand detailes. (slowly scale down any of your photos in your popular photo editing tool and you wil quickly inderstand what I mean).

Below in your post you suggest using vectored graphics. Now, if the artwork is rendered using vectored approach in the first place (e.g. Flash, 3D Studio Max, Maya, etc.), then using proper downsampling/multisampling will not make the graphics blurred. In fact, an antialiasing technique that is properly made should work with the image in such way that you will not perceive any visual artifacts or even realize that the image has been downsampled.

Putting cheap/crappy editing software (which may include popular software products such as Photoshop, by the way) as an example does not support your argument.

There is an entire area of sciences that deals with such issues, called Colorimetry. The proper downsampling needs to be made in perceptually uniform color spaces, including but not limited to CIELAB, CIELUV, DIN99, ATD95, CIECAM among many others.

[Cybermonkey]

Speaking of vector graphics, has anyone ever used AggPas to do a game? (Sorry, for being slightly off-topic ...)

[LP]

I find this interesting. Right now I'm mostly thinking in classical 2d action games/platformer etc. where the spatial relations between game objects are important. As I see it the layouts will primarily describe different UI layouts. You can't change the game world presentation because this will result in different experinces of the game. The extra space gained using wider aspect ratios can mostly be used for HUD display and insignificant parts of the game world. Or do you disagree with this statement?

You may not be able to change game world presentation, but you can use it in different layouts (e.g. world on top, hud on bottom, etc.). You can also design HUD with dynamic elements so that it can be presented in a variety of shapes to accommodate for different world positions.

Regarding properly DPI handling. What do you think properly DPI handling means? I was thinking of using assets of a high resolution and then downscale. I know resolution doesn't equal DPI or PPI but we typically only use resolution in pixels when talking about graphics in computer games. Is it that important to think in DPI instead? I can imagine that you could possibly gain from increasing font size on high DPI screens but does this the mean you'll have to create layouts for different aspect ratios and different DPI?

DPI and PPI are exchangeable, so it's the same thing really. One issue is that not all high-DPI displays are properly configured in Windows, so you can see poor users reading tiny text on their 14'' laptop with 1920×1080 resolution, which is mainly due to poor application support. Properly handling different DPI scenarios requires having images in different sizes, or as you said, using larger images and downsizing them on the fly while drawing (use proper mipmapping and antialiasing settings for this). You don't need to create separate layout rather than using a dynamic layout where you automatically specify the size for each of the layers and the elements inside each layer are also automatically accommodated.