Sign in to follow this  
Dasil

2D Art for Multiple Resolutions

Recommended Posts

Hi everyone, I'm starting my first project that will support multiple fullscreen resolutions and I was wondering what the best way to create the 2D art (ex. loading screens, menu backgrounds (I think these are splash screens? Correct me if I'm wrong), etc) is. If the highest resolution to be supported is 1280x1024 and another is 1024x768 and a third is 800x600, is it best to make the image 1280x1024 and then scale it down to match the other resultions? Or is it better to have a separate image for each resolution? This option seems like it would not be as good as the first one. Thanks

Share this post


Link to post
Share on other sites
You have lots of options and all of them have caveats in one way or another :)

If you want pixel perfection (with 2D art this is often the case) then scaling it across aspect ratios is undesirable, even with great filtering. But if you don't need the crispness of pixel perfect art on your non-preferred aspect ratios, just scale down and be done with it. For a lot of people/games - this option is COMPLETELY FINE.

If you desire (or like us are required) to have crisp looking 2D stuff for all supported resolutions, you have a cheap [fake] option and a not cheap option (and probably more, but these are the 2 we use for our games.)

The cheap option is: restrict supported resolutions to the same aspect ratio. Some of the games we've worked on used 1024x768 as the default resolution as well as support for 800x600 and 640x480 to keep the game netbook compatible (which was a must for us.) If the aspect ratio is the same, you can scale down to these resolutions and the art still looks very good. The downside to this approach for us, was that widescreen monitors were not pretty. A lot of (maybe all?) widescreen monitors will have 'support' for 4:3 resolutions like 1024x768 but the end result isn't that pretty. For us, our target market (casual PC) had ~70% 4:3 monitors to ~30% widescreen monitors so we got the best results on the largest slice of potential users. Not a perfect solution, but quick and easy to implement. You can also letterbox on widescreen monitors, to retain your pixel perfection in this scenario, although we always get negative feedback with this; for whatever reason casual gamers preferred the stretched look O_o.

The best solution we have used (albeit it rarely, for overhead reasons) is to have true support for a widescreen aspect like 1280x720 and a 4:3 aspect like 1024x768. Even this will not cover 100% of the monitors a commercial release will come across (for instance my 1440x900 monitor supports 1280x1024 and 1024x768 but neither look very good), but it gets you a very high % of perfect results. Essentially, yes, you will have separate images for your static 2D images like backgrounds that are non-dynamic for the different ASPECT RATIOS at the largest resolution for that ratio. For dynamic things (i.e. in game backgrounds or something that you can scroll across) this doesn't matter; you just have less visible space/more scroll space on the lesser resolutions. You can also create shortcuts in some particular parts of art by planning ahead that things will get 'moved in' on the lesser resolutions although this can be a major pain in the ass. A final consideration, is the placement of 'screen space' objects -- like UI buttons or whatever. In this scenario we mark all such objects with a screen space flag, so their locations aren't stored as absolute values but rather percents of the preferred resolution. So if you switch to a lower resolution/different aspect ratio, the final positions for such object are re-calculated. In general, true pixel perfect support for widescreen and 4:3 formats isn't much fun and can be a real pain for HUD design -- we ended up using separate HUD layouts for the different aspect ratios :(

Ok, damn, this was long. Sorry about that. I can't say that the above is the best solution and I'm hoping that someone else will chime in with a better solution; that would really make me happy :) Anyway, hope you can find some sliver of help in the novel above!

[Edited by - shadowcomplex on September 12, 2009 2:39:48 AM]

Share this post


Link to post
Share on other sites
I think that most of the stuff you mention will probably look OK if you create it at high resolution and scale it dynamically depending on screen resolution. As an indie/hobbiest developer (an assumption here) you probably don't have the time to spend making separate art assets for every supported resolution. If the 2D art is just splash screens for loading, etc, as you say, then no one's going to care if it's scaled a bit - with filtering you'll hardly notice anyhow.

Note that scaling down from high resolutions will probably look better than scaling up, so create your art at the highest resolution you can (within reason).

EDIT: By 'ex.' did you mean 'excluding' or 'example'? I would more commonly read that as 'excluding' but I assumed you meant 'example' in this case (which is usually abbreviated 'e.g.'). If you're just scaling splash screens then it is easy to do - if the whole game is 2D and you need to scale it to fit multiple resolutions then you'll need more advanced strategies.

[Edited by - shaolinspin on September 16, 2009 9:22:34 AM]

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this