Joetan83

Phaser preloader problems

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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);

Share this post


Link to post
Share on other sites

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();
    }
 */ 
}

Share this post


Link to post
Share on other sites

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');
        });
    }

}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.