Atlas multiple animations with same sprite.

[momenimum]

How can I do this in Panda 2, I have an atlas with multiple animations such as stand, run and walk.  I would like to make 1 sprite be able to call those animations at any time.  I understand that sprite = game.Animation.fromTextures('run') declares a sprite that can only play run.  But how would I play stand. run and walk at anytime without redeclaring the sprite?  I tried this but it does not seem to work, it always starts at the first animation of the atlas.

this.sprite = new game.Animation('player.atlas');
this.sprite.play('run');
...
this.sprite.play('walk');

 

[enpu]

To add multiple animations with name you can use addAnim function, like in this example: https://www.panda2.io/examples#animation-addAnim

For that you need to define indexes for each frame, though i have just added new change so you can also define string that will look for frames starting with that, instead of frame index:

this.sprite = new game.Animation('player.atlas');

// Create new anim named runAnim from all frames that start with string 'run'
this.sprite.addAnim('runAnim', 'run');

// Create new anim named jumpAnim from all frames that start with string 'jump'
this.sprite.addAnim('jumpAnim', 'jump');

// Play anim named runAnim
this.sprite.play('runAnim');

To try that out, update your engine to latest dev version.

[momenimum]

I'm using the dev engine and see the changes you've made.  I get 2 errors in console.  Let me know if I did something wrong.

undefined:1 GET file:///C:/Users/.../undefined net::ERR_FILE_NOT_FOUND
texture.js:76 Uncaught Error loading image undefined

 

[enpu]

Can you show your code where you are using addAnim function?

[momenimum]

My atlas has 4 colors of balloons, each color has 1 set of animation.  I want the balloon to be able to switch to another color anytime.  Below I put the piece of code and a bit of the atlas JSON.  Does it look correct?

this.sprite = new game.Animation('balloons.atlas');
this.sprite.addAnim('blue','balloon-blue');
this.sprite.addAnim('red','balloon-red');
this.sprite.addAnim('yellow','balloon-yellow');
this.sprite.addAnim('green','balloon-green');

/*
{
    "frames": { 
        "balloon-blue/0000": {
            "x": 1927, 
            "y": 719,
            "w": 250,
            "h": 250,
            "sx": 71,
            "sy": 52,
            "sw": 107,
            "sh": 143
        }, 
............
*/

 

[enpu]

That looks correct to me.

I have added some error messages to Animation class. Could you try to update again and see if the error message is different now?

[momenimum]

Not sure what you changed, but it looks like its working now with the new dev version, thanks!.  I have another question.  What is the best way to make the sprite start at an animation name frame 0, but not play immediately?  Something like anim.stop(name,frame)?

[enpu]

I just added name parameter to stop function, so this should now work:

this.sprite.stop('blue', 0); // Switch to blue animation and stop at frame index 0

Remember to reload your game after you update the engine.

[enpu]

There is also gotoFrame function, which you can use if you just want to change the current frame of the animation (without affecting the playback):

this.sprite.gotoFrame(0); // Go to frame index 0 of current animation

this.sprite.gotoFrame('run', 1); // Switch to run animation and go to frame index 1

 

[momenimum]

It's working thanks!  Also I know you made a Math.random(min,max) but is there an integer version or I put a parseInt() around it?

[enpu]

If you want whole number from Math.random you should round the result, like this:

Math.round(Math.random(1, 10)); // Random whole number between 1 and 10