gdjs.RuntimeGamePixiRenderer.prototype.isFullScreen does not detect users pressing escape

[jonasfj]

gdjs.RuntimeGamePixiRenderer.prototype.isFullScreen does not detect that users press escape and leave fullscreen mode.

This is easy to see from source for RuntimeGamePixiRenderer.

To Reproduce

• Create an object that is show/hide depending on "The game is in fullscreen" condition.
• Enter fullscreen mode
• Exit fullscreen mode using escape (or back button on Android)
• Now the "The game is in fullscreen" condition is still true, while the user is not in fullscreen anymore.

Classic application for this is a fullscreen button, which is only visible when not in fullscreen mode

Solution

• Listen for the fullscreenchange event, which will work after PR #2161
• Listen for events webkitfullscreenchange, mozfullscreenchange
• In the event handler use document.fullscreenElement != null to test if we're fullscreen mode and do:

// In RuntimeGamePixiRenderer do:
this._isFullscreen = false;
this._resizeCanvas();
this._notifySceneForResize = true;

Other details

• Chrome 87.0.4280.88 / Linux / GDevelop 5.0.0-beta104

[jonasfj]

For anyone looking to work around this issue the following code-snippet should do:

// This ensures that we restore state when user exits fullscreen using escape
if (!window._gdjsFullScreenPatch) {
    window._gdjsFullScreenPatch = true;
    const game = runtimeScene.getGame();
    document.addEventListener('fullscreenchange', () => {
        game.getRenderer().setFullScreen(document.fullscreenElement != null);
    });
    document.addEventListener('webkitfullscreenchange', () => {
        game.getRenderer().setFullScreen(document.fullscreenElement != null);
    });
    document.addEventListener('mozfullscreenchange', () => {
        game.getRenderer().setFullScreen(document.fullscreenElement != null);
    });
}

Running it once in the beginning of an initial scene should be sufficient.

(this is not something I would suggest as an official patch, just a quick hack to workaround the issue)

[necaTecnico]

@Bouh @jonasfj Hi, I am a university student and would like to solve this bug for a university project. I have been looking at the code and trying to do all these suggestions but nothing really worked. Anyone got any recommendations or help please? I didn't really understand the proposed solution as well as this workaround, as I didn't get where in the code to place these snippets. Additionally I have also looked at this issue https://github.com/4ian/GDevelop/issues/6477 which seems to be the same problem but didn't get anywhere.

[necaTecnico]

Hey @jonasfj @Bouh, I have opened a pull request related to this issue. It's currently awaiting review and approval. Please take a look when possible, so we can discuss further. Thank you!

[necaTecnico]

Hi @Bouh, @jonasfj, @4ian

I hope you are doing well!

I opened this as a pull request as part of a university project I am working on and I was working towards addressing issues #2162 and #6477 related to the fullscreen detection issues in browsers. I have followed the suggestions that were made in the issue discussions, which included:

• Listening for fullscreenchange, webkitfullscreenchange, or mozfullscreenchange events
• Using document.fullscreenElement to get the fullscreen state
• Updating the internal _isFullscreen flag and triggering the canvas resize logic on RuntimeGamePixiRenderer.

Besides implementing the above, I created a test suite in newIDE/app/src/Utils/runtimegame-pixi-renderer.spec.js that checks the behavior in the different browser scenarios. All tests are passing, including one intentionally failing test to check test coverage, but the issue remains in real browser testing (for example, exiting fullscreen with ESC or browser UI buttons not updating the state correctly).

The key diferences, in additional functionalities are:

• The addition of event listeners inside RuntimeGamePixiRenderer for all fullscreen change events
• Setting _isFullscreen based off of document.fullscreenElement value
• Forcing a canvas resize and notifying Scenes of the change (_resizeCanvas() and _notifySceneForResize)

Despite these seeming like best practice changes, I am still having issues with getting fullscreen state changes updating properly.

Best regards, @necaTecnico