Jump to content

loading bar in phaser


Go to solution Solved by Nikow,

Recommended Posts

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+"%";};
Link to post
Share on other sites

 

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

Link to post
Share on other sites
  • 11 months later...

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)

Link to post
Share on other sites
  • 1 year later...
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

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.

×
×
  • Create New...