Safe area extension

sven · September 27, 2021, 8:40am

Hi all!

I hacked together a minimal library that will resize the UIView (with constraints) based on “safe area” on iOS. This should be a quick thing to add to a game/app, until you have added current GUI layouts.

The current state is very untested, so use at your own risk. (Also, I haven’t had time to create community page for it yet.)

Download and URL

The source can be found here: https://github.com/defold/extension-safearea
And the library can be added to your project with this URL: https://github.com/defold/extension-safearea/archive/master.zip

Examples

The red color indicates safe area (ie the game being rendered), the yellow is the “background” color outside the safe area.

Example portrait:

Example landscape:

AGulev · September 27, 2021, 8:39am

Important updates for the extension:

New method safearea.get_insets() that returns the amount of “unsafe” space against each edge of the screen, in pixels (thanks @dapetcu21 !)
safearea.get_insets()now works for Android as well

Updated doc is available here: https://github.com/defold/extension-safearea/blob/master/docs/index.md

AGulev · October 14, 2021, 6:58am

version 1.3 released:

Now get_insets() method returns status value

local insets, status = safearea.get_insets()

-- The amount of "unsafe" space against each edge of the screen, in pixels
print(insets.top, insets.right, insets.bottom, insets.left)

-- Status is one of the following values:
-- safearea.STATUS_OK - value is avaliable and valid, you may fully trust it.
-- safearea.STATUS_NOT_AVAILABLE - functionality isn't available on this platform or OS version. Values will be 0
-- safearea.STATUS_NOT_READY_YET - values aren't ready yet. Depends on platform and OS it may take a while (usually up to 200ms) to be ready, check later. Values will be 0

github.com

defold/extension-safearea/blob/master/docs/index.md

# SafeArea

Simple native extension library for Defold that will change the view/render of a game to fit into the safe area on iPhones and Android(API 28+) with notch.

## Installation
To use this library in your Defold project, add the following URL to your `game.project` dependencies:

[https://github.com/defold/extension-safearea/archive/master.zip](https://github.com/defold/extension-safearea/archive/master.zip)

We recommend using a link to a zip file of a [specific release](https://github.com/defold/extension-safearea/releases).

## Usage:

### Easy mode (no change to your project, iOS only)

Just add the library to your project. The library will automatically resize the view on app start.

You can configure the color used outside the view by setting the `game.project` setting `safearea.background_*` values, for example;
```
[safearea]

This file has been truncated. show original

Lex · February 10, 2022, 2:48pm

The value I get for insets.top is twice as big as the notch itself.
It feels like it’s not counting the the status bar (i’m using immersive mode).

If i divide the value by 2 I get the exact size of the notch, but I don’t know the reason behind this.

Is that a bug from the library or am I misusing it?

britzl · February 10, 2022, 3:16pm

Interesting. What is the size of your display in game project? And what is the size of your phone’s screen?

Lex · February 10, 2022, 3:19pm

Game project is 720x1280
currently testing with android device 1080x1920

britzl · February 10, 2022, 8:49pm

Please create a ticket in the repo and we’ll take a look!

Lex · February 11, 2022, 1:00pm

Is it possible to have a game Android where we display the game below the status bar?

I updated the android manifest with
android:theme="@android:style/Theme.NoTitleBar"

so the status bar is showing correctly.

My problem is the game starts drawing BEHIND the status bar. Is there anyway too avoid that? (it would probably fix the notch issue I’m having).

AGulev · February 11, 2022, 1:04pm

Take a look these options in Android section

Lex · February 11, 2022, 1:05pm

I checked the “Display Cutout” on/off but it doesn’t make any difference

Lex · February 11, 2022, 1:12pm

This is my UI in the editor:

(the top bottom has pivot as NORTH.

My manifest is android:theme="@android:style/Theme.NoTitleBar"

Wether I check the “Display Cutout” or not, I get:

as you can see the top element is behind the status bar