Transitions between scene

Phaser 3
1

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.

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

should do that.

3

Hey Samme,
Already tried that, not working.

4

What does it look like?

5

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>
6

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

What do you have in the scenes?

7

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.