How do I support notch on phone?

Post reply
0 favourites
From the Asset Store
Multi Language Support for C3 Games
$5.95 USD
Comprehensive localization solution for Construct 3 projects, no addons required!
dop2000's avatar
dop2000

  • construct-mobile-notchfix (which uses the full screen area) is only applied if you tick "Hide status bar", since it is assuming you want to use the full screen display area. You can untick that to leave the default notch handling behavior (shrinking to avoid it) instead.

    If you do use the full display area, the Platform Info object safe area expressions tell you where to move anything important so it's not obscured by the notch.

    Ashley

    Are there any examples on how to use theses expressions to avoid the notch?

  • construct-mobile-notchfix (which uses the full screen area) is only applied if you tick "Hide status bar", since it is assuming you want to use the full screen display area. You can untick that to leave the default notch handling behavior (shrinking to avoid it) instead.

    Ashley But if we untick "Hide status bar", the status bar will be visible on screens without the notch. This is not an option for many games.

    Is it possible to add a project/export setting which will allow us to choose - either to use the full screen (with hidden status bar), or the safe area only? It will be much easier than checking Platform Info expressions and programmatically re-arranging everything on the screen..

    By the way, I tested again just now, and SafeAreaInset* expressions always return 0 on my Android phone with the notch at the top.

    Also, the "Viewport fit" setting seems to do nothing. I tested both Auto and Cover values and didn't notice any difference.

    It feels like something is definitely broken with the notch detection.

  • I guess it makes more sense to apply the notchfix plugin when you set the viewport fit to "Cover", instead of based on the status bar. I'll change that for the next release.

    The safe area is just whatever the browser reports it to be, Construct doesn't have much to do with it, so I don't know why that wouldn't be correct. My own tests did show it working.

  • I guess it makes more sense to apply the notchfix plugin when you set the viewport fit to "Cover", instead of based on the status bar. I'll change that for the next release.

    Yes, this will be a logical solution, thanks!

  • Unfortunately, the trick didn't work on iOS as it adds black marks on both sides like if we use letterbox Scale but much smaller Black bars.

    Also the "construct-mobile-notchfix" is not included on the config.json and config.xml when you export to iOS.

    Here are the results:

    Auto & ScaleOuter & Hide Statur Bar

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

    Cover & ScaleOuter & Hide Statur Bar

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

    Letterbox Scale & Auto

  • If you want the Apps to look good at their native full-screen size the best option is "Cover & ScaleOuter & Hide Statur Bar" but Unfortunately the problem still persists as we don't have the way to detect where the notch is located at the "Right or Left" side because the phone can be Rotated, so you have to add two black bars one on each side if you want to cover the notch area but this will be limiting the screen size view because we can't detect the Noch Position.

    If we had the Notch Position will be much straight forward to adjust the UI even if they rotate their Phones

    So at moments is not possible to do this:

    or

    This

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

    If you need to something like this you need to count as the phone has two notches and add two black bars one on each side it's very limited at the moments.

    Many apps they adjust their apps UI as I show you above very easy, will be nice if we could that too to make better UI design.

  • Here is an example of one App Covering the Notch counting when it's rotated also:

    Notch at the Left;

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

    Notch at the Right;

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

    But covers just the Notch area so it doesn't lose more screen size from the other side

  • It seems that SafeAreaInsetLeft/Top/Right/Bottom functions could solve those problems but they don't work, they show 0 in every situation...

    And don't now why those functions work in Cordova app (for Android with cordova-plugin-android-notch), but don't work in Construct which uses Cordova?!

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads

  • Unfortunately, the trick didn't work on iOS as it adds black marks on both sides like if we use letterbox Scale but much smaller Black bars.

    Also the "construct-mobile-notchfix" is not included on the config.json and config.xml when you export to iOS.

    Here are the results:

    Auto & ScaleOuter & Hide Statur Bar

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

    Cover & ScaleOuter & Hide Statur Bar

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

    Letterbox Scale & Auto

    Thanks for posting the results.

  • LaurenceBedford Np problem mate

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

    ciko

    It seems that SafeAreaInsetLeft/Top/Right/Bottom functions could solve those problems but they don't work, they show 0 in every situation...

    And don't now why those functions work in Cordova app (for Android with cordova-plugin-android-notch), but don't work in Construct which uses Cordova?!

    So it's possible then? I haven't seen anyone doing this thing yet using Construct

  • tarek2

    Same I haven't either - I have posted again asking how to use them:

    construct.net/en/forum/construct-3/how-do-i-8/safe-area-expressions-support-151296

  • LaurenceBedford Np problem mate

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

    ciko

    > It seems that SafeAreaInsetLeft/Top/Right/Bottom functions could solve those problems but they don't work, they show 0 in every situation...

    >

    > And don't now why those functions work in Cordova app (for Android with cordova-plugin-android-notch), but don't work in Construct which uses Cordova?!

    So it's possible then? I haven't seen anyone doing this thing yet using Construct

    I think it is, have searched some forums and people use them on Cordova app. Me neither but it's very important feature for mobile game and need to be fixed ASAP by my opinion.

  • Sorry to bring this back from the grave, but does anyone have the PlatformInfo.SafeAreaInsetTop/Bottom/Right/Left expressions working? They just return 0 for me no matter what I do :/

    Edit: Using Cordova export to Android on a Pixel 3XL (which has a notch).

    Viewport Fit: Cover

    Fullscreen Mode: Scale outer

    Hide Status Bar: True

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