CODEWITHSUNDEEP
javascriptpixi.js
potato
potato

Reputation: 4589

Change texture of Pixi's AnimatedSprite

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?

Upvotes: 1

Views: 2064

Answers (1)

hirowaki
hirowaki

Reputation: 76

I'd say simply replacing AnimatedSprite._textures would work.

first.textures = setupFrames('secondOne');

If the new texture has different frame counts from the previous one, you might like to call AnimatedSprite.prototype.gotoAndPlay(frame) right after replacing texture to reset the current frame.

Upvotes: 3

Related Questions