Sign in to follow this  
jcdiprose

v3 loader

Recommended Posts

What are you stuck on? A simple example of usage:

PIXI.loader    // add resources    .add('name1', 'url/to/resource1.png')    .add('name2', 'url/to/resource2.json')    // listen for progress    .on('progress', onProgressCallback)    // load resources    .load(function (loader, resources) {        // resources is an object containing the loaded resources, keyed by the names you used above.        var sprite = new PIXI.Sprite(resources.name1.texture);    });

Share this post


Link to post
Share on other sites

"once" means the callback will be called one time for that event then the listener will be removed. "on" means the callback will be called for every time the event is called.

 

Generally you want "on" for progress, and "once" for complete would be fine.

Share this post


Link to post
Share on other sites

How i can clean cache of loader?

 

I use that : 

delete (PIXI.loader.resources['myJsonData']);

That's correct?

 

I'm making game and i load map with PIXI.loader. I don't wanna store all map in cache.

Share this post


Link to post
Share on other sites

The loader doesn't have a "cache" so to speak. It just stores everything it loaded so you can access it.

If you no longer need to access anything in the loader (or you have moved the resources to somewhere else and no longer need it to store anything) you can just call `.reset()`.

That will cleanup the loader and get it ready to load stuff again if you want it to. That includes clearing its reference to the "resources" object it has.

Share this post


Link to post
Share on other sites

if i was to make a progress bar/ loading bar do i use PIXI.loader.once('progress', onProgressCallback).once("complete", setup) or  PIXI.loader.on('progress', onProgressCallback).on("complete", setup) or  PIXI.loader.on('progress', onProgressCallback).once("complete", setup) ?

Share this post


Link to post
Share on other sites

Can you please check the once Complete again? I used that for my loading, and close the loading screen on complete, but the images are not loaded, they are just black and load later?

 

Tested on Chrome 42 and IE11.

 

P.s: not PIXI related, but I am pretty new to Javascript OOP, please tell me if I am using a good way to keep reference of GameScreen from `loadResources` to `onLoadCompleted`, because `this` in `loadResources` and `onLoadCompleted` are different?

 

GameScreen.prototype.loadResources = function () {    this.textures = {};    this.sprites = {};    this.loader = new PIXI.loaders.Loader();    this.loader.add("map", "/Images/map.png");    this.loader.add("card_fold", "/Images/Cards/card_fold.png");    for (var i = 0; i < 33; i++) {        this.loader.add("card" + i, "/Images/Cards/card_" + i + ".png");    }    for (var i = 0; i < 4; i++) {        this.loader.add("token" + i, "/Images/Tokens/token" + i + ".png");    }    var gs = this;    this.loader.once("complete", function () { gs.onLoadCompleted(gs); });    this.loader.load();};GameScreen.prototype.onLoadCompleted = function (gameScreen) {    { // Map        var sprMap = new PIXI.Sprite(gameScreen.loader.resources["map"].texture);        sprMap.width = CAM_WIDTH;        sprMap.height = CAM_HEIGHT;        gameScreen.stage.addChild(sprMap);        gameScreen.sprites.map = sprMap;    }    { // Tokens        for (var i = 0; i < 1; i++) {            var sprToken = new Token(gameScreen.loader.resources["token" + i].texture);            sprToken.x = 776; sprToken.y = 601;            sprToken.rotation = -0.35;            gameScreen.stage.addChild(sprToken);        }    }    { // Folding Cards        for (var i = 0; i < 33; i++) {            var sprCard = new Card(null, gameScreen.loader.resources["card" + i].texture);            sprCard.x = 710 - i + CARD_HALFWIDTH; sprCard.y = -30 - i + CARD_HALFHEIGHT;            sprCard.rotation = 0.342;            sprCard.mousedown = sprCard.touchdown = gameScreen.onCardClick;            gameScreen.stage.addChild(sprCard);            gameScreen.sprites.foldingCard = sprCard;        }    }    gameScreen.ready = true;    $("#lbl-loading-text").html("Load completed<br />Touch anywhere to play.");    $("#loading").attr("data-close-at-touch", "true");}

Share this post


Link to post
Share on other sites

P.s: not PIXI related, but I am pretty new to Javascript OOP, please tell me if I am using a good way to keep reference of GameScreen from `loadResources` to `onLoadCompleted`, because `this` in `loadResources` and `onLoadCompleted` are different?

this.loader.once("complete", function () { gs.onLoadCompleted(gs); });

 

 

You should be doing:

this.loader.once("complete", this.onLoadCompleted.bind(this));

bind returns a wrapper function that guarantees that the parameter you pass into it is "this" within the function you called it on. (It is the same thing as $.proxy if you are familiar with jquery)

 

- Monk

Share this post


Link to post
Share on other sites

You should be doing:

this.loader.once("complete", this.onLoadCompleted.bind(this));

bind returns a wrapper function that guarantees that the parameter you pass into it is "this" within the function you called it on. (It is the same thing as $.proxy if you are familiar with jquery)

 

- Monk

 

Nice! Thank you, never knew this before.

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.