scaling 2d bitmaps for multiple resolution support

Started by
6 comments, last by Krypt0n 11 years, 2 months ago

Im making a multiplayer 2d game and I would like to support multiple resolutions and to do this I need to scale the game so people with higher resolution monitors are not advantaged by being able to see more of the game.

I was wondering if a good way to tackle this problem was to draw everything at extremely high resolution and scale it down to fit the desired resolution. Will doing this result have any negative effects on the image quality? Would it be better to prescale the images in photoshop and access the ones for the desired resolution or use d3d to scale prior during loading screen?

I could use vector graphics but they seem to have a very cartoony look which isnt really the look i am after.

How to professional 2d game developers handle this issue?

I should probably mention I am a huge perfectionist and i hate having to comprise and I am also very new to this whole game development thing.

Advertisement

if you run the game fullscreen, you can actually set the resolution, then the monitor makes the scaling, I think that's what works best, beside making all rendering in vector art. I think most games don't really care about how it looks like when it's scaled, on android it looks sometimes quite bad. :(

You usually have to have a native resolution for your game, for example, Portal was made with 1600 X 1200 resolution. In order to scale everything to support different resolutions, it would do something like this:

gameobject.x = 10 * game_resolutionx / 1600;

gameobject.y = 10 * game_resolutiony / 1200;

You should also do this for scaling.

View my game dev blog here!

@Krypt0n

Im making a 2d multiplayer PC game. It is very important that I am able to support multiple resolutions while keeping it fair for everyone.

@Solid_Spy

portal is a 3d game. 3d game graphics are represented using points in space and equations kind of like vector graphics and can be scaled without any quality loss. If I were to draw my sprites for 1366x768 and scale to fit higher resolutions such as 1920x1080 and 1600x900,there would be reduction in image quality because the scaling algorithm will have to do some guesswork to essentially fill in the blanks.

I am wondering if however drawing sprites for say a hypothetical 3940x2160 resolution display and downscaling them to fit the required resolutions would result in negative effects on the image quality?

That's something I wonder too especially when keeping new high resolution devices (like new(est) iPad 2048X1536) in mind. Most new Android smartphones also offers 1080p.

As I don't want to use vector images for the very same reason of yours, I intend implementing zoom levels instead.

But in your case , I think you can use prescaled ones for reasonable/common resolution and simply 'magnify' for more.

And personally, I'd not trust the downscaling quality, it may be quite distorted at certain ratios.

mostates by moson?e | Embrace your burden

@rishflab

what's the difference if you scale your bitmaps to a different resolution than they are made or if some output or TFT hardware does the scaling? most TFTs will scale anyway if you dont render in their native resolution. this means, if you scale from your native 1920x1080 to a user decided 1280x720 and then it's running on a notebook with 1440x900, the image will be scaled twice. it might be better if you always setup this one resolution your assets are made for, and the display scales it to whatever resolution it's natively using.

@rishflab

what's the difference if you scale your bitmaps to a different resolution than they are made or if some output or TFT hardware does the scaling? most TFTs will scale anyway if you dont render in their native resolution. this means, if you scale from your native 1920x1080 to a user decided 1280x720 and then it's running on a notebook with 1440x900, the image will be scaled twice. it might be better if you always setup this one resolution your assets are made for, and the display scales it to whatever resolution it's natively using.

so say if i set my native resolution as some really high and scale down will the scaled version look terrible? scaling up makes things look terrible. is this the same case as scaling down?

@rishflab

what's the difference if you scale your bitmaps to a different resolution than they are made or if some output or TFT hardware does the scaling? most TFTs will scale anyway if you dont render in their native resolution. this means, if you scale from your native 1920x1080 to a user decided 1280x720 and then it's running on a notebook with 1440x900, the image will be scaled twice. it might be better if you always setup this one resolution your assets are made for, and the display scales it to whatever resolution it's natively using.

so say if i set my native resolution as some really high and scale down will the scaled version look terrible? scaling up makes things look terrible. is this the same case as scaling down?

depends how you define 'terrible', there are several points that might matter for you,

-color correctness. if you scale, no matter if up or down, you're interpolating colors which are in srgb space, but you're actually doing linear operation, you need to transform them into linear space. it's called "to be gamma correct", internet has tons of text bout it so I'll won't repeat it smile.png e.g. http://entropymine.com/imageworsener/gamma/

-scaling down, you need to take into account the sampling theorem (in short, you should take twice the sample count of the source image to avoid moire effects) check http://en.wikipedia.org/wiki/Nyquist–Shannon_sampling_theorem you will find on the right the image of a downscale brickwall which you might consider 'terrible' if not done right

-scaling up, well you sound like you know it already smile.png

-motion, things might look 'ok' if you rescale them in a stil image, but once it's in motion, you might notice 'terrible' aliasing artifacts. imaging a fence in your native 1920x1080 resolution that is having one pixel gabs between the laths. you scale it down without filtering to 2/3 (->1280x720) and once you move, the holes will appear and disappear. you scale it down with filtering, you will get weird colors in-between the actual background and lath color. you scale it up to 2560x1600, you'll end up with a similar issue, the gaps will sometimes occupy two pixel, sometimes one pixel.

will using the hardware/tft scaler solve the issue? NO. BUT if you scale twice (in software and then with the hw/tft), you will likely get twice the errors. of you know what you're doing and you're sure the hw/tft won't touch your output, you might get better result with your own scaling. but if you are unsure, then prefer to just let the hw/tft scale once.

my 2cent ;)

This topic is closed to new replies.

Advertisement