[SOLVED] Phaser full screen with more than one element?

Phaser 3
1

I’ve used the native Phaser ScaleManager to get a full screen game, but the native Phaser ScaleManager only full screen the game canvas element, I need more than one, because I am using others HTML elements to compose the game UI.
I’ve try to make full screen by myself, but for some reason Phaser is blocking this, here the code:

var toggleFullScreen = function () {

    var elem = document.querySelector("#game");

    elem.requestFullscreen = elem.requestFullscreen || elem.mozRequestFullscreen || elem.msRequestFullscreen || elem.webkitRequestFullscreen;

    if (!document.fullscreenElement) {
        elem.requestFullscreen()
            .then({})
            .catch(err => {
                console.log(`Error: ${err.message} (${err.name})`);
            });
    } else {
        document.exitFullscreen();
    };
};

When I try to use my own Phaser is going back and forth (bouncing) the full screen (backing to normal view), I think the Phaser is blocking it for some reason, there’s no other solution? I tryed to change the fullscreenOptions in Phaser toggleFullscreen API, but there’s no complete description for the property.

1 Like
2

WOOOW, solution! I called the method this.scale.stopListeners(); before the my own full screen method, like this:

this.fullScreen.setInteractive().addInteraction("pointerdown", () => {
    this.scale.stopListeners();
    Elements.toggleFullScreen();
});