iOS iPhone 5 Black Bars

[donniepropst]

Hello, I understand that the black bars issue on iPhone 5 is very common. I worked all day yesterday trying to get the app functional(currently Android version is completely working, iOS just has the black bar issue).  I did follow the guide here:

http://docs.coronalabs.com/guide/distribution/buildSettings/index.html
I am including all of the necessary files (each of the “Default-.pngs”) these files are not located in any subfolder within the project folder. My main question is should the build.settings file have  

UILaunchImageFile = {"Default-568h@2x.png"}

          OR

UILaunchImages = {  -- iPhone 5 Portrait ["UILaunchImageMinimumOSVersion"] = "7.0", ["UILaunchImageName"] = "Default-568h@2x", ["UILaunchImageOrientation"] = "Portrait", ["UILaunchImageSize"] = "{640,1136}" }

I’ve seen both of the above methods, the first in some forum posts, the second in the official docs.
Also, should the images within each table have the “.png”, the example in the docs does not, however other examples(in forums) show the tables with the “.png”

I attached a window picture of my Sublime editor, I understand case & spelling errors, or wrong hyphens would cause this but I believe all my files are named properly. 
Thank you

[rob]

First of all you don’t need the Default-568h.png, Default-667h.png and Default-736h.png file.  You just need the @2x versions of the first two and the @3x version of the one for the 6 Plus.

Next, we are trying to determine the exact cause of this issue.  I’m suspecting its a space in the size.  Try this:

UILaunchImages = {     -- iPhone 5 Portrait     ["UILaunchImageMinimumOSVersion"] = "7.0",     ["UILaunchImageName"] = "Default-568h",     ["UILaunchImageOrientation"] = "Portrait",     ["UILaunchImageSize"] = "{640, 1136}" }

You don’t need to include the @2x or @3x in the name entry.

Rob

[donniepropst]

That did it, I didn’t realize that the @2x in the entry wasn’t necessary, thanks so much!!

[benny5]

I have the same problem. So the issue was the space after the comma at -> 640, 1136 not 640,1136?

[bjsorrentino]

Hi @benny5,

Yes, for some baffling reason, Apple was not “parsing” these values properly if a space was included. Eliminate the space(s) after the comma(s) and everything should work fine.

Brent

[bjsorrentino]

Excuse me, there should be a space, sorry about that…

[donniepropst]

After trying to get the app to work on an iPhone 6(after solving the iPhone 5 issue), I would have black bar issues on it, I actually just deleted the UILaunchImages table entirely from my app, built it, and it worked for every device. I could never get the size to work on more than one device.  But now, without the table, it worked on all of them.  Not sure why, but Apple ended up approving it. Working on my next app now and I went ahead and left the table out and it is working fine so far.

[rob]

If you do not use the UILaunchImages table, then you are likely running in “Zoom” mode (i.e. the iPhone 5 screen scaled up to the device screen).

If you are happy with that, then that’s perfectly fine.

Rob

[benny5]

Great that should do it then. I was baffled as i explicitly copied from your docs to get it right

[rob]

There was a period of time when we didn’t have a space between the size values before we discovered that the space after the comma mattered.  We are still scratching our head as to why that should matter, we just pass the values on to Apple.  But anyway, if your UILaunchImageSize entries are like this:
 

[“UILaunchImageSize”] = “{640,1136}”

it won’t work, but add the space in like this:

[“UILaunchImageSize”] = “{640, 1136}”

And it should work for you.  You have to get all of them.

Rob

[benny5]

Unfortunately that didn’t help. My users still are in “iPhone 4 mode” on their iPhone 5. I even submitted the update to Apple and I checked that they updated. The launch image now looked very stretched and then the black bars were still there. Here’s what I have done so far:

• I deleted the Default-568h.png per your suggestion (as it wasn’t needed)

• I made sure the image was in the root folder with the exact name as follows (size 1136x640):

Default-568h@2x.png

• Is there any way to test this on the iOS simulator on an iPhone 5 without submitting to apple and letting users update. It takes a week at a time. I didn’t get any testflights to work and I don’t have access to an iPhone 5.

• This is my build.settings. Spaces and all. I don’t see any errors anymore. Any other ideas?

• Oh and I think they’re running iOS 8 on their iPhone 5’s if that helps.

  – Supported values for orientation: – portrait, portraitUpsideDown, landscapeLeft, landscapeRight settings = {   plugins = {       [“plugin.google.play.services”] =       {         publisherId = “com.coronalabs”       },       [“plugin.adbuddiz”] = {          publisherId = “com.adbuddiz”       },   },   orientation =   {       default = “landscapeRight”,  --initial launch orientation       --content = “landscapeRight”,  --locked orientation of the Corona stage, independent of Native UI elements (iOS only)       supported = {“landscapeRight”, “landscapeLeft”},  --table of allowed options for auto-orientation   }, iphone = { plist = { --CFBundleDisplayName = “Pyramid Jumble”,       --CFBundleName = “Pyramid Jumble”,       CFBundleShortVersionString = “1.6”, CFBundleLocalizations = { “en”, “sv”, },       UIAppFonts = {           “geosanslight.ttf”       }, UIStatusBarHidden = true, UIPrerenderedIcon = false, – set to false for “shine” overlay --UIApplicationExitsOnSuspend = true, – uncomment to quit app on suspend CFBundleIconFile = “Icon.png”,       CFBundleIconFiles = {         “Icon.png”,         “Icon@2x.png”,         “Icon-60.png”,         “Icon-60@2x.png”,         “Icon-60@3x.png”,         “Icon-72.png”,         “Icon-72@2x.png”,         “Icon-76.png”,         “Icon-76@2x.png”,         “Icon-Small-40.png”,         “Icon-Small-40@2x.png”,         “Icon-Small-40@3x.png”,         “Icon-Small-50.png”,         “Icon-Small-50@2x.png”,         “Icon-Small.png”,         “Icon-Small@2x.png”,         “Icon-Small@3x.png”,       },       --launch image files table       UILaunchImages = {         {  – iPhone 4 LandscapeLeft           [“UILaunchImageMinimumOSVersion”] = “7.0”,           [“UILaunchImageName”] = “Default”,           [“UILaunchImageOrientation”] = “LandscapeLeft”,           [“UILaunchImageSize”] = “{320, 480}”         },         {  – iPhone 4 LandscapeRight           [“UILaunchImageMinimumOSVersion”] = “7.0”,           [“UILaunchImageName”] = “Default”,           [“UILaunchImageOrientation”] = “LandscapeRight”,           [“UILaunchImageSize”] = “{320, 480}”         },         {  – iPhone 5 LandscapeLeft           [“UILaunchImageMinimumOSVersion”] = “7.0”,           [“UILaunchImageName”] = “Default-568h”,           [“UILaunchImageOrientation”] = “LandscapeLeft”,           [“UILaunchImageSize”] = “{320, 568}”         },         {  – iPhone 5 LandscapeRight           [“UILaunchImageMinimumOSVersion”] = “7.0”,           [“UILaunchImageName”] = “Default-568h”,           [“UILaunchImageOrientation”] = “LandscapeRight”,           [“UILaunchImageSize”] = “{320, 568}”         },         {  – iPad LandscapeLeft           [“UILaunchImageMinimumOSVersion”] = “7.0”,           [“UILaunchImageName”] = “Default-Landscape”,           [“UILaunchImageOrientation”] = “LandscapeLeft”,           [“UILaunchImageSize”] = “{768, 1024}”         },         {  – iPad LandscapeRight           [“UILaunchImageMinimumOSVersion”] = “7.0”,           [“UILaunchImageName”] = “Default-Landscape”,           [“UILaunchImageOrientation”] = “LandscapeRight”,           [“UILaunchImageSize”] = “{768, 1024}”         },         {  – iPhone 6 LandscapeLeft           [“UILaunchImageMinimumOSVersion”] = “8.0”,           [“UILaunchImageName”] = “Default-667h”,           [“UILaunchImageOrientation”] = “LandscapeLeft”,           [“UILaunchImageSize”] = “{375, 667}”         },         {  – iPhone 6 LandscapeRight           [“UILaunchImageMinimumOSVersion”] = “8.0”,           [“UILaunchImageName”] = “Default-667h”,           [“UILaunchImageOrientation”] = “LandscapeRight”,           [“UILaunchImageSize”] = “{375, 667}”         },         {  – iPhone 6 Plus LandscapeLeft           [“UILaunchImageMinimumOSVersion”] = “8.0”,           [“UILaunchImageName”] = “Default-Landscape-736h”,           [“UILaunchImageOrientation”] = “LandscapeLeft”,           [“UILaunchImageSize”] = “{414, 736}”         },         {  – iPhone 6 Plus LandscapeRight           [“UILaunchImageMinimumOSVersion”] = “8.0”,           [“UILaunchImageName”] = “Default-Landscape-736h”,           [“UILaunchImageOrientation”] = “LandscapeRight”,           [“UILaunchImageSize”] = “{414, 736}”         },       },       --[[      – iOS app URL schemes:       CFBundleURLTypes =       {           {               CFBundleURLSchemes =               {                   “fbXXXXXXXXXXXXXX”, – example scheme for facebook                   “coronasdkapp”, – example second scheme               }           }       }      ]]-- } },   android =   {     usesPermissions =     {       “android.permission.INTERNET”,       “android.permission.ACCESS_NETWORK_STATE”,       – Optional permission, add it only if you will send the user’s geo location       --“android.permission.ACCESS_FINE_LOCATION”,       --“android.permission.ACCESS_COARSE_LOCATION”,     },   },   excludeFiles = {       – Exclude all files at paths which end with “secret.txt”:       --all = { “*secret.txt” },       – Exclude all Android icon files and .ogg files in the “music” directory:       iphone = {       “Icon-*dpi.png”       },       – Exclude iOS “retina” image files and .m4a files in the “music” directory:       android = {        “Default*.png”,       “Icon.png”,       “Icon-6*.png”,       “Icon-7*.png”,       “Icon-small*.png”,       “*@2x.png”,       “*@3x.png”,       },   }, }

[benny5]

Finally got the game working in the iOS simulator now.

Here’s how the file structure looks:

Here’s how the launch image looks when its used in the iOS simulator (exactly as in real life)

(its on its side and compressed, not landscape like the launch image on disk).

And here’s the black bars in game when it has loaded.

EDIT: OK I have officially tried everything I’ve seen. I’ve tried different things all night. I’m getting really sick of these hacks. Just use the whole screen without having an image telling you what to do dammit!

I’m at a loss, please help. Hopefully all you need is in these last two posts. I’ll provide any info you need. This is the last bug before I can really push the game out there so it’s incredibly frustrating being stuck with such as stupid thing

[rob]

Hi Benny… Do you have an iDevice to test on?  You probably should not be submitting to the store to test your apps.  If you don’t have all the devices you need to test on, you can ask others to help test for you.

To test, you will need to get UDID’s frmo your testers and add them to your Apple Provisioning Portal and then generate  a new provisioning profile (Developer or AdHoc) with the devices added to it.  Then you can send .ipa files to your testers and they can test for you.

When we get the next public build out, you should also be able to test on the iOS Simulator with the various different devices and check things.

Now to the black bars.  Since your launch image is showing the whole screen being taken up, it’s very possible that your black bars are part of your code.  What does your config.lua look like?  Can you also post the code for the background image?  What are the pixel dimensions of that image?

Rob

[benny5]

Hi Rob, thanks a lot for helping out.

I have an iPad, everything is great there. I know I shouldn’t submit to test, but seeing as it was the last thing wrong I thought it would work. After a whole night of experimenting I actually got the iOS simulator to work. The screenshots above are taken form it. So now I can actually reproduce the problem at least.

It works great on even wider android phones and the dimensions are the same.

Here’s the config.lua:

--calculate the aspect ratio of the device local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 800 or math.ceil( 1200 / aspectRatio ), height = aspectRatio \< 1.5 and 1200 or math.ceil( 800 \* aspectRatio ), scale = "letterBox", fps = 60, &nbsp; imageSuffix = { &nbsp; &nbsp; &nbsp;["@2x"] = 1.3, &nbsp; }, }, }

Code for language screen:

background image is 2048x1295

-- Called when the scene's view does not exist: function scene:createScene( event ) local group = self.view -- display a background image local background = display.newImageRect( "images/bg\_v4.png", 2048, 1295 ) background.anchorX = 0 background.anchorY = 0 background.x, background.y = 0, 0 background.xScale= 0.7 background.yScale= 0.7 group:insert(background) -- create/position logo/title image on upper-half of the screen local titleLogo = display.newImageRect("images/logo.png", 500, 500) titleLogo.x = SCREENW\*0.5 titleLogo.y = SCREENH\*0.4 titleLogo.xScale= 1 titleLogo.yScale= 1 group:insert(titleLogo) local buttonId = "en" local buttonEN = uiC.createButton(group, { id = buttonId, label = "English", sheet = "buttonSheet", click = function(event) onClick(event) return true end, x = SCREENW \* 0.7, y = SCREENH \* 0.8, frameWidth = 502, frameHeight = 102, sheetWidth = 502, sheetHeight = 204, xScale = 1, yScale = 1, }) local buttonId = "sv" local buttonSV = uiC.createButton(group, { id = buttonId, label = "Svenska", sheet = "buttonSheet", click = function(event) onClick(event) return true end, x = SCREENW \* 0.3, y = SCREENH \* 0.8, frameWidth = 502, frameHeight = 102, sheetWidth = 502, sheetHeight = 204, xScale = 1, yScale = 1, }) soundC:play("press") end

Also in the next screen you can see a huge world and it still has black bars:

[benny5]

Another update. Like donniepropst before me concluded removing the launchimages table entirely seems to be the only way this is working at all. I should’ve taken his advice a long time ago. Seems apple is parsing this table completely wrong no matter how you set it up. Didn’t notice a difference in how the game is rendered either with the table gone. I will test on more devices in the simulator tonight and we’ll see if it works this well on all of them.

And for the second issue there seems to be no way around the sideways launch image either. I’ll just make it white and forget about it. This simply isn’t worth the hassle.

EDIT: for anyone else trying, the ios simulator only works for iphone 4, 5 and ipad 2 and retina virtual devices. didn’t try air. iphone 6 and plus just quit after the launch image even if I prebuilt with a iphone 6 project. building an iphone 5 project and then swapping out the corona built app worked for the 4 devices above at least.

so with a white image and no launch image table I’m at least happy with how it looks even if it isn’t “right”.

[rob]

First of all you don’t need the Default-568h.png, Default-667h.png and Default-736h.png file.  You just need the @2x versions of the first two and the @3x version of the one for the 6 Plus.

Next, we are trying to determine the exact cause of this issue.  I’m suspecting its a space in the size.  Try this:

UILaunchImages = {     -- iPhone 5 Portrait     ["UILaunchImageMinimumOSVersion"] = "7.0",     ["UILaunchImageName"] = "Default-568h",     ["UILaunchImageOrientation"] = "Portrait",     ["UILaunchImageSize"] = "{640, 1136}" }

You don’t need to include the @2x or @3x in the name entry.

Rob

[donniepropst]

That did it, I didn’t realize that the @2x in the entry wasn’t necessary, thanks so much!!

[benny5]

I have the same problem. So the issue was the space after the comma at -> 640, 1136 not 640,1136?

[bjsorrentino]

Hi @benny5,

Yes, for some baffling reason, Apple was not “parsing” these values properly if a space was included. Eliminate the space(s) after the comma(s) and everything should work fine.

Brent

[bjsorrentino]

Excuse me, there should be a space, sorry about that…