How to get actual screen size on HEIGHT_CONTROLS_WIDTH?

Phaser 3
1

I’m making a game primarily targeted to mobile devices using scale mode HEIGHT_CONTROLS_WIDTH.
With fixed height, I can just make the game on 3:4 aspect ratio and make it centered so it will automatically crop the sides for tall devices.

I’m following this example.

However, now I have a problem: I can’t get the actual visible screen size.
I have UI buttons located at the top left and top right of the game.
But with the game cropped for tall devices, they’re not visible on those devices.
I need to be able to get the visible screen size to anchor them on the correct position.

I have tried this.cameras.main.width, window.innerWidth, window.outerWidth, and many more but nothing works.
Is there any way for me to get the actual visible screen size after getting cropped?

2

rexrainbow has made a very good plugin to put objects based on the visible window: https://rexrainbow.github.io/phaser3-rex-notes/docs/site/anchor/

3

Exactly what I’m looking for.
Thanks!

4

Sounds like this.scale.parentSize.width, this.scale.parentSize.height.

5

@samme I tried them but didn’t work. They returned the actual canvas size instead of the visible size.
Because the canvas size is actually the same, they’re just cropped on the sides and the overflow is hidden using css.
Using rexrainbow’s plugin is the perfect solution for me.

6

Here is the source code of getting view-port, used in anchor plugin.

2 Likes