Page 1 of 3 123 LastLast
Results 1 to 10 of 21

Thread: Resolution and Aspect Ration Independent 2D Game Engine Design

  1. #1

    Resolution and Aspect Ration Independent 2D Game Engine Design

    So I'm prototyping a 2D game engine to test out some concepts. One of the issues I have to deal with is the multiple resolutions and aspect ratios computer screens come in today.
    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?
    How do you tackle this problem (This is one of those times where it would be easier to do 3D)? What thoughts have you done on this issue? Or do you just ignore this and't care at all?

    These are some of the thoughts I've done so far:
    Regarding resolution:

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

    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.

    Are there more possible solutions or do you any additional thoughts on the ones listed by me?
    Imagine I've written something clever here inspiring you to make something awesome. If that happens give me credits

  2. #2
    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.

  3. #3
    Quote Originally Posted by pstudio View Post
    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.

    Quote Originally Posted by pstudio View Post
    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.

    Quote Originally Posted by pstudio View Post
    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.

    Quote Originally Posted by pstudio View Post
    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.

    Quote Originally Posted by pstudio View Post
    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.

    Quote Originally Posted by pstudio View Post
    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.

  4. #4
    OpenGL is good in that you can scale the coordinates. For example if you use Ortho style drawing, you can do something like:
    Code:
    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.

  5. #5
    Quote Originally Posted by Super Vegeta View Post
    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.

    Quote Originally Posted by User137 View Post
    OpenGL is good in that you can scale the coordinates. For example if you use Ortho style drawing, you can do something like:
    Code:
    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.

    Quote Originally Posted by Lifepower View Post
    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?
    Imagine I've written something clever here inspiring you to make something awesome. If that happens give me credits

  6. #6
    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!
    Games:
    Seafox


    Pages:
    Syntax Error Software itch.io page

    Online Chess
    http://gameknot.com/#paul_nicholls

  7. #7
    Quote Originally Posted by pstudio View Post
    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.

    Quote Originally Posted by pstudio View Post
    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.

  8. #8
    Quote Originally Posted by paul_nicholls View Post
    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.

  9. #9
    Quote Originally Posted by Eric View Post
    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!
    Games:
    Seafox


    Pages:
    Syntax Error Software itch.io page

    Online Chess
    http://gameknot.com/#paul_nicholls

  10. #10
    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).

Page 1 of 3 123 LastLast

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •