Pixi.js: Dynamically loading textures?

[Shaun Dreclin]

Heyo! For my game there will eventually be hundreds if not thousands of sprites available for users to decorate their personal spaces with, and it seems wasteful to load all of them in advance when the user will likely only see a small selection of them in any given play session. So I'm wondering what the best way would be of dynamically loading textures as-required?

 

I'm thinking something like:

User enters an area, server sends them a message listing all the items in that area, user downloads all the sprites listed (possibly with a progress bar), then the area is drawn. The areas are always editable though, so I'd need to account for new items being added at any time, including while somebody's already loading the area. Perhaps a check after you "finish" downloading the first batch of sprites to see if any new ones have been added?

 

I'd also want sprites to only load from the server once, so after a user has seen something it stays in memory for the rest of the session.

 

 

 

SOOOO yeah, advice?

 

 

Edit: Doing a bit of messing about, I've found that if I use this twice:

var fox = new PIXI.Sprite(PIXI.Texture.fromImage("img/firefox.png"));

 

The server only actually serves that file once. So could I just create a "new" sprite texture every time I need to place a sprite, and have pixi automatically handle the caching and such?

[ivan.popelyshev]

you can create as many loader queues as you want, just use

var loaderNumberNine = PIXI.loader.Loader();loaderNumberNine.add('stuff', 'stuff.png');loaderNumberNine.load(function(loader, resources) {  /*thats onload for you*/ });

but removing everything from cache will be tricky, you dont want memory leaks , right? You need to research that class and pixi cache to evade that.

[xerver]

To load an asset using the loader:

PIXI.loader    .add('resource-key', 'resource.url')    .load(function (loader, resources) {        console.log(resources['resource-key']);    });

Then to remove loaded data from the loader, or to use the loader again (without creating a new one) you must reset it:

PIXI.loader.reset();

When done with a texture, and you don't need it anymore just be sure to use the `.destroy` methods. You can find info on those in the docs and in the FAQ.

 

If you wanted to create different loaders, you can do that as well:

var loader = new PIXI.loaders.Loader();// use the same as PIXI.loader

Hope this helps.