Definition animations with sprite names.

[Wolfsbane]

Hey Team,

Quick question here: So we can define animations using the two ways below (Copy/pasted from Panda examples page). 

Is it possible to define an animation like the 3rd way I listed below? I tried to get it to work.. it didn't, so I assume it's not supported. But seems more convenient to build up an animation this way?

The first method (defining indexes) is not very convenient. I'm pretty sure with TexturePacker, my texture sheet is going to be jumbled up, and indexes will change as I continue to add more sprites.

The second way is better, but I can't define 'run', or 'jump'-style animations, which I'd like to.

Any thoughts? Am I missing something here?

//One way
this.anim = new game.Animation('player.atlas');
        this.anim.addAnim('run', [3, 4, 5, 6, 7, 8, 9, 10]);
        this.anim.addAnim('jump', [2, 1], { speed: 3, loop: false });
        this.anim.play('run');

//second way
var anim = new game.Animation([
		    'anim1.png',
		    'anim2.png',
		    'anim3.png'
		]);
		anim.play();



//third way.. won't work??
this.anim = new game.Animation('player.atlas');
        this.anim.addAnim('run', [
		    'anim1.png',
		    'anim2.png',
		    'anim3.png'
		]);
this.anim.play('run');

 

[enpu]

There is actually three different ways to use addAnim function.

1. Use frame indexes

addAnim('run', [3, 4, 5, 6, 7]);

2. Define start frame index and number of frames

addAnim('run', 3, 5); // Animation starts from frame index 3 and contains 5 frames

3. Use frames that start with specific name

addAnim('run', 'anim_run'); // Uses all frames that start with name anim_run

Third is handy if you name your frames properly, like

anim_run01.png
anim_run02.png
anim_run03.png

This way if you add more frames to your anim, they will be automatically used.

[Wolfsbane]

Ah ha, yep, that 3rd one would be handy!

But I won't necessarily have my animations named in a simple sequence like that. Sometimes we want animation to reuse a specific image.

Take a typical retro-style game. A walking cycle might have 4 frames like this:

But this is actually only 3 separate images. A standing image, a right-foot forward image, and a left-foot forward image. By mixing 0,1,3,0, we don't need to load the second standing image.

So still not ideal.

[enpu]

Ah i see.

I have added now support for frame names, instead of frame indexes in the array, you can now use frame names (or even mix indexes and names in same array):

game.module(
    'game.main'
)
.body(function() {

game.addAsset('player.atlas');

game.createScene('Main', {
    init: function() {
        var player = new game.Animation('player.atlas');
        player.addAnim('run', ['run-01.png', 'run-02.png']);
        player.play('run');
        player.addTo(this.stage);
    }
});

});

Just update to latest develop version.

[Wolfsbane]

That's awesome mate. Thanks!