Progress Bar

Recommended Posts

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.  :rolleyes:


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?

Share this post

Link to post
Share on other sites

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(); "GET", theUrl, false );
  xmlHttp.send( null );
  return xmlHttp.responseText;


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

Share this post

Link to post
Share on other sites
/** * *  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.";            }   = game;            this.settings = settings;        },        show: function () {            // 1. Create solid background.            this.bgColor =, 0);            this.bgColor.beginFill(this.settings.loading_bg_color);            this.bgColor.drawRect(0, 0,,;            this.bgColor.endFill();            // 2. Create a loading image/icon/splash            this.splashImage =,, 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.settings.loading_text + "0%", this.settings.loading_font);            this.progress.anchor.setTo(0.5, 0.5);  , 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;  ;        },        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.settings);            this.ready = false;  ;            // 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;}());

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.