[SOLVED] Fullscreen is not really fullscreen?

Phaser 3
1

Hi everyone!

I made a title screen where a user can click an icon which will toggle making the game fullscreen.
When I click it, the game window becomes fullscreen, but the canvas does not scale up.

image
image.png1920Ɨ1080 54.5 KB

I am using the following code in my create function:

this.fullscreenButton.on('pointerdown', function () {

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

I also get this error:
image

Any ideas on how to fix this, or alternative implementations would be very much appreciated :slight_smile:

2 Likes
2

What scale mode is used here?

3

Iā€™ve got mode:Phaser.Scale.FIT in my game config.

4

Does this scale mode work properly when you are not in FullScreen?

5

As far as I can see, everything behaves as expected when not in fullscreen.
I found this thread on Phaserā€™s GitHub, so Iā€™m wondering if a bug might be to blame here.

Anyone know if this can be avoided with a different fullscreen implementation? Also how often are new releases of Phaser made?

6

You can see releases dates on https://github.com/photonstorm/phaser/releases
as well as on https://www.npmjs.com/package/phaser

1 Like
7

Is there an implementation that avoids this bug? Iā€™ve posted about this issue before, but it seems that the implementation that uses window['game']['canvas'][game.device.fullscreen.request](); crashes more than just my browser, so I am really stumped for solutions

8

If you go to the link for bug report you provided above, youā€™ll find another link:

photonstorm closed this in 67b28d

I think you can just make changes locally, so you donā€™t have to wait until another release.

1 Like
9

Iā€™ve changed phaser.js locally to the lines in the commit:

if (fullscreen.keyboard)
            {
                fsTarget[fullscreen.request](Element.ALLOW_KEYBOARD_INPUT)
                .then(this.fullscreenSuccessHandler.bind(this))
                .catch(this.fullscreenErrorHandler.bind(this));
            }
            else
            {
                fsTarget[fullscreen.request](fullscreenOptions)
                    .then(this.fullscreenSuccessHandler.bind(this))
                    .catch(this.fullscreenErrorHandler.bind(this));
            }

but the issue still persistsā€¦

10

After installing phaser 3.18.1 and writing code you provided at the beginning - I got an error.
The same error as I got when tried code provided by the link

Issue: [ScaleManager] TypeError: thisā€¦

But when changes were applied binding this, errors gone both for you code and in the ā€œIssue: [Scaleā€¦ā€

I dunno what to do in this case. I have everything run perfectly.

1 Like
11

I checked again whether I applied the fix to the right lines in that section of code and I did. Tested it again and I didnā€™t get the errorā€¦ but the game is still not scaling to fill the whole screen and stays bound within its dimensions
This is my entire game.js file with the configs. Do you reckon there are other issues there Iā€™m not seeing?

// game.js
var gameSettings = {
  playerXSpeed: 400,
  playerYSpeed: 1000
}

var config = {
  type: Phaser.AUTO,
  mode:Phaser.Scale.FIT,
  width: 1024,
  height: 640,
  backgroundColor: 0x000000,
  pixelArt: true,
  scene:[
    Boot, 
    Title, 
    Credits,
    Instructions1,
    Level1,
    Level1Complete,
    Instructions2,
    Level2,
    Level2Complete,
    GameOver
  ],
  physics: {
    default: 'arcade',
    arcade: {
        gravity: {y: 0},
        debug: true
    }
  },
  input: {
    gamepad: true
  }

};

var game = new Phaser.Game(config);

I also found that I had 2 <body> tags in my index.html file, but removing the extra one didnā€™t help the issue.
Iā€™ve now tested this on other browsers and the issue persists across all of the ones that support Phaser 3 :cold_sweat:

12

Try to do this:

scale: {
  mode: Phaser.Scale.FIT,
  parent: "app",
  width: 1024,
  height: 640
},

and add div in your html with id="app".

1 Like
13

Iā€™ve got this div in my html file:

<body>
<div id="SerolGame"></div>
</body>

Iā€™ve added changes to my config file so it looks like this:

// game.js
var gameSettings = {
  playerXSpeed: 400,
  playerYSpeed: 1000
}

var config = {
  type: Phaser.AUTO,
  scale: {
mode: Phaser.Scale.FIT,
parent: "SerolGame",
width: 1024,
height: 640
  },
  backgroundColor: 0x000000,
  pixelArt: true,
  scene:[
Boot, 
Title, 
Credits,
Instructions1,
Level1,
Level1Complete,
Instructions2,
Level2,
Level2Complete,
GameOver
  ],
  physics: {
default: 'arcade',
arcade: {
    gravity: {y: 0},
    debug: true
}
  },
  input: {
gamepad: true
  }

};

var game = new Phaser.Game(config);

This helped somewhat. The canvas on startup appears bigger and when I click the fullscreen button I get a fullscreen image.Itā€™s not in the middle thoughā€¦

image
image1920Ɨ1080 54.6 KB

Is there an align setup Iā€™m missing somewhere?

This also broke the menu system I built since posting this issueā€¦
I used yannickā€™s answer in the following thread (translated to js from ts):

14

You can simply add autoCenter: Phaser.Scale.CENTER_BOTH to your scale config object.
You can always look up examples: http://labs.phaser.io

1 Like
15

Got the centering fixed with
autoCenter: Phaser.Scale.CENTER_BOTH
in the scale manager.

The menu system is still broken thoughā€¦ Iā€™ll keep trying

16

Ah! a lot of my object alignment uses config.height and config.width, so I just changed them all to config.scale.height and config.scale.width respectively.

Thank you very much @dude78 for your help :star_struck:

17

You are welcome, @ThePandaJam :slight_smile:.