Jump to content

v3 loader


jcdiprose
 Share

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);    });
Link to comment
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.

Link to comment
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) ?

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

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

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.

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

  • Recently Browsing   0 members

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