Jump to content

Texture Not in TextureCache - again?


benunca
 Share

Recommended Posts

  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);
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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