javascript - 如何让 Phaser 游戏自动填充窗口？

Question

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

我目前正在使用本教程中的基本代码，但我愿意完全改变它。

Answer 1

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

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

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

canvas { margin: 0 auto; }

Answer 2

您可以覆盖 ScaleManager 的 setShowAll 方法
默认情况下，此函数有一个 if 会打开“扩展”，
如果您进入全屏模式，扩展是一个参数，该参数设置为 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;
};

这消除了更新的可能性，但它有效

Answer 3

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

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

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

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