Transitions between scene

Hello Everyone.

When i am switching between scenes or when the game first loads, there is a black overlay which appears for a fraction of second. I want to change the color of this transition to white(which is now black).

Tried to set the camera background color and canvas color but no luck.

Thank you in advance.

new Phaser.Game({ backgroundColor: 0xffffff })

should do that.

Hey Samme,
Already tried that, not working.

What does it look like?

Hey @samme


checkout this Video, once the game reloads a black screen appears, also between the scene transitions there is a flicker too.

here is the config

let game = new Phaser.Game({
    type: Phaser.WEBGL,
    backgroundColor: 0xffffff,
    transparent: true,
    scene: [PreloaderView, MenuView, GamePlayView],
    parent: 'game-div',
    scale: {
        width: 1920,
        height: 1080,
        mode:Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.Center.CENTER_BOTH
    }
})

and this is how my index.html looks like.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Game Name</title>

    <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">

    <link rel="icon" type="image/png" href="assets/favicon.png" />

    <style>
        body {
            overflow: hidden;
            background-color: #ffffff;
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }

        #game-div {
            background-color: #ffffff;
        }

        @font-face {
            font-family: "Roboto";
            src: url('../packet/media/fonts/Roboto-Regular.ttf');
            font-weight: 400;
            font-weight: normal;
        }

        @font-face {
            font-family: "Roboto Bold";
            src: url('../packet/media/fonts/Roboto-Bold.ttf');
        }

        @font-face {
            font-family: "Roboto Black";
            src: url('../packet/media/fonts/Roboto-Black.ttf');
        }

        @font-face {
            font-family: "Roboto Italic";
            src: url('../packet/media/fonts/Roboto-BoldItalic.ttf');
        }

        @font-face {
            font-family: "Roboto Medium";
            src: url('../packet/media/fonts/Roboto-Medium.ttf');
        }
    </style>

</head>

<body
    style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
    unselectable="on" onselectstart="return false;" onmousedown="return false;">
    <div style="font-family:Roboto; position:absolute; left:-1000px; visibility:hidden;">.</div>
    <div style="font-family:Roboto Bold; position:absolute; left:-1000px; visibility:hidden;">.</div>
    <div style="font-family:Roboto Black; position:absolute; left:-1000px; visibility:hidden;">.</div>
    <div style="font-family:Roboto Italic; position:absolute; left:-1000px; visibility:hidden;">.</div>
    <div style="font-family:Roboto Medium; position:absolute; left:-1000px; visibility:hidden;">.</div>
</body>
<div id="game-div"></div>

</html>

If you have transparent: true then backgroundColor is ignored, but that may not matter.

What do you have in the scenes?

Hi @samme
I figures it out.
So i have the base scene which inherits Phaser.Scene and all the other scenes in my game inherits the base scene.
i mistakenly added // this.cameras.main.fadeIn(300, 0, 0, 0) in base scene’s create.

Removed it and everything seems to be working great.

My bad, thanks for your time.