2

My game is running fullscreen on mobile devices but I need to keep some top safe space to avoid notch space and statusbar.

Found this scale examples but it doesn't handle notch/statusbar spaces.

scale: {
  mode: Phaser.Scale.FIT,
  autoCenter: Phaser.Scale.CENTER_BOTH
},

Is there any way to do this?

In IONIC it has CSS variable called safe-area-inset-top, but I don't know how to bring it's value to Phaser.

anderlaini
  • 1,593
  • 2
  • 24
  • 39

1 Answers1

1

I have no phone with a notch to test this, I assume you could set the styles environment variables on a element like body

(I added a default padding of 10px you could set it to any other value)

.body-class {
    padding-top: max(env(safe-area-inset-top), 10px);
    padding-bottom: max(env(safe-area-inset-bottom), 10px);
    padding-left: max(env(safe-area-inset-left), 10px);
    padding-right: max(env(safe-area-inset-right), 10px);
}

And than you could get the dimensions, with getComputedStyle (link to the documentation):

...
let widthOffSet = getComputedStyle(document.body).getPropertyValue('width'); 
let heighthOffSet = getComputedStyle(document.body).getPropertyValue('height'); 
...

new Phaser.Game({ width, height, ... });
winner_joiner
  • 12,173
  • 4
  • 36
  • 61
  • worked like a charm and I made an easier solution without need of a custom div: `parseInt(window.getComputedStyle(document.body).getPropertyValue('--ion-safe-area-top').replace('px', '')) || 0;` – anderlaini Jul 14 '23 at 12:58