Jump to content

Change texture of Pixi's AnimatedSprite


html5gamedev
 Share

Recommended Posts

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;
}

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...