loading bar in phaser

[pranadevil]

hi guys,

 

im here again asking for your wise advices

 

i wonder how to achieve different ways to show loading bars in phaser. i mean something like a bar filling another and a % number indicating how it goes.

 

would you mind to share with me some example? 

 

i would like to explore other ways to improve my load state

[Nikow]

Hi !

 

Like that ? :

var loadingBar = this.add.sprite(game.width/2,game.height/2,"loadingbar");loadingBar.anchor.setTo(0.5,1);this.load.setPreloadSprite(loadingBar,0);

[BattyMilk]

I knocked one of these out yesterday. This will give you a progress bar and a percentage counter:

 

PreloadScene.prototype.preload = function () {    //show percentage    this.progress = this.game.add.text(this.game.world.centerX, this.game.world.centerY-30, '0%', {fill: 'white'});    this.progress.anchor.setTo(.5,.5);        //show progress bar    var progressBar = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'progressBar');     progressBar.anchor.setTo(0.5, 0.5);     this.game.load.setPreloadSprite(progressBar);    this.game.load.onFileComplete.add(this.fileComplete, this);    };PreloadScene.prototype.fileComplete = function (progress, cacheKey, success, totalLoaded, totalFiles) {    this.progress.text = progress+"%";};

[pranadevil]

 

I knocked one of these out yesterday. This will give you a progress bar and a percentage counter:

 

PreloadScene.prototype.preload = function () {    //show percentage    this.progress = this.game.add.text(this.game.world.centerX, this.game.world.centerY-30, '0%', {fill: 'white'});    this.progress.anchor.setTo(.5,.5);        //show progress bar    var progressBar = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'progressBar');     progressBar.anchor.setTo(0.5, 0.5);     this.game.load.setPreloadSprite(progressBar);    this.game.load.onFileComplete.add(this.fileComplete, this);    };PreloadScene.prototype.fileComplete = function (progress, cacheKey, success, totalLoaded, totalFiles) {    this.progress.text = progress+"%";};

 

in phaser it works????

 

i got errors

[Nikow]

Try my slution and look at this : http://docs.phaser.io/Loader.js.html#sunlight-1-line-39 

[pranadevil]

Try my slution and look at this : http://docs.phaser.io/Loader.js.html#sunlight-1-line-39 

thanks man

[weratius]

Maybe, I'm late, but I made smth like this:

 

Here is a boot file:

// Boot.js

module.exports = {

    preload: function() {

        //resources for preloader
    },

    create: function() {

        game.load.onLoadStart.add(this.loadStart, this);
        game.load.onLoadComplete.add(this.loadComplete, this);

        this.start();
    },

    loadStart: function() {

        loadingProcess = new loadingProcessModule();
        loadingProcess.show(true);
    },

    loadComplete: function() {

        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.setBounds(0, 0, 6000, 6000);
        this.game.state.start("Play");
    },

    update: function() {

        //show loading in percentage, magic
        if(loadingProcess != null && loadingProcess.loadingProcessInPercentage != null) {
            loadingProcess.loadingProcessInPercentage.text = game.load.progress + ' %';
        }
    },

    start: function() {

        //here we load our resources for a game
    }
};

and here we show our preloader:

module.exports = LoadingProcess;

function LoadingProcess() {

    this.landingSprite = {}; 
    this.preloader = {}; 

    this.loadingProcessInPercentage = {};
}

LoadingProcess.prototype.show = function(showPercentage) {

    this.landingSprite = //background

    this.preloader = // loading animation
    

    //here we prepare text object for percentages
    if(showPercentage) {
        this.loadingProcessInPercentage = game.add.text(game.width / 2 - 20, game.height / 2 - 100, 0 + ' %', {
                                                font: '50px "Press Start 2P"',
                                                fill: '#000000'
                                          });
        this.loadingProcessInPercentage.fixedToCamera = true;
    }
}

LoadingProcess.prototype.hide = function() {

	this.preloader.kill();
    this.landingSprite.kill();
    if(this.loadingProcessInPercentage != null) {
        this.loadingProcessInPercentage.kill();
    }
}

easy and clear I think)

[GoodOldSnoopy]

On 21/02/2016 at 0:18 AM, weratius said:

Maybe, I'm late, but I made smth like this:

 

Here is a boot file:

// Boot.js

module.exports = {

    preload: function() {

        //resources for preloader
    },

    create: function() {

        game.load.onLoadStart.add(this.loadStart, this);
        game.load.onLoadComplete.add(this.loadComplete, this);

        this.start();
    },

    loadStart: function() {

        loadingProcess = new loadingProcessModule();
        loadingProcess.show(true);
    },

    loadComplete: function() {

        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.world.setBounds(0, 0, 6000, 6000);
        this.game.state.start("Play");
    },

    update: function() {

        //show loading in percentage, magic
        if(loadingProcess != null && loadingProcess.loadingProcessInPercentage != null) {
            loadingProcess.loadingProcessInPercentage.text = game.load.progress + ' %';
        }
    },

    start: function() {

        //here we load our resources for a game
    }
};

and here we show our preloader:

module.exports = LoadingProcess;

function LoadingProcess() {

    this.landingSprite = {}; 
    this.preloader = {}; 

    this.loadingProcessInPercentage = {};
}

LoadingProcess.prototype.show = function(showPercentage) {

    this.landingSprite = //background

    this.preloader = // loading animation
    

    //here we prepare text object for percentages
    if(showPercentage) {
        this.loadingProcessInPercentage = game.add.text(game.width / 2 - 20, game.height / 2 - 100, 0 + ' %', {
                                                font: '50px "Press Start 2P"',
                                                fill: '#000000'
                                          });
        this.loadingProcessInPercentage.fixedToCamera = true;
    }
}

LoadingProcess.prototype.hide = function() {

	this.preloader.kill();
    this.landingSprite.kill();
    if(this.loadingProcessInPercentage != null) {
        this.loadingProcessInPercentage.kill();
    }
}

easy and clear I think)

 

Where do I put the loadingProcess function? I'm always getting a ReferenceError: loadingProcess is not defined error

[samme]

See Project Templates/Basic/Preloader.js#L23