[Guide] Multi-Resolution: A Useful Guide Image Showing the Many Screen Ratios and Resolutions

#1

I made this nice layered PSD guide image showing all the different screen ratios and resolutions. Useful when designing your game or interface to see what areas people will see on different devices.

There is a downloadable 2560x1600 PSD file too, get it from my blog here: http://www.gmtdev.com/blog/2014/08/31/visual-guide-to-on-screen-safe-areas-multi-resolution-support-template/

This is of course assuming you are filling the screen by showing more of your games map to fill boarders. If you are stretching your design area this probably isn’t useful.

Also refer to: http://www.cocos2d-x.org/wiki/Multi_resolution_support

4 Likes
#2

appreciate mate

#3

The last but one ratio in your list called 16:10 (1.66r) is actually 15:9.

#4

Thanks dotsquid, fixed.

#5

This post is from Sep 2014 but it is still useful to me midst 2015. Thanks @GMTDev!

I need help deciding resolutions, aspect ratios and texture sizes.

Goal:

  • slot machine game
  • using cocos2d-js
  • should run on
  • web (Kongregate, Newgrounds)
  • mobile phones
  • tablets

I’m thinking

  • Aspect ratio: 4:3. Important game elements should fit in 4:3. For other screen aspect ratios, fill gaps with background image.
  • Black bars: None. Fill the gaps with background image instead of having black bars.
  • Distortion: None. Neither the background image or the game elements should distort (but background image can be cut where necessary).
  • Texture sizes:
  • small: 1600x1200. Kongregate and Newgrounds would run on 800x600 which is exactly half of that.
  • large: 4096x3072. That’s youtube’s 4K which happens to be 4:3.

For example:

d8ccd9b18a311563.png1280×800

Questions

  • Is there a better way? Any considerations? Am I crazy?
  • What about the texture sizes?
  • How can I show a background image layer that fills the screen without distortion in any resolution (i.e. cc.RESOLUTION_POLICY.NO_BORDER) but have the game layer centered on the screen in an 4:3 aspect ratio (i.e. cc.RESOLUTION_POLICY.SHOW_ALL)?

Thanks for reading.

1 Like