javascript 如何让 Phaser 游戏自动填充窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27086220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a Phaser game automatically fill the window?
提问by curiousdannii
How can I make a Phaser game automatically fill the browser window? (And ideally, automatically refill if the window changes size.) I know that there is a ScaleManager classbut the docs aren't clear how to use it. I've also found other instructionsbut they don't indicate where to add the code they suggest, and running it immediately after creating the Game class doesn't seem to do anything.
如何让 Phaser 游戏自动填充浏览器窗口？（理想情况下，如果窗口更改大小，则自动重新填充。）我知道有一个ScaleManager 类，但文档不清楚如何使用它。我还找到了其他说明，但它们没有指出在何处添加他们建议的代码，并且在创建 Game 类后立即运行它似乎没有任何作用。
I am currently using the base code found in this tutorial, but am willing to change that completely.
我目前正在使用本教程中的基本代码，但我愿意完全改变它。
回答by curiousdannii
Turns out to be quite simple, you just need to run this code in a preload or create function (instead of immediately after creating a game instance, as I had been trying).
结果证明非常简单，您只需要在预加载或创建函数中运行此代码（而不是像我一直在尝试的那样在创建游戏实例后立即运行）。
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
//this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.setScreenSize( true );
Note that setting this.scale.pageAlignHorizontally to true will actually mess up the horizontal alignment if you make the game go fullscreen. Instead you can centre the canvas with css:
请注意，如果您让游戏全屏显示，将 this.scale.pageAlignHorizontally 设置为 true 实际上会弄乱水平对齐方式。相反，您可以使用 css 将画布居中：
canvas { margin: 0 auto; }
回答by ceed
You can overwrite the setShowAll Method of the ScaleManager
By default this function has an if which switches on "expanding",
expanding is a parameter which gets set to true if you go into fullscreen mode.
But since we always want to "expand" i just removed the if.
您可以覆盖 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;
};
this kills the possibility to update, but it works
这会扼杀更新的可能性，但它有效
回答by Richard
Right now (Phaser 2.4.4) you do this simply by setting the scale mode, for example within your create function:
现在（Phaser 2.4.4）您只需设置缩放模式即可，例如在您的创建函数中：
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.scaleMode controls how the game is scaled when NOT in full screen mode.
game.scale.scaleMode 控制游戏在非全屏模式下的缩放方式。
http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html#scaleMode
http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html#scaleMode
