Dynamic Image Selection - Simulator, Device inconsitency

[vincentstan]

Hi,

I am trying to understand Dynamic Image Selection of imageSheet. My Corona SDK version is 2511. My config.lua looks like this and my project is configured for landscape. The required version of imageSheets are generated by scaling down one bigimage using TexturePacker. 

application =

{

  content =

  {

      width = 320,

      height = 480, 

     scale = “letterBox”,

     fps = 30,

     imageSuffix =

    {

          ["@3x"] = 2.1,

     }

 },

}

#1: In the simulator, selecting the iPhone6 device displays from 3x imageSheet and iPhone4 display from un-prefixed imagesheet. However on the device both iPhone4 and iPhone6 are displaying from un-prefixed imagesheet. Couldn’t understand why this difference

#2: What is scale factor? The document says it is “display.pixelWidth / display.actualContentWidth” which turns out to be 1.3 for both iPhone4 and iphone6. As per #1, the image from un-prefixed imagesheet should be displayed whereas it selects @3x.

If my image suffix is

  imageSuffix =

  {

     ["@2x"] = 1.2,

     ["@3x"] = 2

  }

As per the scale factor definition, then for both iPhone4 and iPhone6, the image from @2x suffix imageSheet should be chosen. However, the simulator displays from @3x suffix imageSheet

Need some clarification on this behaviour.

Thanks

[bjsorrentino]

I calculate different values than you’re stating for iPhone 4 vs. 6. If you consider this formula…

display.pixelWidth / display.actualContentWidth

…and then consider a content area with width=320:

iPhone 4:

640 / 320 = 2

iPhone 6:

750 / 320 = 2.34

iPhone 6 Plus:

1080 / 320 = 3.375

So, for iPhone 4 or smaller, use an image suffix of < 2.34. For bigger phones, use >= 2.34.

Hope this helps,

Brent

[vincentstan]

Hi Brent

My calculation are based on landscape orientation as mentioned earlier. Just to give a try, I changed my project setting to portrait and generated new imagesheets for portrait. Similar issues are encountered for this orientation also.

Back to landscape orientation as in my original post,

To give you more info, my imagesheets are as follows

MainImageSheet@3x has a single image of size 1440x960

MainImageSheet@2x has a single Image of size 960x640

MainImageSheet has a single Image of size 480x320

I have zipped and attached the entire project for your reference

Scenario #1:

     imageSuffix =

    {

          ["@3x"] = 2.1,

     }

iPhone4 Scale Factor = 640/480 = 1.333, iPhone6 Scale Factor = 750/480 = 1.317

(As per values returned by display.pixelWidth and display.actualContentWidth in landscape orientation)

ImageSheet in Simulator: iPhone4 = “MainImageSheet”, iPhone6 = “MainImageSheet@3x”

ImageSheet in Device: iPhone4 = “MainImageSheet”, iPhone6 = “MainImageSheet”

Question #1: As per the documentation, for the above scenario, the imageSheet “MainImageSheet” should be selected in both cases. However the output seems to be wrong in simulator whereas correct in the device. Your thoughts?

Scenario #2:

     imageSuffix =

    {

      ["@2x"] = 1.2,

      ["@3x"] = 2

     }

iPhone4 Scale Factor = 1.333, iPhone6 Scale Factor = 1.317

ImageSheet in Simulator: iPhone4 = “MainImageSheet@3x”, iPhone6 = “MainImageSheet@3x”

ImageSheet in Device: iPhone4 = “MainImageSheet@3x”, iPhone6 = “MainImageSheet@3x”

Question #2: Here “MainImage@2x” should have been chosen both in simulator and device. Your Thoughts?

Trying for the past couple of days to get a grip of this but in vein. Is my understanding wrong or this is a bug. Please go through both the scenarios and reply for them. Thanks in advance.

[bjsorrentino]

Hi @vincentstan,

One of the best ways to test image suffixes is to print the value and then run the project in the Corona Simulator, using various device views. For example:

[lua]

print( “IMAGE SUFFIX:”, display.imageSuffix )

[/lua]

Also, you shouldn’t be calculating the suffix set based on landscape. Even if the app is designed for landscape, the content area calculations should still be done as if you’re dealing with a portrait orientation.

Anyway, can you please run the print() test above and report back your results?

Best regards,

Brent

[vincentstan]

Thanks Brent for your clarification. 

With the new understanding that the scale factor is calculated based on portrait orientation, the simulator output is perfect as expected. The image suffix is printed correctly. I have manually edited the imagesheet to indicate visually which one is selected on the device. However I still have an issue on the device

For

imageSuffix =

{

      ["@3x"] = 2.1

}

For iPhone6 alone, I am not getting the suffix @3x selected in the device. It still picks up un-suffixed default imagesheet. Simulator is correct as expected. Anything to be done specific to iPhone6?

[bjsorrentino]

Hi @vincentstan,

In the same way you tested print()-ing the image suffix, can you try the following test and run it on various simulated views?

[lua]

print( 1/display.contentScaleX, 1/display.contentScaleY )

[/lua]

Thanks,

Brent

[vincentstan]

Hi Brent,

I have decided to settle for ["@2x"] = 1.5. For this scenario, it works perfectly in the iPhone6 device also.

Thanks,

Vincent

[bjsorrentino]

I calculate different values than you’re stating for iPhone 4 vs. 6. If you consider this formula…

display.pixelWidth / display.actualContentWidth

…and then consider a content area with width=320:

iPhone 4:

640 / 320 = 2

iPhone 6:

750 / 320 = 2.34

iPhone 6 Plus:

1080 / 320 = 3.375

So, for iPhone 4 or smaller, use an image suffix of < 2.34. For bigger phones, use >= 2.34.

Hope this helps,

Brent

[vincentstan]

Hi Brent

My calculation are based on landscape orientation as mentioned earlier. Just to give a try, I changed my project setting to portrait and generated new imagesheets for portrait. Similar issues are encountered for this orientation also.

Back to landscape orientation as in my original post,

To give you more info, my imagesheets are as follows

MainImageSheet@3x has a single image of size 1440x960

MainImageSheet@2x has a single Image of size 960x640

MainImageSheet has a single Image of size 480x320

I have zipped and attached the entire project for your reference

Scenario #1:

     imageSuffix =

    {

          ["@3x"] = 2.1,

     }

iPhone4 Scale Factor = 640/480 = 1.333, iPhone6 Scale Factor = 750/480 = 1.317

(As per values returned by display.pixelWidth and display.actualContentWidth in landscape orientation)

ImageSheet in Simulator: iPhone4 = “MainImageSheet”, iPhone6 = “MainImageSheet@3x”

ImageSheet in Device: iPhone4 = “MainImageSheet”, iPhone6 = “MainImageSheet”

Question #1: As per the documentation, for the above scenario, the imageSheet “MainImageSheet” should be selected in both cases. However the output seems to be wrong in simulator whereas correct in the device. Your thoughts?

Scenario #2:

     imageSuffix =

    {

      ["@2x"] = 1.2,

      ["@3x"] = 2

     }

iPhone4 Scale Factor = 1.333, iPhone6 Scale Factor = 1.317

ImageSheet in Simulator: iPhone4 = “MainImageSheet@3x”, iPhone6 = “MainImageSheet@3x”

ImageSheet in Device: iPhone4 = “MainImageSheet@3x”, iPhone6 = “MainImageSheet@3x”

Question #2: Here “MainImage@2x” should have been chosen both in simulator and device. Your Thoughts?

Trying for the past couple of days to get a grip of this but in vein. Is my understanding wrong or this is a bug. Please go through both the scenarios and reply for them. Thanks in advance.

[bjsorrentino]

Hi @vincentstan,

One of the best ways to test image suffixes is to print the value and then run the project in the Corona Simulator, using various device views. For example:

[lua]

print( “IMAGE SUFFIX:”, display.imageSuffix )

[/lua]

Also, you shouldn’t be calculating the suffix set based on landscape. Even if the app is designed for landscape, the content area calculations should still be done as if you’re dealing with a portrait orientation.

Anyway, can you please run the print() test above and report back your results?

Best regards,

Brent

[vincentstan]

Thanks Brent for your clarification. 

With the new understanding that the scale factor is calculated based on portrait orientation, the simulator output is perfect as expected. The image suffix is printed correctly. I have manually edited the imagesheet to indicate visually which one is selected on the device. However I still have an issue on the device

For

imageSuffix =

{

      ["@3x"] = 2.1

}

For iPhone6 alone, I am not getting the suffix @3x selected in the device. It still picks up un-suffixed default imagesheet. Simulator is correct as expected. Anything to be done specific to iPhone6?

[bjsorrentino]

Hi @vincentstan,

In the same way you tested print()-ing the image suffix, can you try the following test and run it on various simulated views?

[lua]

print( 1/display.contentScaleX, 1/display.contentScaleY )

[/lua]

Thanks,

Brent

[vincentstan]

Hi Brent,

I have decided to settle for ["@2x"] = 1.5. For this scenario, it works perfectly in the iPhone6 device also.

Thanks,

Vincent