Jump to content

Best approach to deal with multiple resolutions


Recommended Posts

Hi, all.


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














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?



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...