Dynamic image selection on iphone6

Hi,

I am testing my app on an iphone5, with one set of images and it’s working fine and all looks smooth and clear.

using this config:

if string.sub(system.getInfo("model"),1,4) == "iPad" then     application =     {         content =         {             width = 360,             height = 480,             scale = "letterBox",             xAlign = "center",             yAlign = "center",             imageSuffix =             {                 ["@2x"] = 1.5,                 ["@4x"] = 3.0,             },         },         notification =         {             iphone = {                 types = {                     "badge", "sound", "alert"                 }             }         }     } elseif string.sub(system.getInfo("model"),1,2) == "iP" and display.pixelHeight \> 960 then     application =     {         content =         {             width = 320,             height = 568,             scale = "letterBox",             xAlign = "center",             yAlign = "center",             imageSuffix =             {                 ["@2x"] = 1.5,                 ["@4x"] = 3.0,             },         },         notification =         {             iphone = {                 types = {                     "badge", "sound", "alert"                 }             }         }     } elseif string.sub(system.getInfo("model"),1,2) == "iP" then     application =     {         content =         {             width = 320,             height = 480,             scale = "letterBox",             xAlign = "center",             yAlign = "center",             imageSuffix =             {                 ["@2x"] = 1.5,                 ["@4x"] = 3.0,             },         },         notification =         {             iphone = {                 types = {                     "badge", "sound", "alert"                 }             }         }     } elseif display.pixelHeight / display.pixelWidth \> 1.72 then     application =     {         content =         {             width = 320,             height = 570,             scale = "letterBox",             xAlign = "center",             yAlign = "center",             imageSuffix =             {                 ["@2x"] = 1.5,                 ["@4x"] = 3.0,             },         },     } else     application =     {         content =         {             width = 320,             height = 512,             scale = "letterBox",             xAlign = "center",             yAlign = "center",             imageSuffix =             {                 ["@2x"] = 1.5,                 ["@4x"] = 3.0,             },         },         notification =         {             iphone = {                 types = {                     "badge", "sound", "alert"                 }             }         }     } end

If I test on simulator with iphone6 images seems slightly blurry… though, if I zoom in the simulator, some elements get rendered more defined and other not.

Is this normal behavior, maybe due to my computer screen resolution?

Or should I use another set of images? even if testing on retina device (iphone5) stil gives good results?

I read a lot on content scaling but still would like to keep it simple if you suggest that in the end things will look ok even on real iphone 6 or 6+.

Thanks a lot!!!

Hi @akak,

Well, the first thing to determine is whether the iPhone 6 and/or 6+ is actually using the images that you want it to use, based on your config setup. Try print()-ing the image suffix and see if it’s properly picking the image set you want:

[lua]

print( display.imageSuffix )

[/lua]

Note that this value will be nil if there’s no suffix being chosen (i.e. a device is picking the “1x” suffix set).

Brent

Hi Brent,

thanks a lot for your answer. It’s picking 4x only if I simulate on the 6+ otherwise it picks 2x. Shouldn’t the proper practice be to pick higher resolution even for iphone 6? if so what would I change on my config file?

Thanks!!

I would really recommend that you change your config.lua to the one in “Moderninzing the config.lua”:

http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

This is a much simpler way than dealing with the big “if-then-else” mess I released on the community.   Then for what images it should pick, becomes a bit trickier of a question to answer.    Since creating pixel perfect versions of all your art would mean dozens of different versions (6 for the iOS family alone), you are generally going to have to except some level of re-sampling… either up or down.

If you start with the assumption that your 1x images are designed for a base 320px wide screen, then your 2x images should be 640px.  However both the iPhone 6 and 6+ are bigger.  You can either resize your 2x images up a little for the 6 or downsize your 4x’s a lot.   Generally speaking downsampling is visually better than re-sampling up, but you have to weigh that decisions against 4x textures taking up 4x the memory of the 2x images.  (a 1x image that takes up 1mb of texture memory, the 2x version uses 4mb of memory and the 4x version uses 16mb of memory).  It also takes CPU/GPU time to resize those images too.

Typically your 4x images are going to be designed for a 1280px wide screen if you’ve based everything on a 320px base.  So for a 6, that’s still nearly twice as big as it needs to be and its slightly larger than the 6+ but still going to be resized up a bit for a retina iPad.

The sizes in the config.lua are just dividing point.   So if you use @2x = 1.5 and @4x = 3.0, then for screens that are (320*1.5) 480px of less wide, you get the smaller images.  From 481 to 960 you get the @2x images and anything over the 960 you get the @4x images.  

Your options:

  1.  Change the dividing point.  If you want the @4x images on the 6 (overkill IMHO), then change it so that @2x = 2.0.  Then the iPhone 6 which is 2.34x larger than the 320 base would grab the 4x images as would both iPads and the 6+.

  2.  Change your images so that they are based on 375px for the 1x image,  Then 750 becomes the new @2x which is pixel perfect on the 6.  Then the suggested 1.5 and 3.0 scale factors becomes any device < 562px gets the 1x images, anything between that and 1125 will use the @2x images and larger will use the @4x images.  In this case, the iPhone 4 and 5 families will be downsizing a little (750 to 640).  The iPad 2, mini’s will resize up just a hair from 750 to 768.   The 6+ will resize up quite a bit (750 to 1080) and the Retina iPads will grab the @4x’s 1500 px images to use at 1568px.

  3.  Use #2 above and add in an @3x image size which would be based on 1125px, but the iPhone 6+ will still downsample a bit.

  4. Pay more attention to industry standard screens sizes.  Lets face it.  If you want to support any of the TV options, port to Ouya, mess with Windows Phone 8 or fit on a host of Android devices, you are starting to see 720p and 1080p screens (well don’t forget 4x at 2160p) be more the standard.  The 6+ is a 1080p screen.

Because both Apple’s “Point” system and Android’s 160ppi standards, it’s still best to think of the content area based on 320 px (not really pixels but content units or points).  Trying to change config.lua to be a 720px as the base will be problematic in other ways.  So a forward thinker might conclude that

1x = 360px

2x = 720px

4x = 1080px

for images and in the config.lua do

@2x = 2.0

@4x = 4.0

and let the rest of the screens fall where they may.  But this hoses the iPhone 4 and 5 family because they would get 1x image.  This is why I generally don’t use those exact values.   I would think if you based your images on 360, 720 and 1080 and used 1.5x and 3.0 like the modern config.lua uses, then you get this for the iOS family:

1.5 * 360 = 540

3.0 * 360 = 1080

iPhone 4, 5 would get the @2x images and downsize from 720.

iPhone 6 would get the @2x images and upsize a little to 750

iPhone 6+ would get the @4x images (pixel perfect)

iPad 2, mini would get get the @2x images and upsize a little to 768

iPad retina would get the @4x and upsize to 1568.  Or you could inflate the size of your app bundles and add in a 4k format designed for 2160px screens that would be an @8x format.  More and more high def tablets want these level of graphics anyway.

Rob

Hi @akak,

Well, the first thing to determine is whether the iPhone 6 and/or 6+ is actually using the images that you want it to use, based on your config setup. Try print()-ing the image suffix and see if it’s properly picking the image set you want:

[lua]

print( display.imageSuffix )

[/lua]

Note that this value will be nil if there’s no suffix being chosen (i.e. a device is picking the “1x” suffix set).

Brent

Hi Brent,

thanks a lot for your answer. It’s picking 4x only if I simulate on the 6+ otherwise it picks 2x. Shouldn’t the proper practice be to pick higher resolution even for iphone 6? if so what would I change on my config file?

Thanks!!

I would really recommend that you change your config.lua to the one in “Moderninzing the config.lua”:

http://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

This is a much simpler way than dealing with the big “if-then-else” mess I released on the community.   Then for what images it should pick, becomes a bit trickier of a question to answer.    Since creating pixel perfect versions of all your art would mean dozens of different versions (6 for the iOS family alone), you are generally going to have to except some level of re-sampling… either up or down.

If you start with the assumption that your 1x images are designed for a base 320px wide screen, then your 2x images should be 640px.  However both the iPhone 6 and 6+ are bigger.  You can either resize your 2x images up a little for the 6 or downsize your 4x’s a lot.   Generally speaking downsampling is visually better than re-sampling up, but you have to weigh that decisions against 4x textures taking up 4x the memory of the 2x images.  (a 1x image that takes up 1mb of texture memory, the 2x version uses 4mb of memory and the 4x version uses 16mb of memory).  It also takes CPU/GPU time to resize those images too.

Typically your 4x images are going to be designed for a 1280px wide screen if you’ve based everything on a 320px base.  So for a 6, that’s still nearly twice as big as it needs to be and its slightly larger than the 6+ but still going to be resized up a bit for a retina iPad.

The sizes in the config.lua are just dividing point.   So if you use @2x = 1.5 and @4x = 3.0, then for screens that are (320*1.5) 480px of less wide, you get the smaller images.  From 481 to 960 you get the @2x images and anything over the 960 you get the @4x images.  

Your options:

  1.  Change the dividing point.  If you want the @4x images on the 6 (overkill IMHO), then change it so that @2x = 2.0.  Then the iPhone 6 which is 2.34x larger than the 320 base would grab the 4x images as would both iPads and the 6+.

  2.  Change your images so that they are based on 375px for the 1x image,  Then 750 becomes the new @2x which is pixel perfect on the 6.  Then the suggested 1.5 and 3.0 scale factors becomes any device < 562px gets the 1x images, anything between that and 1125 will use the @2x images and larger will use the @4x images.  In this case, the iPhone 4 and 5 families will be downsizing a little (750 to 640).  The iPad 2, mini’s will resize up just a hair from 750 to 768.   The 6+ will resize up quite a bit (750 to 1080) and the Retina iPads will grab the @4x’s 1500 px images to use at 1568px.

  3.  Use #2 above and add in an @3x image size which would be based on 1125px, but the iPhone 6+ will still downsample a bit.

  4. Pay more attention to industry standard screens sizes.  Lets face it.  If you want to support any of the TV options, port to Ouya, mess with Windows Phone 8 or fit on a host of Android devices, you are starting to see 720p and 1080p screens (well don’t forget 4x at 2160p) be more the standard.  The 6+ is a 1080p screen.

Because both Apple’s “Point” system and Android’s 160ppi standards, it’s still best to think of the content area based on 320 px (not really pixels but content units or points).  Trying to change config.lua to be a 720px as the base will be problematic in other ways.  So a forward thinker might conclude that

1x = 360px

2x = 720px

4x = 1080px

for images and in the config.lua do

@2x = 2.0

@4x = 4.0

and let the rest of the screens fall where they may.  But this hoses the iPhone 4 and 5 family because they would get 1x image.  This is why I generally don’t use those exact values.   I would think if you based your images on 360, 720 and 1080 and used 1.5x and 3.0 like the modern config.lua uses, then you get this for the iOS family:

1.5 * 360 = 540

3.0 * 360 = 1080

iPhone 4, 5 would get the @2x images and downsize from 720.

iPhone 6 would get the @2x images and upsize a little to 750

iPhone 6+ would get the @4x images (pixel perfect)

iPad 2, mini would get get the @2x images and upsize a little to 768

iPad retina would get the @4x and upsize to 1568.  Or you could inflate the size of your app bundles and add in a 4k format designed for 2160px screens that would be an @8x format.  More and more high def tablets want these level of graphics anyway.

Rob