How to set background color before boot scene preload?

Phaser 3
1

Example project is from official template project

We can see that backgroundColor has been set in game config.

const config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    parent: 'game-container',
    backgroundColor: '#028af8',  // <-- Here already set
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: [
        Boot,
        Preloader,
        MainMenu,
        Game,
        GameOver
    ]
};

But when opening the game in browser, we find background color is black before boot complete preload function.

1729058981544
17290589815442312×1400 305 KB

The screen shot shows this problem.

Although the black scene flashes by, the experience is still very bad.

Is there any solution ? thx.

2

The scene camera background color is different from the game canvas background color.

The black screen is likely before Phaser itself has booted, so nothing’s been drawn yet.

3

Thanks.

I find the ‘transparent’ parameter in GameConfig, which may be usefull. If set transparent ‘true’, then black flash disappears. :slightly_smiling_face: