Lazyloading images

[Techbot]

I am attempting to simply load one image while another is displaying. So I have a second load function call. But this time it's in the create function after the first image is created thusly:

  var image = game.add.sprite(game.world.centerX, game.world.centerY, 'plate_'+i);    i++;    game.load.image('plate_'+i,image_array[i] );

But the image is not loaded. I guess game.load.image is only called inside preload.

 

The other option is create a state per image, so each time I click an image it loads the next. Not exactly lazyloading, but it does prevent all images being loaded at once.

 

Is there any other option?

[Skeptron]

It depends on what you want to do. For example it's very common to use a "Boot" state to load the images for the "Load" state, so that you're 100% that the images for your loading screen are fully loaded when displaying it.

 

If your game is all about loading pictures one after the other, you can add the images to the phaser loader and manually call loader.start() (Doc : http://phaser.io/docs/2.3.0/Phaser.Loader.html#start)

This should trigger the onLoadComplete event (doc : http://phaser.io/docs/2.3.0/Phaser.Loader.html#onLoadComplete)

 

You could also do it with plain JS I guess. But the advantage of using Phaser loader is that if I'm not mistaken the assets will automatically be added to the cache.

[Skeptron]

ADDED : game.load.anything() does NOT load the assets, it just adds them to the loading queue. Only game.load.start() starts the process of actually loading the assets in the queue. You can call start() manually or let Phaser do it (it will automatically call it after completing the preload() function).

 

This is explained in details in Interphase 1.

[Techbot]

Cool thanks Skeptron,

 

game.load.start() was the missing piece.  

 

Not a game just an experiment to understanding the flow better.  (a jqueryphotogalleryclickimage-like thingy)

 

Coffee pot on, sitting down to read Interphase for an hour.