benunca Posted November 30, 2015 Share Posted November 30, 2015 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 tutorialhttp://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ This is the error I getUncaught Error: The frameId "walk01" does not exist in the texture cache This couldn't be a CORS problem could it? I mean the images are in a sub-directory within the same server/project. 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); Quote Link to comment Share on other sites More sharing options...
mattstyles Posted November 30, 2015 Share Posted November 30, 2015 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. Quote Link to comment Share on other sites More sharing options...
xerver Posted November 30, 2015 Share Posted November 30, 2015 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.