v3 loader

[jcdiprose]

I have just attempted to switch to v3 and I am lost in the understanding of the loader.

 

I cannot log the progress of each asset though these are loading..

 

Can someone share with me the new API to make the loader work?

 

Thanks,
Jon

[xerver]

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);    });

[jcdiprose]

Thanks for clarifying this for me. 

 

I had seen the syntax 

PIXI.loader.once('complete', onLoadedCallback);&PIXI.loader.once('progress', onProgressCallback);

Which didn't work for the progress callback. I tried looking for it again so you could rectify it but can't see it anywhere!

 

Cheers,

Jon

[xerver]

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

[Seby]

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.

[xerver]

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.

[xdiepx]

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) ?

[xerver]

The last one.

[xdiepx]

Cheers

[PianoScoreJP]

where is documents about new loader ? (or pixi.js v3?)

[xerver]

Pixi docs:

https://github.com/pixijs/docs

Loader:

https://github.com/englercj/resource-loader

[datvm]

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");}

[tjmonk15]

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

[datvm]

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.