Phaser.io 3：在场景中获取游戏尺寸

Question

这似乎是一个简单的问题，但我就是无法解决它：

我正在使用Phaser.io 3 HTML5游戏框架，采用ES6类编写，并试图找出实际的“游戏尺寸”（或画布/视口尺寸），以便我可以在屏幕中心放置一个对象：

class Scene1 extends Phaser.Scene {
    constructor(config) {
        super(config);
    }

    preload() {
        this.load.image('ship', 'assets/spaceship3.png');
    }

    create() {

        let ship = this.add.sprite(160,125, 'ship');
        // Here I need to figure out the screen width / height:
        // ---> How do I achieve that?
        ship.setPosition(width / 2, height / 2);
    }
}

我找不到一种方法来读取或计算实际视口/画布的大小。有什么提示吗？

- Alex Schenkel

Answer 1

在场景中，可以在preload()和create()方法中（不是在构造函数中）使用this.sys.game.canvas来访问画布元素。因此，要获取画布大小，可以执行以下操作：

create() {
    let { width, height } = this.sys.game.canvas;
}

就我而言，我喜欢添加以下代码以便更容易地访问画布：

preload() {
    this.canvas = this.sys.game.canvas;
}

- yolenoyer

---

谢谢。不幸的是，这仅适用于使用画布引擎的情况 - 当使用webGL时，似乎无法正常工作？ - Alex Schenkel

抱歉，我无法复现它，在我的情况下两种情况都可以工作。 - yolenoyer

当使用更高的DPI像素比时，画布宽度与游戏宽度不相同。 - Kokodoko

Answer 2

您可以使用默认相机：

ship.setPosition(this.cameras.main.centerX, this.cameras.main.centerY);

来自Phaser 3 API Documentation的Camera部分：

相机默认与您的游戏大小相同，但它们的位置和大小可以设置为任何值。

- James Skemp

---

放置在 this.cameras.main.centerX 和 Y 上的图像会随着相机移动吗？如果我想让它保持静态，不随相机移动，而是成为场景的背景呢？ - VELFR

@VELFR 这取决于你的逻辑。如果你把上述代码放在 update() 中，那么图像位置将会在每一帧更新，但如果你把它放在 create() 中，它将使用当前相机的值并且不会移动图像。 - James Skemp

Answer 3

我在我的预加载中使用以下代码来获取宽度和高度。

    this.gameWidth = this.sys.game.canvas.width
    this.gameHeight = this.sys.game.canvas.height

- Shutt

Answer 4

以下内容应该有效：

scene.sys.game.scale.gameSize

- Tyler Liu

Answer 5

我只是使用game.config.width。

- ban-geoengineering