如何在Phaser 3游戏运行时设置背景颜色？

Question

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

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

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

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

在Phaser 3中，如何设置游戏背景颜色，而不受场景影响？

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

this.cameras.main.setBackgroundColor(0xbababa)

请指引我。

- Senthil Kumaran C

---

是的，在Phaser 3中，通过相机更改它是唯一的方法。 - TheTallWitch

Answer 1

如果您想要在不同场景中背景颜色保持一致，Phaser 3 中的 GameConfig 对象有一个 backgroundColor 属性。您可以在这里查看文档，并在这里查看可工作版本。

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

您还可以选择创建一个透明的画布用于游戏，并在其下方使用一个 div 来更改背景颜色。为此，您将使用 GameConfig 对象的 transparent 属性。您还需要确保在 HTML 中使用一个对应的

并使用 parent 属性来更轻松地抓取和修改画布下方的颜色。

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

接下来，在create方法中，您将获取该父项目并修改其颜色：

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

您可以在这里查看一个可工作的版本。

- brae