Can I replace the black bars of letterbox scale by white bars on iPhone X?

Post reply
0 favourites
From the Asset Store
Adjusting the game screen for different resolutions
$1.20 USD
60% off
Adjusting the game screen for different resolutions (Letterbox scale)
q3olegka's avatar
q3olegka

  • Sorry, looks like the code I posted is for selector ids div, panels etc.

    Just a though, have you tried a png?

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Hi newt ,

    No, I didn't try using a png yet. Could you tell me how I should proceed?

    That's a line to add in the index.html body?

    Thanks a lot in advance! :)

  • Just replace background with:

    background-image: url("block.png");

    You would need to place a black no border png in the folder.

  • Rable

    , could you please tell me where I could find that config.xml? I found a cordova folder on my C:/ but it contained a config.js, no config.xml. And the config.js didn't contain something similar to preference name.

    If I export to cordova with C2, in the exported folder I have another folder "www" and two files config.json and config.xml

    For more information: cordova.apache.org/docs/en/latest/config_ref/index.html

    at the end there are examples.

    Do you confirm there are 8 "f" in the line ? (I thought it was 6 for hexadecimal, but I don't know much about programming so if you tell me it's 8, I'll put 8 of them :) )

    There are 8 f because it's for R G B and A (Alpha Channel)

  • To keep you updated, the .png file as an image background that newt proposed didn't work. I've tested it on PC first and it worked like a charm, but as for the other methods, the black bars of the iOS version are still there when exported into Xcode.

    I sent a newer version with the XML modification to my publisher, I'll try that tomorrow, but I start to be dubious about the feasibility of this. It seems like Apple is blocking the color of the background to black. Maybe this has to be set in Xcode directly?

    I looked for it already but didn't find anything...

    Thanks for your help so far!

  • After modifying everything possible in the index.html file, and modifying the config.xml file as suggested by Asmodean , it looks like nothing works. The background in the Simulator stays black whatever I tried.

    I found a video which may help:

    Subscribe to Construct videos now

    But the guy is using Swift.

    However, I checked the list of files I have in Xcode and looks like I have files named MainViewController

    Maybe the white background should be specified in Xcode itself.

    Do you have an idea of how to do it Ashley ? (having white letterbox scale bars instead of black one when a project is exported to iOS via Xcode)

    It seems like anything I try with the index.html or config.xml has no effect...

    Thanks in advance for any further idea.

  • use scale outer

    change background and color to white on index.html

    thats all

    remove that background color on config.xml

  • Maybe try a different format, and make sure its the proper encoding. Gif having the highest chance to work.

  • For the record, exporting the game to C3 solved the issue immediately, but I have other problems arrising, so I'd like to come back to C2.

    At this point I think it's a problem with View Controller in Xcode and that no C2 or CSS based solutions will work.

    Someone know something about it?

  • Update: I filed a bug for this and here's Ashley's answer:

    "All Construct 3's background color setting does is apply this CSS style: 

    html, body {
 background: #000; /* based on "background color" project property */
}

    Construct 2 does not set that, and your JS code setting it is invalid because it relies on jQuery, which isn't included in C3. So I would assume you just need to find a valid way to apply that CSS style when exporting from C2. You could edit the CSS in the exported files directly, or update your executed JS code to not rely on jQuery."

    The code he's talking about is the one that has been proposed here:

    Sounds like this is using jQuery, which I have no idea what it is... ^^'

    Any idea how I can reformulate this without jQuery ? Or another way to have a white background ?

    What sounds weird to me is that I already edited the CSS in the exported file (index.html) in different ways and had no luck with that.

    Thanks for any further help!

  • The $ is jQuery. The equivalent code without using jQuery is:

    document.querySelector("html").style.backgroundColor = "#fff"

    document.querySelector("body").style.backgroundColor = "#fff"

  • Thanks a lot, Ashley!

    Trying this solution right now!

  • I tried your solution Ashley , but it doesn't seem to work.

    Here is what I added into my code:

    I also manually changed the index.html after export to specify that the background should be white.

    And here's the result in the simulator in Xcode

    As a point of comparison, here is the desired result, the one I'm getting when exporting the Xcode project directly from C3:

    As you can see, not only the background on the side is black instead of white, but on the C2 version the height of the layout is smaller. In the C3 version, the black horizontal bar (home bar) is inside the layout, while in the C2 version, it is below the layout. Maybe that's a hint about what's wrong?

    Thanks again for your help and if I'm doing something wrong, it would be nice to tell me what I should change to make it work in C2 like in the version exported from C3.

  • I've no idea what could be wrong, that's exactly what the C3 setting does which you say works. Maybe export both and compare the two.

  • Hi everyone,

    This problem rises again, and a publisher would like me to get rid of these black bars so that the game is optimized for iPhone X.

    I tried again yesterday, and the black bars are still there.

    C2 preview:

    Simulator result in Xcode:

    So I had to sent them my Xcode project and they've put one of their tech-guy on the problem and here is their feedback:

    "According to our technical colleague, the LaunchScreen fucntion (or can be called launch image) seems can solve the black bar issue."

    "Zheng, our technical guy, said he found the launch images of all devices are included in the Xcode project, so he assumed the problem comes from Cordova project. He foud a pluin in GitHub, please check if this is helpful: github.com/innowatio/cordova-ios-fullscreen "

    I have no idea how I'm supposed to use this github plugin, and I am not sure it can be useful to a Construct 2 user.

    Maybe it can help Scirra fix this problem?

    Any advice on this?

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)