final solution for fullscreen on mobile browsers?

Phaser 3
1

Hi,
New to Phaser and really enjoying it so far but have this one issue that is difficult to get help with.

I gathered a lot of posts and examples for achieving fullscreen on a mobile device. Seems like its not working in phaser and actually I couldnt get it to work using plain JS either. I couldn’t find a working solution or even a straight answer.

I looked at competitor HTML5 games on mobile and I concluded that

  1. can’t force orientation
  2. can’t launch in a specific orientation
  3. they can achieve fullscreen but in landscape mode only and with a swipe up*

I tried with phaser and plain JS on mobile (in landscape)

  1. startFullscreen() does not work (listening to ‘pointerup’) - fires event ‘fullscreenunsupported’
  2. requestFullscreen() does not work (listening to ‘pointerup’ or ‘touchend’ via window.addEventListener)

*So I am wondering how those competitor html5 games do it because it IS possible.

Please if anyone can point me to a working example. I am not a lazy person Im enjoying learning Phaser but the inconsistencies with this particular issue is tiring me out.

Thanks for replies,
Jon

2

I think this is just a fake fullscreen using some CSS.

3

We are attempting this using PWA, still figuring out some issues with it

You can try our mobile app experience here It has only been tested on Android, we are in the process of trying to get the memory down for Safari on iPhone.

4

You can view the size of the window and rotate the camera based on this data, so that the game will always be in a horizontal view.

this.camera.setAngle(90);

To make the game full screen, this code works for me.

mySprite.setInteractive();
mySprite.on('pointerup', function () {
	if (this.scale.isFullscreen) {
		this.scale.stopFullscreen();
	}
	else {
		this.scale.startFullscreen();
	}
}, this);
1 Like
5

ooo thank you ! didn’t think of this

will implement