如何在运行时设置 Phaser 3 Game 的背景颜色？

Question

我是 Phaser 3 Framework 的新手，但在 Angular/Ngrx 方面有专业知识。

目前，我正在使用 Angular/Ngrx 创建自定义 Phaser 3 游戏编辑器。需要在运行时修改 Phaser 3 游戏的背景颜色。

在 Phaser 2+ 版本中，下面的代码设置了游戏的背景颜色，

game.stage.backgroundColor = "#4488AA";

但是如何在 Phaser 3 中设置游戏背景颜色而不考虑场景？

我们需要像下面这样通过相机设置吗？

this.cameras.main.setBackgroundColor(0xbababa)

请指导我。

Answer 1

如果您希望无论活动场景如何都具有相同的背景颜色，Phaser 3backgroundColor在对象中具有一个属性GameConfig。您可以在此处查看文档，并在此处查看工作版本。

const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 700,
    backgroundColor: '#4488aa',
    scene: {...}
};

您还可以选择为游戏创建透明画布，并使用其下方的 div 来更改背景颜色。为此，您将使用对象transparent的属性GameConfig。您还需要确保将该parent属性与 HTML 中的相应属性一起使用<div id="gameContainer"></div>，以便更轻松地获取和修改画布下方的颜色。

const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 700,
    parent: 'gameContainer',
    transparent: true,
    scene: {...}
};

然后，在创建方法中，您将获取该父项并修改颜色：

    create() {
        var div = document.getElementById('gameContainer');
        div.style.backgroundColor = "#4488AA";
    }

您可以在此处查看工作版本。