iPhone X dimensions/issues

kbradford · September 13, 2017, 8:17pm

I have been playing around with the new iOS 11 simulator and the iPhone X. On the Corona simulator if I do a Custom Device of 1125x2436 my app looks fine, just with black bars where my content doesn’t fill. That’s an easy fix and I can simply increase my background.

The issue is it displays completely different on the actual iOS Simulator on my Mac. See my examples below. It’s like iOS 11 is forcing a letterbox over my app outside of Corona.

Corona simulator, see how the bottom bar is aligned to the bottom of the screen:

iOS iPhone X Simulator, notice how there is a huge gap at the bottom. Much bigger than what shows on the simulator.

kbradford · September 13, 2017, 8:44pm

Here is a much better example. Letterboxed on iPhone X, looks fine on Corona Simulator.

rob · September 13, 2017, 8:48pm

Are you using a storyboard launch screen setup or are you using static files?

kbradford · September 13, 2017, 8:49pm

Storyboard, would that effect this?

rob · September 13, 2017, 9:03pm

Needless to say the iPhone X isn’t something we have a lot of experience with. But what you describe is an issue is symptomatic of when Apple releases a new screen size and the developer is using static images and hasn’t adapted to the new device. Storyboard should mitigate against this.

Rob

kbradford · September 13, 2017, 9:06pm

Ah I see. I use them in all my apps now following this tutorial: https://docs.coronalabs.com/guide/distribution/launchFile/index.html

Would I need to make a new one with the new xCode that supports iOS 11?

rob · September 13, 2017, 9:12pm

The Storyboard method should just work. Can you post your build.settings?

Rob

kbradford · September 13, 2017, 9:17pm

settings =&nbsp; { &nbsp; &nbsp; &nbsp;splashScreen =&nbsp; &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enable = false &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp;orientation = &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default = "landscapeRight", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; supported = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "landscapeLeft", "landscapeRight", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;android = &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; versionCode = "44", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; versionName = "4.4", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; usesPermissions = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"com.android.vending.BILLING", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;iphone = &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plist = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;CFBundleDisplayName = "Preschool and Kindergarten", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;CFBundleIconFile = "Icon.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;CFBundleIconFiles = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon@2x.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-60.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-60@2x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-60@3x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-72.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-72@2x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-76.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-76@2x.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-167.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small@2x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small@3x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small-40.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small-40@2x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small-40@3x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small-50.png",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Icon-Small-50@2x.png", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;UIPrerenderedIcon = true, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;UIAppFonts =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"bdcartoonshout.ttf", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"LuckiestGuy.ttf", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"PoetsenOne-Regular.ttf", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"Nunito-Black.ttf", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"Nunito-ExtraBold.ttf", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;UILaunchStoryboardName = "LaunchScreen", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;window =&nbsp; &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultMode = "normal", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultViewWidth = 960, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; defaultViewHeight = 600, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resizable = false, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enableMaximizeButton = true, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; enableCloseButton = true, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; titleText = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;default = "Preschool and Kindergarten Learning Games", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp;}, &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;plugins = &nbsp; &nbsp; &nbsp;{ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["plugin.amazon.iap"] = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;-- required &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;publisherId = "com.coronalabs", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;supportedPlatforms = { ["android-kindle"]=true } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["plugin.google.iap.v3"] = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;publisherId = "com.coronalabs", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;supportedPlatforms = { android=true } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ["plugin.reviewPopUp"] = &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;publisherId = "tech.scotth", &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp;&nbsp; }

Susandaigle23 · September 14, 2017, 3:39pm

Well, I want to know more about iPhone X as its specs are much magnificent than the others.

kbradford · September 14, 2017, 3:52pm

Found this on the Apple forums, sounds like apps can only display at iPhone X native resolution if they’re built against iOS 11. I’m guessing that’s in the works by the Corona team?

https://forums.developer.apple.com/message/259066#259066

rob · September 14, 2017, 4:00pm

Hi @Susandaigle23 and welcome to the Corona Labs community forums. Our forums are specifically for information intended for developers using our software framework Corona. What you will find here is how the iPhone X behaves with Corona. It’s not a general forum to learn about general iPhone X facts.

Rob

rob · September 14, 2017, 8:26pm

I got Xcode 9 installed so I could test with the iOS 11 beta in our sim. I did a test with my game I’m working on and Storyboard is working as expected. The UI Launch Image setup, the splash screen, and the game screens that are designed to fill the screen do so correctly. I conducted a second test using an image I use to illustrate content areas. I had to modify it a little bit to compensate for the iPhone X’s even more extreme aspect ratio. I thought the Galaxy S8’s 2:1 was extreme, but the X’s 2.165:1 aspect ratio pushes that even more.

If you’re using a 320x480 letterbox content area, your background has to be 360x693 (portrait) to fully fill the screen. The orange is the iPhone X screen area. The yellow the Galaxy S8, the blue the typical 16:9 device and the green the 320x480.

When applied to the Xcode iPhone X simulator you get:

Right now we don’t have a way to get you the safe area (out of the rounded corners and to count for the sensor housing) and for landscape apps to protect against the swipe up zone.

Rob

kbradford · September 14, 2017, 8:33pm

Did you build against the iOS 11 SDK or 10.3 SDK?

My background and images are plenty big to stretch the whole size (see my screenshot from the Corona simulator, it fills the whole thing). It’s forcing me into a letterbox the same size of an older iPhone.

rob · September 14, 2017, 8:53pm

I’m using Xcode 9 and building against 3135’s iOS 11 Beta option and testing in the Xcode iPhone X simulator.

Your build.settings looks right.

Rob

kbradford · September 14, 2017, 8:54pm

Oh, how do I get iOS 11 Beta as an option for my SDK? I’m on 3135 with the XCode 9 GM seed downloaded, but I still only see 10.3 as an option.

rob · September 14, 2017, 9:10pm

Are you using the Xcode 9? What happens if you run:

xcode-select

from the terminal?

I installed Xcode 9 over top of my Xcode 8.

Rob

kbradford · September 14, 2017, 9:35pm

Just copied XCode 9 over 8 and now I get 10.3 (UNSUPPORTED: Local iOS SDK is 11.0 which does not match).

xcode-select just returns a list of options. Which option should I do?

-v says version 2347, -p says /Applications/Xcode.app/Contents/Developer

kbradford · September 14, 2017, 9:39pm

Hmm, do you still have XCode 9 beta or the recently released GM seed? I’m wondering if you’re building again a beta iOS 11 and I have a final iOS 11 that the Corona servers can’t support yet?

rob · September 14, 2017, 10:05pm

Are you running Corona 3135, the latest public release?

Xcode 9 GM has the iOS 11 GM files that it needs. Since you’re testing against the Xcode Simulator’s iPhone X device, that’s all contained in Xcode. You should see something like:

Rob

kbradford · September 14, 2017, 10:13pm

Yes, using 3135. Using Xcode 9 GM too. This is what I see when I try to build: