Safe area of mobile device (status bar and nav bar)

0 favourites
  • 4 posts
From the Asset Store
A futuristic device, can be used as radarscreen, optionscreen, infodisplay, research device, ...
  • Hello.

    Preface: so far I’ve only tried it on Android, but the problem is clearly common.

    For export to Android there is an option "Hide status bars", and it works great, but the front camera hides the header of all pages in my application

    All I found on the Internet were questions from many years ago with scary and complex solutions. Either few people are trying to export C3 to phones, or I'm a fool). The simplest solution is not to set the "Hide status bars" option, but in this case I am not happy with the fact that there is a nav bar at the bottom.

    In addition, I realized that PlatformInfo has the ability to find out the positions of the safe area. And on my Android SafeAreaInsetTop even gives the number 36, even with the "Hide status bars" option active.

    But two problems arise:

    1) how can I now dynamically (it may be different on different phones, but not at all on a PC) lower my entire layout and at the same time compress the canvas, taking into account the cutting off at the top? And at best, there’s some way to take into account the cutouts on other sides - but that’s not even in my head anymore

    2) My game has pixel graphics. Size settings: 120 x 240. And I generally don’t understand what I should do with this number 36.

    It's stupid, but I tried to change the size and position of the canvas using CSS, which ultimately worked very crookedly)

    Also my settings:

    Viewport fit: Cover/Auto

    Fullscreen mode: Scale out

    Orientations: Portrait

    Why can’t I immediately display the “safe area only” option when exporting? PlatformInfo is the official plugin from c3 and you can do what you need yourself

    This is clearly a problem. And it seems like it's been going on for a long time. This is critical for mobile applications. I'm waiting for a decision. Thank you

    PS: Google translate

  • It's a nasty feature of androit devices great segmentation. As a developer you have to adjust to all these resolutions, cutouts and cameras. Chadori has a pretty good plugin for safe zone.

    But I just use the playfield scaling and UI positioning for all devices.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Hi Magtir, how are you?

    I particularly like this old link:

    construct.net/en/tutorials/supporting-multiple-screen-77

    As in programming in general, there are countless solutions to the same problem. Some more elegant, others uglier.

    Knowing your own problem is the beginning of finding a solution.

    For example, in my game, I have no parallax and the screen doesn't move. This made it easy for me to have a simple setup and be responsive across any device dimension. With the option "Hide status bars" enable.

    My solution was the following:

    I made the layout with 1800x1000 with the game in the center at 1280x720. Fullscreen mode: Scale outer. "Orientations": Landscape. This way it will be responsive to multiple screens.

    See the image:

    The black rectangle does not appear at run time, it is just to help me position the objects in the layout.

    Then I just put this script at startup:

    As the layout is 1800x1000, leaving it centered at 900x500 will leave the screen in the middle.

    Use the browser's toggle device toolbar to help you see what the game will look like across multiple screens.

    youtube.com/watch

  • As a result, like many others, I wound up my crutches (I don't know how to say it in English) and lowered the content so that it did not go under the front camera.

    I have a lot of layout on all the pages and it's complicated. I did it through my custom anchors, lowered the parent elements through js, and all the others followed them.

    It seems to have worked, but first of all: this method does not take into account all sides. Secondly: This is clearly not what I paid the money for.

    Thanks to everyone who tried to help.

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