Reload image when load failed

[Paumonsu]

Hello.

 

I'm making a website for a Android/iPhone game, the website  visualization is similar to a videogame, and has really big images, that's the reason I'm using Phaser and take profit of WebGL.

 

The target devices are PC, laptops, tablets and smartphones. For the PC and laptop version I'm loading really big images. Now I want to divide the assets in 4 different sizes ( XHD, HD, MD and SD), the size it loads depends on the device it's loading the website or bandwidth. When it doesn't find the texture in the target fodler, it should look for it in the folder below it.

 

So if it tries to load texture "test.png" in the folder "HD" and fails to load it, it should look for it in folder "MD".

 

Here's the code I'm using to reload the image when load failed.

function loadStageAssets( stage ){        base = scene.stages[stage].resources;    for(var i = 0; i < base.images.length; i++){        var curImg = base.images[i];        var dir = "/textures/" + textureQualityArray[textureQuality] + "/" + curImg[1];        game.load.image(curImg[0], dir);    }}function onLoadError( a , b ){    var url = b.url;    var urlArray = url.split("/");    var file = urlArray.pop();    var folder = urlArray.pop();    var key = b.key;    var newQualityFolder;    if( folder == textureQualityArray[ TEXTURE_QUALITY_XHD ] ){        newQualityFolder = textureQualityArray[ TEXTURE_QUALITY_HD ];   } else if( folder == textureQualityArray[ TEXTURE_QUALITY_HD ] ) {        newQualityFolder = textureQualityArray[ TEXTURE_QUALITY_MD ];    } else if( folder == textureQualityArray[ TEXTURE_QUALITY_MD ] ) {        newQualityFolder = textureQualityArray[ TEXTURE_QUALITY_SD ];    }        var dir = "/textures/" + newQualityFolder + "/" + file;    game.load.image( key , dir );}

Problem is the game.load.image inside onFileError doesn't seem to try to load anything.

 

Anyone knows what is happening?

 

 

[rich]

The Loader doesn't work like this I'm afraid. It doesn't load the image the moment you call "load.image", it adds it to a file queue and that is then started when you tell it to start. Or if used in a preload function it collects all of the calls together, creates a queue from them and then starts it automatically for you. But you're using it outside of preload so you need to start it yourself. And crucially: once the load has started, you cannot then modify the queue.

[Paumonsu]

Thanks rich.

 

Do i have to create another Loader each time I want to queue new elements?

 

I can't find anywhere in Loader documentation a way to control the start or end of the queue.

[rich]

No there should only ever be 1 single loader, don't create more of them, it'll get really messed-up. Just populate it and start it as needed: http://examples.phaser.io/_site/view_full.html?d=loader&f=load+events.js&t=load%20events

[jouniii]

Our solution to this was to modify the queue file names based on the platform capabilities and other variables. Thus we know what to add before adding it to the queue without needing to resort to failed attempts. To overly simplify (not to take account scaling requirements and fractional values) the code checks for the device pixel ratio to see if to suffix file name with @1x or @2x.

[Paumonsu]

Thanks, I got it working.

 

My website is a large horizontal world with different stages one next to the other. Now I can load the stages independently for maximum performance.