Search the Community

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 get Uncaught 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);

Im learning how Loader and TextureCache works in order to figure out some optimal way to load resources. Unfortunaly, cant find much useful info about this topic. Anybody know where to look? Or care to give little insight?

I fairly new to Pixi....and I'm running into some performance issues while trying to animate a large image sequence. I'm trying to animate a movie-clip from a sequence of images, 540 images at 1280 x 720 resolution. This is a lot of assets so I've combined them into 45 large sprite-sheet images (12 sub-images in each sheet), with each sprite-sheet having its own json file. I have to be able to call and render any specific image in the sequence very quickly as I change a variable i've made elsewhere in the code, var =id; I have loaded all 45 json files into the AssetLoader Class and built a stage..... function buildStage(){ stage = new PIXI.Stage(0x66FF99); renderer = PIXI.autoDetectRenderer(window.innerWidth,window.innerHeight, {view:document.getElementById("mycanvas")}); loadSpriteSheet();} var assetsToLoad=[]; loadSpriteSheet = function() { for( var spriteNbr = 0; spriteNbr<46; spriteNbr++){ assetsToLoad [spriteNbr]= 'http://myCDN...url'+spriteNbr+'.json';} loader = new PIXI.AssetLoader(assetsToLoad, true); loader.load();}; // I call the image to the screen and renderer like so... every time i change the value of "id"defined elsewhere, the function showImage() is called. The value of "id" also corresponds to the name of each sub image that needs to be called from the sprite-sheet json file. Example... file 0.json contains 12 images/ frames with names 0-11, while file 1.json contains 12 images/ frames with names 12-23, etc... function showImage(id){ var slice2 = PIXI.Sprite.fromFrame(id); slice2.position.x = 0; slice2.position.y = 0); stage.addChild(slice2); renderer.render(stage); } Ok so this works, but very very poorly. As I call showImage() every time and rapidly change id the animation is very choppy. Many frames are skipped the faster i change id and call the function. I've tried incorporating requestAnimationFrame(), which doesn't seem to help. I have also set this up using the MovieClip() class as a test and it works horribly. The animation plays but very choppy and lots of lag again, and even some frames "shaking". Very weird. Here is the code for that in that scenario i delete the showImage() function and substitute with the fallowing, just trying to play all the frames.... var frames = []; function animate(){for (ii=0; ii<541; ii++){frames [ii] = [ii];} var tile = PIXI.MovieClip.fromFrames(frames);tile.position.x = 0;tile.position.y = 0; // tell PIXI.MovieClip, which frame will be shown tile.play();stage.addChild(tile);requestAnimationFrame(animateTile);} function animateTile(){renderer.render(stage);requestAnimationFrame(animateTile);} Again this plays but very bady... Any suggestions of how to fix this would be much appreciated. Should I be using sprite batches or maybe displayObjectContainer perhaps? I heard that SpriteBatch() is only useful if you have a single texture. What could I do to make things run fast and smooth? Thanks for any help in advance.