Sign in to follow this  
Wolfsbane

Definition animations with sprite names.

Recommended Posts

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');

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:

image.png.f46af156ebe368d799568a76eb30c59c.png

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.