Resolution and Aspect Ration Independent 2D Game Engine Design

[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 ...)

[pstudio]

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.


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.

Ok, I think we're on the same page then. I like this concept as it tries to eliminate the problem (which is basically what the link in your previous post was about). It may require some more work in the design phase of the game but at least this tackles the multiple aspect ratio problem.

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.

As I see it UI is not the only thing that can be changed when using different layouts (though I wrote that in my previous post). If you commit to using several layouts you'll also commit to to think about if anything in your game can change across different layouts.
E.g. when writing console games you have the full tv screen area you can draw on. However there's also a safe area. This is the area all important gameplay and huds should be placed in. This is due to the fact that some tv sets covers up parts of the screen border. The safe area is guarenteed to show up on all tv sets. Likewise you could possibly define a "safe area" in your game that must be displayed exactly the same across all screens. The area outside can then be used differently for each layout. Some will show extre gui stuff. Others will maybe just show extra parts of the game world that doesn't have influence on gameplay.

The point about ensuring the same display size of assets across resolutions is however a good point.

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.

I believe that you can use just one asset and then downscale and still get good results. Sure if you're porting a pc game to a smartphone then it could make sense to create new assets optimised for smaller screens. But it all depends on the game in then end. For a pixel perfect result downscaling obviously wouldn't be a good way to go.
Regarding vector art. Yes in some cases vectors will do, but in many cases it won't.