Loading Bar/Loading Screen

[kestorr]

Hello there.

 

 

Is there a way to add a loading bar/screen, other than the way shown in the resources/Project Templates/basic folder?

I constructed my game inside one js file (and ofc the index.html) so inside that js file i have preload, create and update functions. And the "var game=new Phaser.Game(...)" is inside there too.

 

I saw in the example there that i need to divide those functions into separate files.

 

So any other way to do this?

 

 

I tried to just make a boot.js file like  in that example but with no success.

 

 

[lewster32]

You don't need to split it into separate files - you do however need to use states to do it properly, so you can preload all of your assets in the first state ('boot') and then move onto the next state when loading is complete.

[kestorr]

I got like this:

var game=new Phaser.Game(	640, 480, Phaser.AUTO, '');var BasicGame = {};game.state.start('Boot');BasicGame.Boot=function () {};BasicGame.Boot.prototype = {	preload: function () 	{		// Here we load the assets required for our preloader (in this case a background and a loading bar)		game.load.image('preloaderBackground', 'GameFiles/background1.png');		game.load.image('preloaderBar', 'GameFiles/loading2.png');	},	create: function () 	{		// Unless you specifically know your game needs to support multi-touch I would recommend setting this to 1		game.input.maxPointers = 1;		// Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:		game.stage.disableVisibilityChange = true;		if (game.game.device.desktop)		{			// If you have any desktop specific settings, they can go in here			this.scale.pageAlignHorizontally = true;		}		else		{			// Same goes for mobile settings.			// In this case we're saying "scale the game, no lower than 480x260 and no higher than 1024x768"			game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;			game.scale.minWidth = 480;			game.scale.minHeight = 260;			game.scale.maxWidth = 1024;			game.scale.maxHeight = 768;			game.scale.forceLandscape = true;			game.scale.pageAlignHorizontally = true;			game.scale.setScreenSize(true);		}		// By this point the preloader assets have loaded to the cache, we've set the game settings		// So now let's start the real preloader going		game.state.start('GameState');	}};//then i got all my varsBasicGame.GameState=function(){}BasicGame.GameState.prototype = {	preload: function(){	game.background = this.add.sprite(0, 0, 'preloaderBackground');	game.preloadBar = this.add.sprite(300, 400, 'preloaderBar');	game.load.setPreloadSprite(game.preloadBar);        //etc}//and so on with other functions

But it doesnt work.

I get "Phaser.StateManager - No state found with the key: Boot"

[lewster32]

You need this line:

game.state.add('Boot', BasicGame.Boot);

Add it before game.state.start, and put both of these lines after you've declared BasicGame.Boot itself.

[kestorr]

Thanks for the instructions.

 

Added like this:

var BasicGame = {};BasicGame.Boot=function () {}BasicGame.GameState=function(){}game.state.add('Boot', BasicGame.Boot);game.state.add('GameState', BasicGame.GameState);game.state.start('Boot');BasicGame.Boot.prototype = {	preload: function () 	{		// Here we load the assets required for our preloader (in this case a background and a loading bar)		game.load.image('preloaderBackground', 'GameFiles/background1.png');		game.load.image('preloaderBar', 'GameFiles/loading2.png');	},	create: function () 	{		// Unless you specifically know your game needs to support multi-touch I would recommend setting this to 1		game.input.maxPointers = 1;		// Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:		game.stage.disableVisibilityChange = true;		if (game.game.device.desktop)		{			// If you have any desktop specific settings, they can go in here			game.scale.pageAlignHorizontally = true;		}		else		{			// Same goes for mobile settings.			// In this case we're saying "scale the game, no lower than 480x260 and no higher than 1024x768"			game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;			game.scale.minWidth = 480;			game.scale.minHeight = 260;			game.scale.maxWidth = 1024;			game.scale.maxHeight = 768;			game.scale.forceLandscape = true;			game.scale.pageAlignHorizontally = true;			game.scale.setScreenSize(true);		}		// By this point the preloader assets have loaded to the cache, we've set the game settings		// So now let's start the real preloader going		game.state.start('GameState');	}};// all the varsBasicGame.GameState.prototype = {	//etc}

But i get this error:

"Invalid Phaser State object given. Must contain at least a one of the required functions: preload, create, update or render"

[Jirka1111]

That error is self-explaining. Just add at least one function to your GameState.

[kestorr]

There are all the 3 functions in the GameState.

 

I also deleted the entire GameState and any reference to it, only Boot remaining and i still get that same error.

The problem is in Boot i think.

[kestorr]

To narrow it down:

var game=new Phaser.Game(	640, 480, Phaser.AUTO, 'gameContainer');var state = function(game) {  };game.state.add('state', state);game.state.start('state');state.prototype = {	preload:function() {},	create:function() {},	update:function() {}}

This gives me the same error ("Invalid Phaser State object given. Must contain at least a one of the required functions: preload, create, update or render"), thats all there is inside the game.js

But not sure why because the required functions are there.

[kestorr]

Ok i got it to work:

 

This is the correct way:

var game=new Phaser.Game(	640, 480, Phaser.AUTO, 'gameContainer');var state = function(game) {  };state.prototype = {	preload:function() {},	create:function() {},	update:function() {}}game.state.add('state', state);game.state.start('state');