Jump to content

Pixi.js: Dynamically loading textures?

Shaun Dreclin

Recommended Posts

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? :D



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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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:


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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...