Phaser.io3：获取场景中的游戏大小

Question

看似简单的问题，我就是解决不了：

我正在使用 Phaser.io 3 HTML5 带有 ES6 类的游戏框架，我试图找出实际的 "Game Size"（或 canvas / viewport size），这样我就可以在屏幕上将对象居中：

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

我找不到读取或计算实际视口/canvas' 大小的方法。有什么提示吗？

Answer 1

在场景中，在 preload() 和 create() 方法中（not 在构造函数中）您可以访问 canvas 元素this.sys.game.canvas。所以要获得 canvas 大小，你可以这样做：

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

就我而言，我想添加以下代码以简化对 canvas 的访问：

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

Answer 2

您可以使用默认相机：

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

来自the Phaser 3 API Documentation on Camera：

Cameras, by default, are created the same size as your game, but their position and size can be set to anything.

Answer 3

以下应该有效：

scene.sys.game.scale.gameSize

Answer 4

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

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

Phaser.io3：获取场景中的游戏大小

Phaser.io 3: Get game size in scene

phaser-framework