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

Question

我正在使用 Phaser3，我想实现以下行为：

• 当游戏未处于全屏模式时，画布不会调整大小并水平居中并与页面上的其他 html 元素很好地配合。
• 当游戏全屏时，画布应缩放以最适合当前屏幕分辨率。它也应该居中，任何黑色区域都应该在边缘。

我可以同时实现这两个目标。

我可以使用 html/css 技巧或 Phaser.Scale.CENTER_HORIZONTALLY（或 Phaser.Scale.CENTER_BOTH）使画布居中。但如果我只是这样做，那么它就不会全屏缩放。

如果我使用 Phaser.Scale.FIT，那么它可以在全屏模式下正常工作。但是现在它也尝试在不全屏时进行缩放，并且会稍微弄乱 html 页面的其余部分。

那么，如何仅在全屏模式下实现 Phaser.Scale.CENTER_BOTH 和 Phaser.Scale.FIT 行为，以及在非全屏模式下实现 Phaser.Scale.CENTER_HORIZONTALLY 行为？

我可以在这里使用 Phaser3 缩放和/或 html divs+css 的某种组合吗？

这是我目前使用的代码（不使用任何 css 样式选项 atm）：

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

在 js 文件中，我设置了一些比例选项。例如。像这样：

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

// ...

var game = new Phaser.Game(config);

Answer 1

Phaser 有两个事件可以在这种情况下派上用场：

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

您可以收听这些事件并“做一些事情”，当然，请根据您的实际需求调整您的代码。

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;
});

一些参考资料：

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