Can't make scene invisible by using setVisible(false)

Phaser 3
1

Hi.

I am learning Phaser 3 by playing around some examples.

I failed to make scene to invisible by using setVisible(false). When checking the isVisible status, the value is “false”, but I can still see the scene with my eyes.

What was wrong with my codes? Please help me.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>Phaser 3 example</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>
<body>

<script>

var Boot = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function Boot ()
    {
        Phaser.Scene.call(this, { key: 'boot', active: true });
    },

    preload: function ()
    {
        this.load.image('atari1', 'assets/sprites/atari400.png');
        this.load.image('atari2', 'assets/sprites/atari1200xl.png');
    },

    create: function ()
    {
        this.scene.start('sceneA');  
	this.scene.launch('sceneB');

	this.scene.setVisible(false,'sceneA');  //after this, sceneA is still visible to my eyes
	this.scene.setVisible(false,'sceneB');  //after this, sceneB is still visible to my eyes 

	console.log(this.scene.isVisible('sceneA'));	// it shows the value "false"
    }
});

var SceneA = new Phaser.Class({
    Extends: Phaser.Scene,

    initialize:

    function SceneA ()
    {
        Phaser.Scene.call(this, { key: 'sceneA' });
    },

    create: function ()
    {
        var image = this.add.sprite(200, 300, 'atari1').setInteractive();

        this.input.setDraggable(image);

        image.on('dragstart', function (pointer) {

            this.setTint(0xff0000);

        });

        image.on('drag', function (pointer, dragX, dragY) {

            this.x = dragX;
            this.y = dragY;

        });

        image.on('dragend', function (pointer) {

            this.clearTint();

        });
    }

});


var SceneB = new Phaser.Class({

    Extends: Phaser.Scene,

    initialize:

    function SceneB ()
    {
        Phaser.Scene.call(this, { key: 'sceneB' });
    },

    create: function ()
    {
        var image = this.add.sprite(600, 300, 'atari2').setInteractive();

        this.input.setDraggable(image);

        image.on('dragstart', function (pointer) {

            this.setTint(0xff0000);

        });

        image.on('drag', function (pointer, dragX, dragY) {

            this.x = dragX;
            this.y = dragY;

        });

        image.on('dragend', function (pointer) {

            this.clearTint();

        });
    }

});


var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: [ Boot, SceneA, SceneB ] 
};

var game = new Phaser.Game(config);

</script>

</body>
</html>
2

It’s because start/launch are queued and the scene is made visible again once they occur.

You can hide them in their own init() methods or do

this.scene.start('sceneA');
this.scene.get('sceneA').events.once('start', () => {
  this.scene.setVisible(false, 'sceneA');
});
2 Likes
3

Hi Samme,

Thank you for your advice. It works. :grinning: