Lagged performance with many spritesheets

[ubiquitin]

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.