Phaser3 仅在全屏时具有不同的缩放行为

Question

I'm using phaser3 and I'd like to achieve the following behaviour:

• When the game is not in fullscreen, the canvas is NOT resized and is centered horizontally and plays along nicely with the other html elements on the page.
• When the game is fullscreen, the canvas should be scaled to best fit the current screen resolution. It should also be centered and any black areas should be at the edges.

I can achieve both of these - but not at the same time.

I can center the canvas using either html/css tricks or with Phaser.Scale.CENTER_HORIZONTALLY (or Phaser.Scale.CENTER_BOTH). But if I just do this, then it's not scaled in fullscreen.

If I use Phaser.Scale.FIT, then it works properly in fullscreen. But now it also tries to scale when not in fullscreen and it messes up the rest of the html page a little bit.

So, how do I achieve Phaser.Scale.CENTER_BOTH and Phaser.Scale.FIT behaviour only in fullsceen, and Phaser.Scale.CENTER_HORIZONTALLY when not in fullscreen?

Is there some combination of phaser3 scaling and/or html divs+css I can use here?

This is the code I currently use (not using any css style options atm):

<div id="gamediv" class="gamedivclass">
  <script src="game.js"></script>
</div>

And in the js file I set up some kind of scale options. Eg like this:

var config = {
  // ...
  scale: {
    mode: Phaser.Scale.FIT,
    autocenter: Phaser.Scale.CENTER_BOTH,
    // ...
  }

// ...

var game = new Phaser.Game(config);

Answer 1

Phaser has two events that can come in handy in this situation:

Phaser.Scale.Events.ENTER_FULLSCREEN;
Phaser.Scale.Events.LEAVE_FULLSCREEN;

You can listen to those events and "do stuff" , please adapt your code for your real needs, of course.

const game = new Phaser.Game(config);

game.scale.on(Phaser.Scale.Events.LEAVE_FULLSCREEN, () => {
  game.scale.scaleMode = Phaser.Scale.NONE;
  game.scale.autoCenter = Phaser.Scale.CENTER_HORIZONTALLY;
});

game.scale.on(Phaser.Scale.Events.ENTER_FULLSCREEN, () => {
  game.scale.scaleMode = Phaser.Scale.FIT;
  game.scale.autoCenter = Phaser.Scale.CENTER_BOTH;
});

Some references:

• Phaser.Scale.Events (Phaser API Doc)
• Scale manager (Phase 3 Rex Notes)