在相位器中禁用自动调整大小 [英] Disable auto-resizing in Phaser

问题描述

我正在使用Phaser创建响应式游戏.宽度固定为360，高度被计算为合适的比例.

var height = (360 * screen.height) / screen.width;
var game = new Phaser.Game(360, ratio, Phaser.AUTO, "", {preload: preload, create: create, update: update});

然后在create()函数中将其大小调整为100％，这样屏幕就会被填充:

function create () {
   document.querySelector("canvas").style.width = "100%";
   document.querySelector("canvas").style.height = "100%";
   // more stuff...
}

但是，如果我现在单击或执行任何操作，则画布的大小将重新调整为360xheight.如何禁用它?

谢谢

解决方案

Phaser实际上具有将游戏/画布缩放到内置窗口的宽度或高度的功能.

尝试改用 ScaleManager .在您的情况下，可能是SHOW_ALL，并且可以将其设置为引导状态(这意味着在代码的早期):

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

您可以在有关状态的本教程，以及官方示例.

I'm creating a responsive game with Phaser. The width is fixed to 360 and the height gets calculated to a fitting ratio.

var height = (360 * screen.height) / screen.width;
var game = new Phaser.Game(360, ratio, Phaser.AUTO, "", {preload: preload, create: create, update: update});

In the create() function I then resize it to 100%, so the screen is filled:

function create () {
   document.querySelector("canvas").style.width = "100%";
   document.querySelector("canvas").style.height = "100%";
   // more stuff...
}

However, if I now click or do anything, the canvas gets resized back to 360xheight. How can I disable that?

Thanks

解决方案

Phaser actually has the ability to scale the game/canvas to the width or height of the window built-in.

Try using the ScaleManager instead. In your case probably SHOW_ALL, and it can be set in your boot state (meaning early on in your code):

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

You can see an example of this in practice in this tutorial on State, and the official example.

这篇关于在相位器中禁用自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！