Fullscreen issues

Phaser 3
1

I’m making a web game with several scenes. I already wrote this game in Phaser 2 and I’m upgrading existing features before I make new ones. I’m currently stuck on my title screen, where I am trying to make the game fullscreen when I click a button in the top of the screen.

This is the error I’m getting (it also stops animations from working)
image

Here is my game.js code:

    var config = {
      type: Phaser.AUTO,
      scale: {
        mode:Phaser.Scale.FIT,
        parent: 'SerolGame',
        autoCenter: Phaser.Scale.CENTER_BOTH,
        width: 1024,
        height: 640,
      },
      backgroundColor: 0x000000,
      scene:[Boot, Title],
      pixelArt: true,
    };

    var game = new Phaser.Game(config);

This is my title screen code:

class Title extends Phaser.Scene {
	constructor() {
		super("gameTitle");
	}

	preload() {
		this.load.script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js');
	}

	create() {
		this.background = this.add.image(0,0,"titleScreen");
		this.background.setOrigin(0,0);
		//button to activate fullscreen
		this.fullscreenButton = this.add.image(980, 10, "fullscreen").setOrigin(0.5, 0).setScale(0.1).setInteractive();
		this.fullscreenButton.on('pointerup', function () {

            if (this.scale.isFullscreen)
            {                
                this.scale.stopFullscreen();
            }
            else
            {
                this.scale.startFullscreen();
            }

        }, this);
		//start button
		this.pressStart = this.add.sprite(config.width/2, 350, "start");
		this.pressStart.setScale(1.5);
		this.anims.create({
			key:"blink",
			frames: this.anims.generateFrameNumbers('start',{
				start: 0,
				end: 1
			}),
			frameRate: 2,
			repeat: -1
		});
		this.pressStart.setInteractive();
		
		//credits text
		
		
			//     self.creditsLabel.align = 'center';
			// 		//handle button click
			// 		self.creditsLabel.inputEnabled = true;
			// 		self.creditsLabel.events.onInputDown.add(
			// 			function(){
			// 				game.state.start('credits', true, false);
			// 				titlebgm.fadeOut(1000);
			// 				titlebgm.stop();
			// 			}, this);
		//start game when bg or 'press start' is clicked
		// this.input.once('pointerdown', function (event) {

        //     console.log('From Title to Instructions 1');

        //     this.scene.start('instructions1');

        // }, this);
	}

	update() {
		this.pressStart.anims.play('blink',true);
	}
}

Any help in fixing this or finding alternatives would be greatly appreciated :slight_smile:

2

I’ve looked at this alternative:

window['game']['canvas'][game.device.fullscreen.request]();

but it makes my entire laptop crash for some reason…
I’ll keep looking