IPOD ( 640x1136 ) resolution not working in device. But simulator shows perfect output

There are lot of inconsistency with device and simulator output. Please fix these bugs first.

Simulator iphone5 shows a perfect output. But when I install it in device, I am getting blank spaces on top and bottom of the screen. 

Please see my config.lua file and the image resolutions. I have the original base file, @2x and @4x files.

config.lua


elseif string.sub(system.getInfo(“model”),1,2) == “iP” and display.pixelHeight > 960 then

    application = 

    {

        content =

        {

            antialias = true,

            fps = 30,

            width = 320,

            height = 568,

            scale = “letterBox”,

            xAlign = “center”,

            yAlign = “center”,

            imageSuffix = 

            {

                ["@2x"] = 1.5,

                ["@4x"] = 3.0

            },

        },

        notification = 

        {

            iphone = {

                types = {

                    “badge”, “sound”, “alert”

                }

            }

        }

    }

main.lua


    local bgImage = display.newImageRect(“textures/title/bg.png”, 360, 570)


bg.png dimensions ( 320x480 ) - base size

                               (720x1140 ) - @2x

                               (1440x2280) - @4x

Do you have the required:  Default-568h@2x.png file in the same folder with your main.lua file?  This file must exist.  It must match letter for letter and symbol for symbol and CaSE mAtTErs.  For instance the .png must be .png, not .PNG.   This file must be precisely 640 px wide and 1136px tall.

Once you have that file in the folder with your main.lua you should see things correctly on device.

If that is the case then what is the use of this???

imageSuffix = 

            {

                ["@2x"] = 1.5,

                ["@4x"] = 3.0

            },

I have tried with this also

imageSuffix = 

            {

                ["@2x"] = 2,

                ["@4x"] = 3.0

            },

I have two large images to satisfy all resolutions… - @2x=(720x1140 ) and   @4x=(1440x2280).

In simulator its working fine. But that is not the case in real device.

If this is the case, I have to have images with various dimensions to support android devices.

I have also installed in IPAD ( 768x1024 ) and its working fine. But I have no images with 768x1024 dimensions in resource folder. 

AAaaahhhhh. Very sorry about that. I didn’t read your reply properly. Sorry…I placed that file Default…png and its working fine. Thanks a lot

What about android devices/…There are tons of different resolutions available in android :slight_smile: Will it cause any problem? I have only one image Default-h568h@2x.png for iphone5 portrait mode. 

I have tested in android tablet(samsung) -1280x800 . Its working fine. We can’t test in all devices thats impossible.

If this is a problem in android also please let us know how to fix it.

Hi there,

The need for the Default-h568h@2x.png is only for the iPhone 5.  There’s no need for launch images like that for Android devices.

  • Andrew

So this is an exception for iPhone5 only?

I use custom splash screen that has promo buttons on it. Now that Apple won’t accept any iPhone apps that don’t fully use iPhone screen, can you remove this requirement?

That way, developers can choose to use Default…png or use their custom splash screens.

For now my workaround is to take a snapshot of my custom splash screen on iPhone5 and use that as the Default-568h@2x.png.

In reality the app first shows the Default…png image (only in case of iPhone5) and then shows my custom splash screen. Since they are identical, user doesn’t notice anything. (as long as the user doesn’t click on the buttons when Default…png is being shown for the first few seconds)

Clearly this is a hack that is forced due Corona’s peculiar behavior for iPhone5.

Can we get some clarification on this issue?

I am noticing that when use the “ultimate config.lua”, on most devices the app uses all the screen real estate, except on nexus 7. On nexus 7, it leaves black bars on the side. Has anybody seen anything similar for android devices?

Thanks

Vasant

Hi there,

This isn’t a Corona issue at all, this is the mechanism Apple built into iOS for determining whether an app is capable of running on a tall (16:9 aspect ratio) iPhone 5 screen.  If the Default-h568h@2x.png file is missing, iOS assumes that the app can only run on a shorter (4:3 aspect ratio) iPhone 3Gs/4/4s screen, and as a result will display it letterboxed (black bars at top and bottom) on the taller iPhone 5 screen.

  • Andrew

Hi Vasant.  There are a bunch of questions here so bear with me.

I use custom splash screen that has promo buttons on it. Now that Apple won’t accept any iPhone apps that don’t fully use iPhone screen, can you remove this requirement?

There is nothing preventing you from making the Default*.png family of files just solid black, or white, or whatever your initial splash screen is and then having your app show it’s splash screen over top of it.  There is no reason why you can’t have multiple splash screens.  I’ve seen plenty of apps that have 2-3.

In reality the app first shows the Default…png image (only in case of iPhone5) and then shows my custom splash screen. Since they are identical, user doesn’t notice anything. (as long as the user doesn’t click on the buttons when Default…png is being shown for the first few seconds)

I wouldn’t put your buttons on the first screen.  Also there may be a black flicker depending on how fast you get your splash screen drawn.

Clearly this is a hack that is forced due Corona’s peculiar behavior for iPhone5.

As Andrew pointed out.  This is Apple, not Corona SDK.  Yes, it seems rather hackish, specially for Apple.

I am noticing that when use the “ultimate config.lua”, on most devices the app uses all the screen real estate, except on nexus 7. On nexus 7, it leaves black bars on the side. Has anybody seen anything similar for android devices?

There are way too many Android devices to even begin to guess the aspect ratio needed to avoid black bars.  The Ultimate config.lua gets things close.  You may need to better calculate the aspect ratio to accommodate wider screens.  In fact the Galaxy Nexus 2 tablet (I think that’s the model) has an even wider aspect ratio.  It is supposed to be a 1024 x 600 device  (1.706 : 1) where a standard 16x9 screen is 1.7777 : 1.  The Ultimate Config.lua should work out to a 1.781 : 1 which you would think would cover that 1024x600.  However that device has a taller than normal button bar and it’s really a 1024x552 pixel screen which is like 1.855 : 1.  And my apps were black barring on it.

However, I use a Nexus 7, is a 1280x800 screen which is 1.6 :1 and the 320x570 layout should cover the screen.   The reason you are likely getting black bars is that 480/320 = is 1.5 : 1.  Your background image is not wide enough to cover the full the nexus 7 screen.  Your backgrounds need to be 570x360 (not 320.  The 360 is needed to support the iPad) or their @2x and @4x versions.  Part of the screen will bleed off screen depending on the screen’s shape, but by using a background bigger than the target area of the device (570x320 in the case of the default android shape) you won’t have these black bars.

You had previously asked about the @2x = 1.5 and @4x = 3.0, this may seem odd but it does do the job.   If you only had to deal with iPhone 3Gs and iPhone 4(s)'s then @2x = 2 and @4x = 4 would work.  But when you factor in all of the android devices and the iPads trying to use the same basic scale, then you find that a 1024x600 device isn’t going to detect that it’s 2x the 480x320 size.  320 * 2 = 640.  But the device is only 600px, so it picks up the lower resolution @1x graphics.  But it’s better to pick up the @2x and let Corona scale it down a bit to fit.   So by using 1.5 and 3.0 as the scale factors, we are basically saying if your device is closer to the 320 resolution us the low res and stretch up as needed.  If you over half-way to the 640 size device then use the higher res image and shrink down as necessary.  We continue this pattern with the decides larger than 640.  If the device is closer to 640 rather than 1280, then use the 2x and if we are on the larger size, use the 4x images.

Do you have the required:  Default-568h@2x.png file in the same folder with your main.lua file?  This file must exist.  It must match letter for letter and symbol for symbol and CaSE mAtTErs.  For instance the .png must be .png, not .PNG.   This file must be precisely 640 px wide and 1136px tall.

Once you have that file in the folder with your main.lua you should see things correctly on device.

If that is the case then what is the use of this???

imageSuffix = 

            {

                ["@2x"] = 1.5,

                ["@4x"] = 3.0

            },

I have tried with this also

imageSuffix = 

            {

                ["@2x"] = 2,

                ["@4x"] = 3.0

            },

I have two large images to satisfy all resolutions… - @2x=(720x1140 ) and   @4x=(1440x2280).

In simulator its working fine. But that is not the case in real device.

If this is the case, I have to have images with various dimensions to support android devices.

I have also installed in IPAD ( 768x1024 ) and its working fine. But I have no images with 768x1024 dimensions in resource folder. 

AAaaahhhhh. Very sorry about that. I didn’t read your reply properly. Sorry…I placed that file Default…png and its working fine. Thanks a lot

What about android devices/…There are tons of different resolutions available in android :slight_smile: Will it cause any problem? I have only one image Default-h568h@2x.png for iphone5 portrait mode. 

I have tested in android tablet(samsung) -1280x800 . Its working fine. We can’t test in all devices thats impossible.

If this is a problem in android also please let us know how to fix it.

Hi there,

The need for the Default-h568h@2x.png is only for the iPhone 5.  There’s no need for launch images like that for Android devices.

  • Andrew

So this is an exception for iPhone5 only?

I use custom splash screen that has promo buttons on it. Now that Apple won’t accept any iPhone apps that don’t fully use iPhone screen, can you remove this requirement?

That way, developers can choose to use Default…png or use their custom splash screens.

For now my workaround is to take a snapshot of my custom splash screen on iPhone5 and use that as the Default-568h@2x.png.

In reality the app first shows the Default…png image (only in case of iPhone5) and then shows my custom splash screen. Since they are identical, user doesn’t notice anything. (as long as the user doesn’t click on the buttons when Default…png is being shown for the first few seconds)

Clearly this is a hack that is forced due Corona’s peculiar behavior for iPhone5.

Can we get some clarification on this issue?

I am noticing that when use the “ultimate config.lua”, on most devices the app uses all the screen real estate, except on nexus 7. On nexus 7, it leaves black bars on the side. Has anybody seen anything similar for android devices?

Thanks

Vasant

Hi there,

This isn’t a Corona issue at all, this is the mechanism Apple built into iOS for determining whether an app is capable of running on a tall (16:9 aspect ratio) iPhone 5 screen.  If the Default-h568h@2x.png file is missing, iOS assumes that the app can only run on a shorter (4:3 aspect ratio) iPhone 3Gs/4/4s screen, and as a result will display it letterboxed (black bars at top and bottom) on the taller iPhone 5 screen.

  • Andrew

Hi Vasant.  There are a bunch of questions here so bear with me.

I use custom splash screen that has promo buttons on it. Now that Apple won’t accept any iPhone apps that don’t fully use iPhone screen, can you remove this requirement?

There is nothing preventing you from making the Default*.png family of files just solid black, or white, or whatever your initial splash screen is and then having your app show it’s splash screen over top of it.  There is no reason why you can’t have multiple splash screens.  I’ve seen plenty of apps that have 2-3.

In reality the app first shows the Default…png image (only in case of iPhone5) and then shows my custom splash screen. Since they are identical, user doesn’t notice anything. (as long as the user doesn’t click on the buttons when Default…png is being shown for the first few seconds)

I wouldn’t put your buttons on the first screen.  Also there may be a black flicker depending on how fast you get your splash screen drawn.

Clearly this is a hack that is forced due Corona’s peculiar behavior for iPhone5.

As Andrew pointed out.  This is Apple, not Corona SDK.  Yes, it seems rather hackish, specially for Apple.

I am noticing that when use the “ultimate config.lua”, on most devices the app uses all the screen real estate, except on nexus 7. On nexus 7, it leaves black bars on the side. Has anybody seen anything similar for android devices?

There are way too many Android devices to even begin to guess the aspect ratio needed to avoid black bars.  The Ultimate config.lua gets things close.  You may need to better calculate the aspect ratio to accommodate wider screens.  In fact the Galaxy Nexus 2 tablet (I think that’s the model) has an even wider aspect ratio.  It is supposed to be a 1024 x 600 device  (1.706 : 1) where a standard 16x9 screen is 1.7777 : 1.  The Ultimate Config.lua should work out to a 1.781 : 1 which you would think would cover that 1024x600.  However that device has a taller than normal button bar and it’s really a 1024x552 pixel screen which is like 1.855 : 1.  And my apps were black barring on it.

However, I use a Nexus 7, is a 1280x800 screen which is 1.6 :1 and the 320x570 layout should cover the screen.   The reason you are likely getting black bars is that 480/320 = is 1.5 : 1.  Your background image is not wide enough to cover the full the nexus 7 screen.  Your backgrounds need to be 570x360 (not 320.  The 360 is needed to support the iPad) or their @2x and @4x versions.  Part of the screen will bleed off screen depending on the screen’s shape, but by using a background bigger than the target area of the device (570x320 in the case of the default android shape) you won’t have these black bars.

You had previously asked about the @2x = 1.5 and @4x = 3.0, this may seem odd but it does do the job.   If you only had to deal with iPhone 3Gs and iPhone 4(s)'s then @2x = 2 and @4x = 4 would work.  But when you factor in all of the android devices and the iPads trying to use the same basic scale, then you find that a 1024x600 device isn’t going to detect that it’s 2x the 480x320 size.  320 * 2 = 640.  But the device is only 600px, so it picks up the lower resolution @1x graphics.  But it’s better to pick up the @2x and let Corona scale it down a bit to fit.   So by using 1.5 and 3.0 as the scale factors, we are basically saying if your device is closer to the 320 resolution us the low res and stretch up as needed.  If you over half-way to the 640 size device then use the higher res image and shrink down as necessary.  We continue this pattern with the decides larger than 640.  If the device is closer to 640 rather than 1280, then use the 2x and if we are on the larger size, use the 4x images.