Texture Not in TextureCache - again?

[benunca]

1. So, I've been back and forth with different techniques, trying to get a JSON texture atlas to load a tile sheet of animations for each "type" of animal in this game.  But trying to wrangle what's valid from what's invalid according to v3 (over much of the "outdated" v2 tutorials and such).  Can someone tell me how the JSON object gets loaded by the loader, but the textures are not in the textureCache???  This code was modified from a v3.0.1 tutorial

   http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/

   This is the error I get

   Uncaught Error: The frameId "walk01" does not exist in the texture cache

    

2. This couldn't be a CORS problem could it?  I mean the images are in a sub-directory within the same server/project.

    

3. Is there a (yet another) new way to handle this?  My brain feels like jello trying to figure this out.

var animalTypes= [    {"typeID": 0, "name": "creeper", "tilesheet": "animalAssets/animal0.png", "JSON": "animalAssets/animal0.json"},    {"typeID": 1, "name": "sleeper", "tilesheet": "animalAssets/animal1.png", "JSON": "animalAssets/animal1.json"}];function Animal(id, type, speed, start){    var aID = id;    var aData = animalTypes[type];  // References a JS Object literal with the "DATA"     var aSpeed = speed;    var aPosition = start;    var FRAMES = [        "walk01",        "walk02",        "walk03",        "walk04",        "stand01",        "stand02",        "stand03",        "stand04"    ]    var frameIndex;    var frameTime;    var FRAMERATE = 0.08;    var VELOCITY = 0;    PIXI.loader.add('animal'+ aID, aData.JSON).load(function () {        var texture = resources["animal" + aID].textures;        console.log(resources.animal0.textures); // SHOWS ARRAY OF TEXTURE OBJECTS NAMED AS ABOVE    });    var aSprite = new PIXI.Sprite(PIXI.Texture.fromFrame(FRAMES[0]));    frameIndex = 0;    aSprite.anchor.x = 0.5;    aSprite.anchor.y = 0.5;    aSprite.position.x = 0;    aSprite.position.y = 0;    stage.addChild(aSprite);}var newSprite = new Animal(0,1,1,1);

[mattstyles]

Pixi implements Chad's resource loader, there are some more docs there that might help.

 

Although you arent giving the loader a chance to load anything, you'd need to move all the sprite code at the end of `Animal` constructor into the callback you passed to `.load`. So long as there were no errors (you'll see loading errors reported in the console of your browser, CORS isnt an issue here) all the textures should be there when that callback triggers.

 

I've got an example of using textures in v3, (by all means download the repo and run the example, its OSS), the link should jump to the code that creates sprites from textures. I'm using a wrapper to access the resource-loader but, in my example, `event.res.textures` would be the same as your `resources.animal0.textures`, I simply pass each texture to Sprite to create it. But, as I mentioned before, in your example you're trying to access textures before they have had a chance to load, which I think is the problem you're having.

[xerver]

Don't mix the loader and convenience methods. Don't mix the loader and convenience methods. Don't mix the loader and convenience methods. Don't mix the loader and convenience methods. Don't mix the loader and convenience methods. Don't mix the loader and convenience methods. Don't mix the loader and convenience methods. Don't mix the loader and convenience methods.

Write that line 50 times and you will be out of detention. Just use the loader, forget the convenience methods exist (also you had an async error like mattstyles mentioned):

 

PIXI.loader.add('animal'+ aID, aData.JSON).load(function () {    var textures = resources["animal" + aID].textures;    console.log(resources.animal0.textures); // SHOWS ARRAY OF TEXTURE OBJECTS NAMED AS ABOVE    var aSprite = new PIXI.Sprite(textures[FRAMES[0]]);    frameIndex = 0;    aSprite.anchor.x = 0.5;    aSprite.anchor.y = 0.5;    aSprite.position.x = 0;    aSprite.position.y = 0;    stage.addChild(aSprite);});

Of course that assumes you use JSON Hash format, and not JSON Array format for your spritesheet.