Preloader image not loading , Can someone please help !`

[Rahul_Martin]

Hi ,

 

i am new to phaser , and can't resolve this problem from about a day wasted on it. while preloading my image does not show , i have attached a snapshot .

 

here is the code i have used for preloading

 

 

function preload()

{

game.load.image('preloaderbar','assets/preloaderbar.png');

LoadingProgress = game.add.sprite(game.world.centerX-100,game.world.centerY,'preloaderbar');

game.load.setPreloadSprite(LoadingProgress,0);

}

 

Thanks in advance.

[rich]

You can't create a preloader bar from an image that hasn't actually been loaded yet (as is the case above).

 

Load your preloader image in a different state, usually a Boot state.

[Rahul_Martin]

Aye , thanks , problem is  solved.

[mfcv]

I have the same problem. How do I implement the simplest boot state possible? Everything else in my game is done, and I don't wanna mess with it unless I have to.

 

I tried with adding "boot : boot" in the game init, and also a boot function, but that didn't work.

 

var game = new Phaser.Game(width, height, Phaser.AUTO, 'phaser_game', {boot : boot, preload: preload, create: create, update: update  });

 

Any ideas?

[lewster32]

I don't think you can do it like this I'm afraid - I too tried once to retrofit states into my non-state based game and it ended up needing to be largely rewritten and rearchitectured.

[wayfinder]

I retrofitted one of my games and it was as simple as taking the basic game template from the phaser master repo, putting preloader in preloader.js, update and create in game.js and adjusting the the boot state to my preferences, and then find&replacing "game." with "this." everywhere.

[ragnarok]

var game = new Phaser.Game(width, height, Phaser.AUTO, 'phaser_game', {boot : boot, preload: preload, create: create, update: update  });

 

Any ideas?

 

Wrap your original functions into an own object, then make another game-state-object, that loads the needed pictures and starts your original gamestate. Something like that:

var originalGamestate= {preload: preload, create: create, update: update};var preloader={   preload:function(){     game.load.image('preloaderbar','assets/preloaderbar.png');   },   create:function(){    game.state.start('originalGamestate');   }}var game = new Phaser.Game(width, height, Phaser.AUTO, 'phaser_game');game.state.add('orginalGamestate', orginalGamestate);game.state.add('preloader', preloader);game.state.start('preloader');