Texture / Sprite Slow to add to stage

[megmut]

Hey guys.. I have a quick question. So I'm preloading a background texture right, roughly 960 x 540, so not huge in the grand scheme of things. The preloader has finished loading it, and it definitely exists in the cache, however when ever I do this...

let bg = new PIXI.Sprite(PIXI.Texture.fromImage('myBG.png'));
stage.addChild(bg);

It takes a fair while to actually add it to the stage. I've watched the network to see if it IS making another xhr request to get the same image, and it's not

Are there any suggestions if I'm doing something wrong? Should I make a custom cache and create all the textures first so I don't have to wait for PIXI.Texture.fromImage to hunt through the texture cache and make it?

Cheers!

[ivan.popelyshev]

Its not making XHR request, its downloading an image. Please use pixi loader, https://github.com/kittykatattack/learningPixi

Also, there's small lag when it comes to uploading the texture first time on GPU, you can use "PIXI.prepare" plugin (search for docs) to take care of that.

[megmut]

Hey, thanks for the response. It is making an XHR with the PIXI Loader, and it already exists in the cache. I was checking to see if it was making a second when the texture is called and it is not. 

Thanks for the info on the pixi prepare, I will take a look at that now

[megmut]

Yes, that worked fine thanks @ivan.popelyshev There is little documentation on this, so for anybody coming across this..

renderer.plugins.prepare.upload(texture, () => {
     console.log('single texture complete');
}

// multiple textures

var textures = [texture1, texture2, texture3, texture4];
for(var i = 0; i < textures.length; i++) {
    if(i >= textures.length-1) {
        remderer.plugins.prepare.upload(textures[i], () => {
              console.log('last item has been uploaded');
         });
    } else {
        remderer.plugins.prepare.upload(textures[i];
    }
    
}

// directly off the back of the resource loader

loaderComplete(loader, resources) {
    let c:number = 0;
    for(let t in resources) {
        let texture = PIXI.Texture.fromImage(resources[t].name);
        if(c >= Object.keys(resources).length -1) {
        
            renderer.plugins.prepare.upload(texture, () => {
                console.log('preloading complete!')
            });
        } else {
            renderer.plugins.prepare.upload(texture);
        }
        c++;
    }
}

I couldn't see any documentation on preparing assets directly from the preloader without creating a texture from each one, and using the resource name to make a reference to the texture in cache.

[themoonrat]

If you wanted to be super quick about it, you could just iterate through everything in PIXI.utils.BaseTextureCache and upload everything from there.

[themoonrat]

And unrelated(ish) - I always recommend creating sprites using Sprite.fromFrame() if you expect them to be preloaded.

fromFrame will only look in the texture cache, and report an error if it's not found

fromImage which will try to load the image if it's not in the texture cache

If I know I'm preloading assets, I'd rather get an error that it doesn't exist and work out why.