How to avoid progress bar flashing quickly in cached scenes?

Phaser 3
1

Hi!

I implemented a progress bar in the preload function of my scenes and it’s working fine. However as I move back and forth among the scenes every time I enter a cached scene the progress bar flashes quickly. I would like to know how to avoid it.

Here the code I am using for the progress bar:

        var width = this.cameras.main.width;
        var height = this.cameras.main.height;
        var loadingText = this.make.text({
            x: width / 2,
            y: height / 2 - 50,
            text: 'Loading...',
            style: {
                font: '20px monospace',
                fill: '#ffffff'
            }
        });

        loadingText.setOrigin(0.5, 0.5);
        var progressBar = this.add.graphics();
        var progressBox = this.add.graphics();
        progressBox.fillStyle(0x4a7128, 0.8);
        progressBox.fillRect(352, 359, 320, 50);

        this.load.on('progress', function (value) {
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(362, 369, 300 * value, 30);
        });
                    
        this.load.on('complete', function () {
            progressBar.destroy();
            progressBox.destroy();
        });

Thanks!

2

I don’t expect that would happen unless you’re loading new files after restarting the scene.

Try logging the start, progress, and complete events.

1 Like
3

Good idea, thanks! :slight_smile: