Safe Area Aware Example On iOS and Android

[Joshua-Beatty]

I've been having a lot of trouble getting safe area insets in a single way across different platforms and then using those insets within Excalibur, so I created a simple capacitor plugin to just call the native code in order to retrieve the insets. I am not fully confident in the inner workings of all of capacitor at the moment so use this at your own risk, or maybe just take a look at the plugin code for some ideas.

Here is a simple demo I have put together using capacitor and Excalibur: (Repository here)

It is just a simple demo where you can click to add pink squares, and there is a grey bar off to the left that will always stay within the intractable portion of the screen.

iOS:

Android:

Web:

Currently the grey bars position is just statically calculated based off the assumption that the center of the screen is also the center of the world, so for moving cameras and other things along those lines the code would probably need to be adjusted.

Hopefully this helps some people or maybe can share some ideas around the community about dealing with safe areas.

[eonarheim]

@Joshua-Beatty thanks for sharing!

This is definitely something I'll be using in my next mobile game!

Do you mind if I shout this plugin out in a video soon(ish)?

[Joshua-Beatty]

Not at all, Feel Free!