Loader plugin 'start' and 'complete' events are not fired in preload

[sipals]

Version

• Phaser Version:
  3.55.2

• Operating system:
  Windows 10 (64 bits)

• Browser:
  Doesn't seem to be browser specific ( Firefox 93.0 64 bits / Google chrome 94.0.4606.81 64 bits).

Description

When re-starting a scene, the 'start' and 'complete' events are not fired by the loader plugin during the preload step. I don't think that it is an intended behaviour.

The documentation state that: "the start event is dispatched even if there aren't any files in the load queue" ( https://photonstorm.github.io/phaser3-docs/Phaser.Loader.Events.html#event:START__anchor )

This is an issue I identified while working on a loading screen progress-bar. My progress bar relies on the loader plugin events, and I was surprised to see that they didn't fire when starting a scene again. I can think of some potential workarounds but that's still an unexpected behaviour according to the documentation.

Example Test Code

Please find bellow an simplified version of my code that highlights the issue. It can be run instantly in the phaser 3 sandbox ( https://labs.phaser.io/edit.html ):

The scene properly renders a progress bar while loading some assets in the initial start: the progress screen gets cleaned on completion. However this doesn't happen after reloading the page (preload completes without any 'start' nor 'complete' event from the loader plugin.

class Menu1 extends Phaser.Scene{

    constructor(){
        super( { key: 'menu1' })
    }

    preload ()
    {
        //Loading screen variables: 
        // - progressBar, progressBox: boxes used for the loading progressBar
        // - percentText: text showing the loading progression
        // - loadingText: text above the loading progressBar ("Loading...")
        // - assetText: name of the asset being loaded
        
        let progressBar = this.add.graphics();
        let progressBox = this.add.graphics();
        
        let width = this.cameras.main.width;
        let height = this.cameras.main.height;
        let 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);

        let percentText = this.make.text({
            x: width / 2,
            y: height / 2 - 5,
            text: '0%',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        percentText.setOrigin(0.5, 0.5);

        let assetText = this.make.text({
            x: width / 2,
            y: height / 2 + 50,
            text: '',
            style: {
                font: '18px monospace',
                fill: '#ffffff'
            }
        });
        assetText.setOrigin(0.5, 0.5);

        this.load.on('start', function () {
            progressBox.fillStyle(0x222222, 0.8);
            progressBox.fillRect(240, 270, 320, 50);
        });
        
        this.load.on('progress', function (value) {
            percentText.setText(parseInt(value * 100) + '%');
            progressBar.clear();
            progressBar.fillStyle(0xffffff, 1);
            progressBar.fillRect(250, 280, 300 * value, 30);
        });

        this.load.on('fileprogress', function (file) {
            assetText.setText('Loading asset: ' + file.key);
        });

        this.load.on('complete', function () {
            console.log('complete')
            progressBar.destroy();
            progressBox.destroy();
            loadingText.destroy();
            percentText.destroy();
            assetText.destroy();
        });

        //loading stuff
        this.load.setPath('assets/sprites/');
        this.load.image('atari130xe');
        this.load.image('atari400');
        this.load.image('atari800');
        this.load.image('atari800xl');
    }

    create()
    {
        this.add.text(10, 10, 'Current scene: menu1\nPlease press enter to reload the scene and see the issue', { font: '20px Courier', fill: '#dcddde' });

        this.input.keyboard.on('keyup-ENTER', () => { this.scene.restart('menu2') });
        this.events.on('shutdown', this.shutdown, this);
    }

    shutdown()
    {
        //  We need to clear keyboard events, or they'll stack up when the Menu is re-run
        this.input.keyboard.shutdown();
    }

}

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#36393F',
    scene: [ Menu1]
};

var game = new Phaser.Game(config);

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.