Progress Bar

[MarvinB]

Hi Guys,

 

I want to add a progress bar to my game. Not just one for loading my assets, but one that waits till my http calls have been made aswell. I am working with states (boot, preload, mainGame). 

It doesn't have to be a fancy one showing the actual progress, a simply image saying "loading..." would be enough for now. I can figure out the details later. 

 

How would I go about this? Would I preload the image in the boot section, create it in the preloader and destroy it when my http call returns?

[tips4design]

What do you mean by `http calls` ? When exactly do they happen, in what game state?

[MarvinB]

Yeah, I should have mentioned that. The http calls are placed in the create function of the mainGame state. 

 

function httpGet(theUrl){
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open( "GET", theUrl, false );
  xmlHttp.send( null );
  return xmlHttp.responseText;
}

 

After they returned successfully from the API, I want the loading to be finished.

[tips4design]

Well, so then after the function has returned you can change the game state from Loading to mainGame or whatever states you have.

[georgejfrick]

/** * *  Draw a loading screen in Phaser. Expects resources to already be loaded. * Generally used in preload and main states, with resources loaded during boot. */(function () {    'use strict';    var Base = require('basejs');    var LoadingScreen = Base.extend({        constructor: function (game, settings) {            if (!settings                || !settings.loading_image_key || !settings.loading_bg_color                || !settings.loading_text || !settings.loading_font ) {                throw "Loading screen is missing a required configuration field.";            }            this.game = game;            this.settings = settings;        },        show: function () {            // 1. Create solid background.            this.bgColor = this.game.add.graphics(0, 0);            this.bgColor.beginFill(this.settings.loading_bg_color);            this.bgColor.drawRect(0, 0, this.game.world.width, this.game.world.height);            this.bgColor.endFill();            // 2. Create a loading image/icon/splash            this.splashImage = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, this.settings.loading_image_key);            this.splashImage.y -= this.splashImage.height;            this.splashImage.anchor.setTo(0.5, 0.5);            // 3. Add a progress indicator            this.progress = this.game.add.text(this.game.world.centerX, this.game.world.centerY,                this.settings.loading_text + "0%", this.settings.loading_font);            this.progress.anchor.setTo(0.5, 0.5);            this.game.load.onFileComplete.add(this.fileComplete, this);        },        destroy: function () {            this.splashImage.cropEnabled = false;            this.splashImage.destroy();            this.splashImage = null;            this.bgColor.destroy();            this.bgColor = null;            this.progress.destroy();            this.progress = null;            this.game.load.onFileComplete.removeAll();        },        fileComplete: function (progress, cacheKey, success, totalLoaded, totalFiles) {            this.progress.text = this.settings.loading_text + progress + "%";        }    });    module.exports = LoadingScreen;}());

I use this like this:

(function () {    'use strict';    var Base = require('basejs'),    LoadingScreen = require('../loading-screen');        var PreloadState = Base.extend({        constructor: function (settings) {            if (!settings ) {                throw "Preload state is missing a required configuration field.";            }            this.settings = settings;        },        preload: function () {            this.loadingScreen = new LoadingScreen(this.game, this.settings);            this.ready = false;            this.loadingScreen.show();            // Do all of your 'real' asset loading here!            this.something.preload();        },        create: function () {            this.loadingScreen.destroy();        },        update: function () {            if ( this.something.isPreloadComplete() && this.ready === false) {                this.ready = true;                // go to menu or play state, or whatever            }        }    });    module.exports = PreloadState;}());