如何使用 onclick 事件实现 go 全屏 - Phaser3

Question

Hi would like to know if we can go "real" fullscreen with a click event on a Phaser3 game. I tried so many things and nothing work. I have an object and i would like to click on it to put the game on a fullscreen mode. Hope someone had this problem before and can help me.

Config of game:

 const config = { parent: "game", width: 750, height: 500, type: Phaser.AUTO, zoom: 1, scene: [Loading, Menu, InGame, GameOver, Controls, Win], backgroundColor: "#ffffff", audio: { disableWebAudio: true, noAudio: false }, physics: { default: "arcade", arcade: { gravity: { y: 1500, x: 0 }, debug: false }, }, }

window.onload = function() {
    var game = new Phaser.Game(config);
}

Object click event on scenes:

 this.fullScreenButton = this.add.image(730, 20, "fullScreen"); this.fullScreenButton.setInteractive(); this.fullScreenButton.on('pointerdown', function() { this.scene.scale.setGameSize(window.innerWidth, window.innerHeight); this.scale.startFullscreen(); });

Answer 1

let fullscreen = this.add.image(16,16,'fullscreen').setInteractive();

fullscreen.on('pointerup',() => { 
  window['game']['canvas'][game.device.fullscreen.request]();
})

Answer 2

I had the same issue and don't know why but pointerdown has some problems with full screen mode. If you just switch to pointerup the canvas will fit the whole screen.

Hope this can be helpful. Ab