Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

black bars on regular build with iphone 7+
Started by latyl1 Apr 06 2017 02:16 AM

4 replies to this topic

Best Answer Rob Miracle , 07 April 2017 - 07:11 AM

This is is a fairly long explanation but bear with me since there is a lot of history here.

 

Since the beginning of the iPhone and iPad family devices, Apple has allowed you to have a "startup" or "launch" screen that many used for branding, but Apple has always wanted to look like the first screen of your app to give the illusion that you're app is starting faster. Back in the day of the iPhone 3 this launch image was called "Default.png" and was 320x480, the size of the iPhone 3/3s screen size. When the iPhone 4 came out, the screen doubled in size (Retina display) and was now 640x960. It was the same shape, so the launch image for that was called Default@2x.png. You just needed to include these in your project. The iPads added some more complexity because they supported "Landscape" oriented launch images, so now you also included a Default-landscape.png and Default-landscape@2x.png file (when the Retina iPads came out).

 

When Apple came out with the iPhone 5, the needed a way to programmatically know if an app supported "tall" mode, if not you got 88 pixels black bars at the top and bottom of the screen on an iPhone 5 (the iPhone 4 was a 640x960 screen, the iPhone 5 a 640x1136 screen). Older apps that didn't support tall mode would run in iPhone 4 mode, tall mode apps would fill the extra space.

 

The way Apple detected this was the presence of a file named Default-568h@2x.png. It had to be 640x1136 portrait only. If you don't have this, you fall back to 640x960 as the screen size.

 

Then Apple came out with the new iPhone 6 and 6 plus models which offered yet two more screen sizes that need supported (the 6s/7 and 6s/7 plus models have not changed screen sizes, so they are lumped in with the 6/6 plus for discussions). Apple needed a way to know if developers were just running older iPhone 5 apps or if they were made for the new screens. Since the new models are the same shape as the 5, there wasn't much of a need to deal with black bars, but iPhone 5 based apps would zoom up to fill the 6 and 6 plus screens, which didn't always look that good.  Apples solution: Default-667h@2x.png and Default-734h@3x.png files would indicate that apps were designed for those screens. To compound matters, Apple now allowed landscape versions of the Default-734h@3x.png files for the plus models.

 

But in doing this, there were now 10 of these Default PNG files needed in a project. The naming scheme got complex so they switched to also requiring you to list the files in your build.settings file in a block known as UILaunchImages. This is a terribly complex table that's prone to error.

 

With iOS 8, Apple tried to clean up a lot of this. Corona however has provided support going back to iOS 6 until a little over a month ago and the new public build has dropped iOS 6 and 7 support. Now Apple has a very clean way to support launch images that's down to four files and one line in your build.settings. They still support the older method.

 

Apple seems to also have made some changes around iOS 10 that has changed the behavior even more. Perhaps starting with iOS 10.2, they started failing submissions that did not have the required Default-568h@2x.png file or the new "Storyboard" based system. And it seems that perhaps with 10.3 the have gone back to showing the black bars in the absence of this file (I've not tested this, at this point I'm speculating). We use to include an all black Default-568h@2x.png file when creating new projects and we don't do that any more but include a blank storyboard based system that will still present a black launch image so you shouldn't be seeing this.

 

This is why I speculate this is a 10.3 or Xcode 8.3 change. As build 2975 was a 10.2 base SDK and 3068 is 10.3 and you have nothing in your build.setting indicating that you're doing anything with UILaunchImages or with the Xcode storyboard launch setup.

 

I recommend since you're using 3068 and you won't be deploying to iOS 6 and 7 devices, that you integrate the storyboard setup.

 

The easiest way for you to do this, if your okay with an all black image right before our splash screen, is to go to the HelloWorld sample app in /Applications/CoronaSDK/SampleCode/GettingStarted/HelloWorld (if you're using the latest public build, or CoronaSDK-3068 if you're using the daily build version of it) and copy the LaunchScreen.storyboardc file to your project and add 

UILaunchStoryboardName = "LaunchScreen",

to your build.settings in the settings.iphone.plist table where you have UIStatusBarHidden = true line. You should also remove the MinimumSDK line too.

 

Rob

 

[TOPIC CONTROLS]
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

latyl1

[GLOBAL: userInfoPane.html]
latyl1
  • Enthusiast

  • 88 posts
  • Corona SDK

hello,

 

I was used to code and test my app with the 2017.2975 build.

On my iphone 7+, my appli is 100% full screen (it's what i need) :

 

jqtHL0.png

 

Today, i try 3 others builds, and even with the last 2017.3068 build, with EXACTLY the same code, i tried to build, and on my iphone 7+ the result is that i have 2 black bars on top and bottom :

 

hVeT86.png

 

Theses 2 pics are screenshot on my iphone.

 

I don't understand why it appends.

Could you help me please ?

 

My config file is "standard" and the same than everybody i think :

 

local aspectRatio = display.pixelHeight / display.pixelWidth
 
application = {
   content = {
      width   = aspectRatio > 1.5 and 320 or math.ceil( 480 / aspectRatio ),
      height  = aspectRatio < 1.5 and 480 or math.ceil( 320 * aspectRatio ),
      scale   = "zoomEven", -- zoomEven letterBox adaptive
      xAlign  = "left",
      yAlign  = "top",      
      fps = 60,
      --showRuntimeErrors = true,
      imageSuffix = {
         ["@2x"] = 1.5,
         ["@4x"] = 3.0,
      },
   },
}

 



[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,042 posts
  • Enterprise

Can you post your build.settings and what Default*.png files do you have in your project?

 

 

Thanks

Rob



[TOPIC: post.html]
#3

latyl1

[GLOBAL: userInfoPane.html]
latyl1
  • Enthusiast

  • 88 posts
  • Corona SDK

my build.setting below.

 

do i have something to change or add ? thanks !

 

i don't understand what you mean about "default*.png" and what are the impact of the png file (my backgroundfile ?) on theses black bars...

--
-- For more information on build.settings see the Corona SDK Build Guide at:
-- https://docs.coronalabs.com/guide/distribution/buildSettings
--

settings =
{

  plugins =
  {

      ["plugin.google.iap.v3"] =
      {
          publisherId = "com.coronalabs",
          supportedPlatforms = { android=true }
      },
  },
    
    orientation =
    {
        -- Supported values for orientation:
        -- portrait, portraitUpsideDown, landscapeLeft, landscapeRight

        default = "portrait",
        supported = { "portrait" },
    },
    
    excludeFiles =
    {
        -- Include only the necessary icon files on each platform
        iphone = { "Icon-*dpi.png", },
        android = { "Icon.png", "Icon-Small-*.png", "Icon*@2x.png", },
    },

    --
    -- iOS Section
    --
    iphone =
    {
        plist =
        {
    
      MinimumOSVersion = "7.0",
      UIApplicationExitsOnSuspend = false,
                  
            UIStatusBarHidden = false,
            UIPrerenderedIcon = true, -- set to false for "shine" overlay
            --UIApplicationExitsOnSuspend = true, -- uncomment to quit app on suspend

      -- This will allow end users to see that the app supports their language when they are browsing and see your app in the app store
      CFBundleLocalizations =
      {
        "English",
        "French"
      },
    
            CFBundleIconFiles =
            {
                "Icon.png",
                "Icon@2x.png",
                "Icon-167.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.png",
                "Icon-Small@2x.png",
                "Icon-Small@3x.png",
                "Icon-Small-40.png",
                "Icon-Small-40@2x.png",
                "Icon-Small-50.png",
                "Icon-Small-50@2x.png",
            },
      
      NSAppTransportSecurity =
       {
        NSExceptionDomains =
         {
          ["mywebsite.com"] =
           {
            NSIncludesSubdomains = true,
            NSThirdPartyExceptionAllowsInsecureHTTPLoads = true
           },
         },
       },
       
       
        },
    },
    
    --
    -- Android Section
    --
    android =
    {
    
        usesPermissions =
        {
            "android.permission.INTERNET",
      "com.android.vending.BILLING",
      "com.android.vending.CHECK_LICENSE",
        },
    },
}

s



[TOPIC: post.html]
#4

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 26,042 posts
  • Enterprise

  Best Answer

This is is a fairly long explanation but bear with me since there is a lot of history here.

 

Since the beginning of the iPhone and iPad family devices, Apple has allowed you to have a "startup" or "launch" screen that many used for branding, but Apple has always wanted to look like the first screen of your app to give the illusion that you're app is starting faster. Back in the day of the iPhone 3 this launch image was called "Default.png" and was 320x480, the size of the iPhone 3/3s screen size. When the iPhone 4 came out, the screen doubled in size (Retina display) and was now 640x960. It was the same shape, so the launch image for that was called Default@2x.png. You just needed to include these in your project. The iPads added some more complexity because they supported "Landscape" oriented launch images, so now you also included a Default-landscape.png and Default-landscape@2x.png file (when the Retina iPads came out).

 

When Apple came out with the iPhone 5, the needed a way to programmatically know if an app supported "tall" mode, if not you got 88 pixels black bars at the top and bottom of the screen on an iPhone 5 (the iPhone 4 was a 640x960 screen, the iPhone 5 a 640x1136 screen). Older apps that didn't support tall mode would run in iPhone 4 mode, tall mode apps would fill the extra space.

 

The way Apple detected this was the presence of a file named Default-568h@2x.png. It had to be 640x1136 portrait only. If you don't have this, you fall back to 640x960 as the screen size.

 

Then Apple came out with the new iPhone 6 and 6 plus models which offered yet two more screen sizes that need supported (the 6s/7 and 6s/7 plus models have not changed screen sizes, so they are lumped in with the 6/6 plus for discussions). Apple needed a way to know if developers were just running older iPhone 5 apps or if they were made for the new screens. Since the new models are the same shape as the 5, there wasn't much of a need to deal with black bars, but iPhone 5 based apps would zoom up to fill the 6 and 6 plus screens, which didn't always look that good.  Apples solution: Default-667h@2x.png and Default-734h@3x.png files would indicate that apps were designed for those screens. To compound matters, Apple now allowed landscape versions of the Default-734h@3x.png files for the plus models.

 

But in doing this, there were now 10 of these Default PNG files needed in a project. The naming scheme got complex so they switched to also requiring you to list the files in your build.settings file in a block known as UILaunchImages. This is a terribly complex table that's prone to error.

 

With iOS 8, Apple tried to clean up a lot of this. Corona however has provided support going back to iOS 6 until a little over a month ago and the new public build has dropped iOS 6 and 7 support. Now Apple has a very clean way to support launch images that's down to four files and one line in your build.settings. They still support the older method.

 

Apple seems to also have made some changes around iOS 10 that has changed the behavior even more. Perhaps starting with iOS 10.2, they started failing submissions that did not have the required Default-568h@2x.png file or the new "Storyboard" based system. And it seems that perhaps with 10.3 the have gone back to showing the black bars in the absence of this file (I've not tested this, at this point I'm speculating). We use to include an all black Default-568h@2x.png file when creating new projects and we don't do that any more but include a blank storyboard based system that will still present a black launch image so you shouldn't be seeing this.

 

This is why I speculate this is a 10.3 or Xcode 8.3 change. As build 2975 was a 10.2 base SDK and 3068 is 10.3 and you have nothing in your build.setting indicating that you're doing anything with UILaunchImages or with the Xcode storyboard launch setup.

 

I recommend since you're using 3068 and you won't be deploying to iOS 6 and 7 devices, that you integrate the storyboard setup.

 

The easiest way for you to do this, if your okay with an all black image right before our splash screen, is to go to the HelloWorld sample app in /Applications/CoronaSDK/SampleCode/GettingStarted/HelloWorld (if you're using the latest public build, or CoronaSDK-3068 if you're using the daily build version of it) and copy the LaunchScreen.storyboardc file to your project and add 

UILaunchStoryboardName = "LaunchScreen",

to your build.settings in the settings.iphone.plist table where you have UIStatusBarHidden = true line. You should also remove the MinimumSDK line too.

 

Rob

 



[TOPIC: post.html]
#5

latyl1

[GLOBAL: userInfoPane.html]
latyl1
  • Enthusiast

  • 88 posts
  • Corona SDK

Thank you very much Rob, it works fine now !!!

your help is very appreciated !




[topic_controls]
[/topic_controls]