Phaser preloader problems

[Joetan83]

Hi all,

I am currently running into Phaser's problems on the preload state with the code snippet as below

class Preload extends Phaser.State {

    constructor(game, progress,cacheKey,progressDisplay) {
        super(game, progress,cacheKey,progressDisplay);
        this.progress = progress;
        this.cacheKey = cacheKey;
        this.progressDisplay = progressDisplay;
    }

    loadStart(){
        let box = this.make.graphics(0, 0);

        box.lineStyle(8, 0xFF0000, 0.8);
        box.beginFill(0xFF700B, 1);
        box.drawRect(-50, -50, 100, 100);
        box.endFill();

        this.spinner = this.add.sprite(this.world.centerX, this.world.centerY, box.generateTexture());
        this.spinner.anchor.set(0.5);
        this.add.tween(this.spinner.scale).to( { x: 0, y: 0 }, 1000, "Elastic.easeIn", true, 250);
    }

    preload(game,progressDisplay){
        let center = { x: this.game.world.centerX, y: this.game.world.centerY };
        game.load.image("player", Images.lander);
        game.load.spritesheet("asteroids", Images.asteroid, 64, 64, 30);


        game.load.onLoadStart.add(this.loadStart,this);
        let loadingText = new Text(this.game, center.x, center.y);
        loadingText.anchor.set(0.5);
            var timerEvt = this.game.time.events.loop(100, function (){
                if(progressDisplay <= 100){

                loadingText.text = 'Loading...'+(++progressDisplay)+'%';



            } else{
                game.time.events.remove(timerEvt);
                let loadingText = new Text(this.game, center.x, center.y);
                loadingText.text = 'Completed';
                game.add.tween(loadingText).to({alpha: 0}, 500, Phaser.Easing.Linear.None, true);
                game.load.onLoadComplete.add(this.loadComplete, this);
            }

            }, this);



    }

    create(){

           this.game.state.start('GameState');

        }


    loadComplete(){

        this.create();
    }

}

Somehow the this.game.state.start('GameState'); was executed before the Complete text could fade out.

Is there anyway to resolve the bug where to get the complete text to fade out first then execute the GameState?

Thanks.

[Vishal Gupta]

Hi Joetan,

I think you should place a check for number of files loaded like below, You must call this before load start

game.load.onFileComplete.add(function(progress, cacheKey, success, totalLoaded, totalFiles){
            if(game.load.totalQueuedFiles() === 0){

               // this.game.state.start('GameState');
                this.startPlay(); // start game from here 

            }
        }, this);

[XekeDeath]

This state, to me, seems a little more complicated than it needs to be...

States will call their functions in this order: preload, loadUpdate, create

the loadUpdate() function is called during the loader process, you can use that instead of the timer you have...
The create function is called automatically by Phaser when preloading is done...

As you have the state change in the create function, it will be called as soon as preloading is done...

Instead, try putting the tween to fade the text in the create function, and the state change in the onComplete callback of the tween...
You can do this without changing the rest of your code, too...
 

class Preload extends Phaser.State {
    preload(game,progressDisplay){
        let center = { x: this.game.world.centerX, y: this.game.world.centerY };
        game.load.image("player", Images.lander);
        game.load.spritesheet("asteroids", Images.asteroid, 64, 64, 30);


        game.load.onLoadStart.add(this.loadStart,this);
        let loadingText = new Text(this.game, center.x, center.y);
        loadingText.anchor.set(0.5);
            var timerEvt = this.game.time.events.loop(100, function (){
                if(progressDisplay <= 100){

                loadingText.text = 'Loading...'+(++progressDisplay)+'%';



            } else{
                game.time.events.remove(timerEvt);
                /* This isn't needed here...
                let loadingText = new Text(this.game, center.x, center.y);
                loadingText.text = 'Completed';
                game.add.tween(loadingText).to({alpha: 0}, 500, Phaser.Easing.Linear.None, true);
                game.load.onLoadComplete.add(this.loadComplete, this);
                */
            }

            }, this);
    }

    create(){
           // This is copied from above, with the tween callback added...
           let loadingText = new Text(this.game, center.x, center.y);
           loadingText.text = 'Completed';
           this.game.add.tween(loadingText).to({alpha: 0}, 500, Phaser.Easing.Linear.None, true).onComplete.add(function()
           {
               this.game.state.start('GameState');
           }, this);
           //this.game.state.start('GameState');
        }

/* This is not needed either...
    loadComplete(){

        this.create();
    }
 */ 
}

[Joetan83]

Hi all,

Thank you for your responses, I have cleared up the subclasses as Xeke suggested.

The game.state.start('GameState'); now is executed after the "Complete"

However there seems to be a slight problem on the loading percentage is quite fast and skips on the countdown timer.

What I see on screen is there is no loading percentage but the box and "Complete" text fading out before going to the "GameState".

Is there a way to slow it down from the current script below?

Help is appreciated again.

class Preload extends Phaser.State {

    constructor(game, progress,cacheKey,progressDisplay) {
        super(game, progress,cacheKey,progressDisplay);
        this.progress = progress;
        this.cacheKey = cacheKey;
        this.progressDisplay = progressDisplay;
    }

    loadStart(){
        let box = this.make.graphics(0, 0);
        box.lineStyle(8, 0xFF0000, 0.8);
        box.beginFill(0xFF700B, 1);
        box.drawRect(-50, -50, 100, 100);
        box.endFill();
        this.spinner = this.add.sprite(this.world.centerX, this.world.centerY, box.generateTexture());
        this.spinner.anchor.set(0.5);
        this.add.tween(this.spinner.scale).to( { x: 0, y: 0 }, 1000, "Elastic.easeIn", true, 250);
    }

    preload(game,progressDisplay){
        let center = { x: this.game.world.centerX, y: this.game.world.centerY };
        game.load.image("player", Images.lander);
        game.load.spritesheet("asteroids", Images.asteroid, 64, 64, 30);
        game.load.onLoadStart.add(this.loadStart,this);

        let loadingText = new Text(this.game, center.x, center.y);
        loadingText.anchor.set(0.5);
            var timerEvt = this.game.time.events.loop(100, function (){
                if(progressDisplay <= 100){
                    if (game.load.totalQueuedFiles() != 0)
                     loadingText.text = 'Loading...'+(++progressDisplay)+'%';

                      progressDisplay ++;

                }else{
                    game.time.events.remove(timerEvt);
                }

            }, this);
    }

    create(game){
        let center = { x: this.game.world.centerX, y: this.game.world.centerY };
        let loadingText = new Text(this.game, center.x, center.y);
        loadingText.text = 'Completed';
        game.add.tween(loadingText).to({alpha: 0},1000, Phaser.Easing.Linear.None, true).onComplete.add(function()
        {
            game.state.start('GameState');
        });
    }

}