Best approach to deal with multiple resolutions

[plicatibu]

Hi, all.

 

There are a lot of different device resolutions in market nowadays. To cite some:

 

240x320

320x480

480x800

480x854

640x960

640x1136

960x540

1024x768

1280x720

1280x800

2048x1536

 

unfortunately these are not always multiple / sub-multiple values.

 

How do you cope with this?

 

Do you pick a resolution (say 800x600) and scale the game up and down?

 

What's the best approach do deal with this problem?

 

Regards.

[YellowAfterlife]

Approach differs for desktop and mobile.

For desktop you would need to ensure that your game fits all target screens (probably including those netbooks, unfortunately), so the maximum resolution would be 1024x600 for full-screen games, and around quoted 960x540 for windowed ones. Desktop games aren't scaled often (except downscaled, if they don't fit screen after all), since quality degradation is a lot more obvious on desktop (thanks to lower DPI ratios on screens).

For mobile, game is commonly designed with a single resolution and then up or down-scaled to fit others. Commonly picked resolutions are 320x480 and 640x960, but you should keep in mind that the bottom area can be covered with browser controls, thus should not be used for important/interactive elements.

[plicatibu]

Say I'm using 640x960 in my mobile and the device screen is either 640x1136 or 1024x768. It will distort the image, won't it?

 

How to deal with this?

[Ezelia]

there are different approachs do deal with that.

the simple one is to scale the game preserving the aspect ratio and juste showing black background on non used areas.

or you can have some floating UI elements witch are placed in the unused space when there is enought room.

 

in all scenarios, you have to preserve the aspect ratio by code to prevent scene distortion

[plicatibu]

Thank you guys for replying.

[end3r]

I would recommend my article at HTML5 Hub where I scratch the surface of the problem of managing the screen size in HTML5 games, I hope it helps.

Generally it's about scaling the game to fit to the screen and managing the visible game area between different ratios across the devices.

[plicatibu]

This article is very interesting.

 

Thank you for sharing.

[Psychho]

I always resize the canvas while keeping the aspect ratio and maybe switch to higher resolution sprites depending on the users screen size.

Here's the function I use for resizing something while keeping the original ratio,

ResizeWithRatio = function(originalW,originalH,newW,newH) {    var fW,fH,ss;    ss = newH/originalH;    fH = newH;    fW = originalW*ss;    if (fW > newW) {        ss = newW/originalW;        fH = originalH*ss;        fW = newW;    }    return {        width: fW,        height: fH    };}

originalW and originalH = The base resolution

newW and newH = The new resolution to scale up to