如何让 Phaser 游戏自动填充窗口？答案

【问题标题】：How can I make a Phaser game automatically fill the window?如何让 Phaser 游戏自动填充窗口？
【发布时间】：2017-05-15 04:11:16
【问题描述】：

如何让 Phaser 游戏自动填充浏览器窗口？（理想情况下，如果窗口大小改变，自动重新填充。）我知道有一个ScaleManager class，但文档不清楚如何使用它。我也找到了other instructions，但他们没有指出在哪里添加他们建议的代码，并且在创建 Game 类后立即运行它似乎没有任何作用。

我目前正在使用in this tutorial 找到的基本代码，但我愿意完全改变它。

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

结果非常简单，您只需要在预加载或创建函数中运行此代码（而不是在创建游戏实例后立即运行，就像我一直在尝试的那样）。

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
//this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.setScreenSize( true );

请注意，如果您让游戏全屏显示，将 this.scale.pageAlignHorizontally 设置为 true 实际上会打乱水平对齐方式。相反，您可以使用 css 将画布居中：

canvas { margin: 0 auto; }

【讨论】：

this.scale.setScreenSize( true ); 在 Phaser 新版本中不起作用。那应该用什么呢？
@ShohanurRahaman 我不知道对不起，你应该为新版本提出一个新问题。

【解决方案2】：

您可以覆盖 ScaleManager 的 setShowAll 方法
默认情况下，此函数有一个 if 会打开“扩展”，
expand 是一个参数，如果您进入全屏模式，该参数将设置为 true。
但是由于我们总是想“扩展”，所以我只是删除了 if。

module.exports = function () {

  Phaser.ScaleManager.prototype.setShowAll = function () {
    let bounds = this.getParentBounds(this._tempBounds);
    let width = bounds.width;
    let height = bounds.height;
    let multiplier = Math.max((height / this.game.height), (width / this.game.width));

    this.width = Math.round(this.game.width * multiplier);
    this.height = Math.round(this.game.height * multiplier);
  };

  window.Game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
};

这会扼杀更新的可能性，但它可以工作

【讨论】：

【解决方案3】：

现在（Phaser 2.4.4）您只需通过设置缩放模式来做到这一点，例如在您的创建函数中：

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

game.scale.scaleMode 控制游戏在非全屏模式下的缩放方式。

http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html#scaleMode

【讨论】：