The purpose
I want to implement a fullscreen display in Phaser3.
It’s not about simply maximizing it within the browser’s view, but rather true fullscreen mode, similar to watching a video, where the browser’s UI is hidden and you can exit by pressing the ESC key.
Implementation
Full screen
From the child class of the Scene, you only need to call the following:
this.scale.startFullscreen();Cancel Full screen
From the child class of the Scene, you only need to call the following:
this.scale.stopFullscreen();Regarding scene transitions
I was worried that the full-screen state wouldn’t be maintained when switching scenes, since the startFullscreen/stopFullscreen functions are within the scene itself. However, that’s not an issue; the full-screen state is carried over even after moving to a new scene.
Troubleshooting when full screen isn’t working correctly.
API can only be initiated by a user gesture.
The following error may prevent the app from going full screen.
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.This is caused by requestFullscreen being called without user interaction. Please ensure it is called in response to an action like a button click. (Full screen cannot be automatically triggered on page load.)
The game goes full screen, but it doesn’t fill the entire monitor
When displaying in full screen, the game screen sometimes doesn’t fit the monitor.
This is because Phaser 3 is not the one maximizing the Canvas.
Please review the container specified in main.js and its parent classes. (If necessary, rewrite the class/style for when it’s in FullScreen mode.) In my case, it was the height style of the parent div of the container that was causing the issue.
Result
I was able to get fullscreen display working in Phaser 3.
Reference
comment