iPhone X, XS, XR, Screen Size (Black Bars Problem)

  • Been stuck for weeks trying to resolve this issue I followed all the Tips to support Multiple "Screen Sizes" but I still get Black bars on iPhone X, XS, XR making impossible to release games on ios.

    Settings that I tried:

    -Pick up a 16.9 aspect ratio resolution

    -(Scale Inner/Scale Outer)

    Also

    -Many Tutorials that requires to modify the config.xml & index.Html adding some lines of code

    But nothing seems to work

    Is anyone successfully resolved this issue?

    Ashley

    construct 3 has already this option but what about construct 2?

    there a lot of us still using c2 because can't move to c3 yet and you still selling c2 at double the price, wouldn't you fix this bug that prevents c2 to export to ios, I understand you are busy with c3 but some critical bugs like this I think it should be addressed as a respect to (current c2 users supporters & Future buyers of c2) or at least can you give us some guidance or tutorial of what to do to fix it our self I believe Nepeo can help with that as he already Fixed that on C3.

    This has been going on for almost two years iPhone X was first released on 3 November 2017 and still, we haven't got a Fix

  • Hey tarek2 are you exporting as an app or just trying to get support for a HTML export?

    We actually made some changes to how C2 projects are built on the build service to try and improve this issue. Although I realise there's probably still a couple of steps that would need resolving in addition. If your not a C3 sub then it's going to be a bit harder, but I will try to help.

  • Hi Nepeo

    is for an App to the App Store

    -I export with Cordova from c2 min iOS 9.0+

    Then I tried both options:

    -build from PhoneGap

    -Or Build from Cordova Cli locally, I tested with Version (8.1.2 & 9.0.0) + Xcode 10

    Thanks for your help Nepeo I really appreciated, I don't mind to do it my self even if it's difficult as long I have some guidance or tutorial of what to do, I followed many tutorials but none of them seems to work.

  • Okay so our current approach to patching a C2 project for the buildservice to resolve this is as follows:

    - set the cordova "fullscreen" flag to FALSE

    - add the "cordova-plugin-statusbar" plugin to the project

    - append the following chunk of javascript

    ;(function () {
    	var previousWidth = -1;
    	var previousHeight = -1;
    
    	function tick ()
    	{
    		requestAnimationFrame(tick);
    
    		var isPortrait = window.innerWidth < window.innerHeight;
    
    		var height = isPortrait ? window["screen"]["height"] : window["screen"]["width"];
    		var width = isPortrait ? window["screen"]["width"] : window["screen"]["height"];
    
    		if (previousHeight == height && previousWidth == width)
    			return;
    
    		previousHeight = height;
    		previousWidth = width;
    
    		var docStyle = document["documentElement"].style;
    		var bodyStyle = document["body"].style;
    
    		if (height && width)
    		{
    			bodyStyle["height"] = docStyle["height"] = height + "px";
    			bodyStyle["width"] = docStyle["width"] = width + "px";
    		}
    	}
    
    	function enterFullscreen ()
    	{
    		// ios - hide statusbar
    		if (typeof window["StatusBar"] === "object")
    			window["StatusBar"]["hide"]();
    
    		// android - hide status and nav bar
    		if (typeof window["AndroidFullScreen"] === "object")
    			window["AndroidFullScreen"]["immersiveMode"]();
    	}
    
    	document.addEventListener("deviceready", function () {
    		var ua = navigator.userAgent;
    		var isMicrosoftEdge = /edge\\//i.test(ua);
    		var isIE = (/msie/i.test(ua) || /trident/i.test(ua) || /iemobile/i.test(ua)) && !isMicrosoftEdge;
    		var isiPhone = (/iphone/i.test(ua) || /ipod/i.test(ua)) && !isIE && !isMicrosoftEdge;	// treat ipod as an iphone; IE mobile masquerades as iPhone
    
    		enterFullscreen();
    		if (isiPhone && window["screen"])
    			tick();
    	});
    })();
    

    That's as far as the build service goes to try fix C2 exports ( at least for iOS ) but to work on "notched" iOS devices you will also have to add "viewport-fit=cover" to the meta viewport tag in your main .html file, like so:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
    

    ... and you need to use a launch storyboard for instead of a standard splashscreen. Further details on this can be found here.

    One other thing I'd note is that the build service is using Cordova CLI 9 which officially supports iOS 12. Phongegap has only just added the option for this, but I thought you should be aware.

  • Awesome Big Thanks Nepeo Im goona test it and see how ti goes I will let you know the Results

    I have a question about:

    append the following chunk of javascript

    Do I have to copy all of that I guess on the config.xml? after export the game from c2

  • Nah append it to the end of the c2runtime.js file. It runs when the app starts and hides the statusbar ( making it fullscreen ). It also runs a little block which corrects the window size, as the iPhone X forces the window to the wrong size...

  • Nah append it to the end of the c2runtime.js file. It runs when the app starts and hides the statusbar ( making it fullscreen ). It also runs a little block which corrects the window size, as the iPhone X forces the window to the wrong size...

    Hoo I see is good I asked then )

    Here Nepeo? I just wanna make sure is on the right place as any wrong thing it will brake everything

    This is my c2runtime.js

  • Nepeo

    Sorry I got one more question about:

    add the "cordova-plugin-statusbar" plugin to the project

    this part you mean to install it from Cordova CLI right?

    like this,

    also I have this version installed >>>the Cordova ver 9.0.0 (cordova-lib@9.0.1)

  • Yes install from the cordova CLI. I would typically add it to the config.xml before running "prepare" to hydrate the project, but if the project has already been hydrated then "npm install" is fine.

    I believe that's the latest version is 9.0.1 so you should be good.

  • Yes install from the cordova CLI. I would typically add it to the config.xml before running "prepare" to hydrate the project, but if the project has already been hydrated then "npm install" is fine.

    I believe that's the latest version is 9.0.1 so you should be good.

    Thanks for that Tip it was easier to add it on confix.xml )

    ============================

    Im stuck with only one thing the "storyboard" I read the Article you posted many times but is not very clear if I have to do or add anything or it comes already everything prebuild from Cordova, as they mention this part:

    As such, a simple implementation of launch storyboards were incorporated into cordova-ios as of version 4.3.1. Every project now comes with a simple storyboard that contains an image that will scale to fill the screen (respecting aspect ratio). Assuming images with certain filenames are provided in config.xml, Cordova will then configure the app to use the launch storyboard automatically.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Hi Nepeo

    I tried all possible ways and always I get a Black Screen after the Cordova Splash, the splash screen shows really quick and it covers the whole screen as intended.

    I followed the first example they have there:

    (Simple launch storyboard (logo in the center, solid background color); view simulation)

    I tried all different combinations:

    First I tried only copying their "screen/ios" folder on my "www" folder

    and adding in config.xml >>>>

    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    

    also one of the test I tried adding the Pluging to my config.xml also:

    <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
    

    on different tests, I tried also

    copying their "screen/ios" & "icon/ios" folder on my "www" folder

    and copying their example

    <platform name="ios">
     <icon height="57" platform="ios" src="res/icon/ios/icon.png" width="57" />
     <icon height="114" platform="ios" src="res/icon/ios/icon@2x.png" width="114" />
     <icon height="40" platform="ios" src="res/icon/ios/icon-40.png" width="40" />
     <icon height="80" platform="ios" src="res/icon/ios/icon-40@2x.png" width="80" />
     <icon height="50" platform="ios" src="res/icon/ios/icon-50.png" width="50" />
     <icon height="100" platform="ios" src="res/icon/ios/icon-50@2x.png" width="100" />
     <icon height="60" platform="ios" src="res/icon/ios/icon-60.png" width="60" />
     <icon height="120" platform="ios" src="res/icon/ios/icon-60@2x.png" width="120" />
     <icon height="180" platform="ios" src="res/icon/ios/icon-60@3x.png" width="180" />
     <icon height="72" platform="ios" src="res/icon/ios/icon-72.png" width="72" />
     <icon height="144" platform="ios" src="res/icon/ios/icon-72@2x.png" width="144" />
     <icon height="76" platform="ios" src="res/icon/ios/icon-76.png" width="76" />
     <icon height="152" platform="ios" src="res/icon/ios/icon-76@2x.png" width="152" />
     <icon height="29" platform="ios" src="res/icon/ios/icon-small.png" width="29" />
     <icon height="58" platform="ios" src="res/icon/ios/icon-small@2x.png" width="58" />
     <icon height="87" platform="ios" src="res/icon/ios/icon-small@3x.png" width="87" />
     <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
     </platform>
     <engine name="ios" spec="latest" />
     <plugin name="cordova-plugin-splashscreen" spec="^4.0.3" />
    

    Basically I been trying yesterday whole day and the whole night and I tried all different combinations but always results in black screen.

    Here is one example:

    Im not sure what Im doing wrong, I think if we had an example to follow from construct will be much easier

  • In your config.xml the icon and splashscreen file paths should be relative to the cordova project root, not the platform specific project

    	<splash src="www/icons/default@2x~universal~anyany.png">
    
  • Hi Nepeo sorry for late replay but my phone updated automatically to ios 12.4 and I had to reinstall the new Xcode 10.3 and update the macos.

    In your config.xml the icon and splash screen file paths should be relative to the cordova project root, not the platform specific project

    Even when I enter the right Path still gives the Black Screen.

    I made a simple Demo Empty project with one sprite and no Events to show you.

    Looks to me that is in the right path and that I followed everything that you showed me, but I could be wrong as I don't use or mess with this config.xml etc...

    C2 File: https://www.dropbox.com/s/0qphvcmu9kxjfrw/iphonexs%20sreen%20test.zip?dl=0

    Some of the Xcode settings that I tested:

    Here is a video to show the result, is doing some weird scrolling when is at the black screen and I'm touching

    https://www.dropbox.com/s/syt0mp9qh3rzvwp/black%20screen.mov?dl=0

  • Hi Nepeo

    No luck with this I tried all different ways I could think off and also I tried all the tutorials that I found on the internet, all tutorials mostly are the same as you recommended, some added a few more lines but mostly all look the same. I think could be a bug on c2.

    Do you have any working example of an empty project made on c2? that could help me a lot to see what is problem

  • Do you know if it will work correctly for a Construct 2 project imported and build it with Construct 3?

    I don't want to convert it to c3 RunTime I would like to just use the Exporter if that will fix the screen Problems on all iPhones, as I don't wanna lose any more time on this its been too long trying to resolve this problem.

    This is the option I'm referring to:

    construct.net/en/tutorials/using-c3-to-build-c2-mobile-exports-22

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)