Wednesday, 20 February 2013

Content Scaling: The magic size

When I was writing games in Corona SDK / Lua I was helped no end by this incredibly helpful article on content scaling.  This worked on the premise of ratios to deal with the different aspect ratios. This is related to my previous post in regarding the iOS screen resolutions.

Without a doubt this concept works and really does for the fragmented screen resolutions of android.  This principle also worked fine for iOS until the iPhone 5 came along.  This got me thinking about this concept not least because I wanted to do as little work as possible when it came to creating background images etc.

If you read the article in Corona they suggest that applying an image of 380 x 570 on a 320 x 480 resolutions provides the appropriate bleed around the safe zone of the screen resolution.  However, this doesn't work when applying to the newer versions of iOS not least the iPhone 5.

So I did a little playing and a minor adjustment and came up with the magic size that seems to work for all and that magic size is ...385 x 570.

Not that different in size you say but look at how this works for the iOS resolutions with simple multiplications.
  • 320  x 480    use  385 x 570
  • 640  x 960    use  770 x 1140
  • 640  x 1136  use  770 x 1140
  • 768  x 1024  use  770 x 1140
  • 1536 x 2046 use  1540 x 2280
This then works to an exact ratio of 1x, 2x and 4x with only 3 different backgrounds needed.

The principle there is that by declaring a screen size is a “safe zone” — any content outside this area of the background image might be cropped, either on both sides or at the top and bottom, depending on the target screen’s aspect ratio.  So when planning your image you may applying additional grass, trees, stars etc. to make up the area which isn't a playing area for that aspect ratio but will take up screen real estate.

This principal works as of February 2013 and will hopefully be updated when Apple bring out a further X amount of screen resolutions to contend with.


Post a Comment