Question

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

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

Answer 1

结果很简单，你只需要在preload或create函数中运行这段代码（而不是在创建游戏实例之后立即运行，就像我一直在尝试的那样）。

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

Answer 2

您可以覆盖ScaleManager的setShowAll方法默认情况下，此功能有一个if开启＆＃34;扩展＆＃34;，
expand是一个参数，如果你进入全屏模式，它将被设置为true 但是因为我们总是希望扩大＆＃34;我刚刚删除了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）你只需设置比例模式即可，例如在你的创建功能中：

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

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

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

如何让Phaser游戏自动填满窗口？

3 个答案: