Change texture of Pixi's AnimatedSprite

[html5gamedev]

I use this code to setup a texture atlas animation:

    PIXI.loader
        .add('out2', 'assets/out2.png')
        .load(function (loader, resources){
        onRotationsLoaded(loader, resources)
    });

    function onRotationsLoaded(loader, resources) {
      first = new PIXI.extras.AnimatedSprite(setupFrames(resources["out2"].texture.baseTexture));

      app.renderer.plugins.prepare.upload(first, function(){
         console.log("loaded first");
      // ready to go

    });
    }


function setupFrames(name) {
    var frames = [];
    array is an array that stores correct position for each frame of animation
    for (var i = 0; i < array.length; i++) {
        var rect = new PIXI.Rectangle(array[i].frame.x, array[i].frame.y, array[i].frame.w, array[i].frame.h);
        frames.push(new PIXI.Texture(name, rect));
    }
    return frames;
}

I would like to change the texture of the AnimatedSprite first in a click event or something. The new texture needs to be fetched from the server(I do not want to load it at start, because there are too many of them). I could destroy first and create second AnimatedSprite, but is there a way to just change it's texture atlas image?

[ivan.popelyshev]

"new PIXI.Texture" accepts baseTexture or Texture as first parameter, not the string. Yeah, and you can just use "animatedSprite.textures = frames";

[html5gamedev]

Yeah, I am passing resources["out2"].texture.baseTexture to it, so that's okay. I guess I have bad naming convention.

 

I am trying to fetch the new texture atlas from the server. I've managed to do it if I preload everything, but there are too many texture atlases to preload all of them. So i created this function to fetch them 1 by 1 when it is necessary:

var nextSprite;
function fetch(){

            var newLoader = new PIXI.loaders.Loader()
            .add('nextSprite', 'pathToSpriteSheet')
            .load(function (loader, resources){
                nextSprite = new PIXI.extras.AnimatedSprite(setupFrames(resources["nextSprite"].texture.baseTexture));
                //setupSprites(nextSprite);
                app.renderer.plugins.prepare.upload(nextSprite, function(){
                    if (firstRun){
                        app.stage.addChild(nextSprite);
                    }
                    newLoader.reset();
                });

            });
}

 

 

I call it in this way:

//on click event, each click should load a new texture

nextSprite.gotoAndPlay(0);

fetch()

To my disappointment, this doesn't seem to work with periodic clicking. Any idea how to load new texture atlases, stuff them in the same AnimatedSprite and play the animation?