Forums » Impact Engine » Animations sometimes very jerky for sprites.

Hi,

I am trying to figure out why sometimes the animation for flipping a chip is silk smooth and other times it's extremely jumpy! I've tested in Chrome, Fx and even Safari. Same issue. :-\

Demo url: http://moduscreate.com/tmp/othello

Click on any chip, and you'll see that sometimes it moves very well, and other times, it simply flips to another color with only a few key frames of animation.


Here is the class. Does anyone see anything that is glaring? many thanks!

var flipBlack = [0,1,2,3,4,5,6,7,8,9,10,11],
        flipWhite = [11,10,9,8,7,6,5,4,3,2,1,0];

    EntityChip = ig.Entity.extend({

        animSheet : new ig.AnimationSheet('media/images/chip-sprite.png', 48,48),
        collides  : ig.Entity.COLLIDES.NEVER,
        size      : {
            x : 48,
            y : 48
        },
        init : function(x,y,settings) {
            var me = this;
            me.parent(x,y,settings);

            me.addAnim('idle_white', 1, [0]);
            me.addAnim('idle_black', 1, [11]);
            me.addAnim('flip_black', .1, flipBlack);
            me.addAnim('flip_white', .1, flipWhite);

            me.currentAnim = me.anims['idle_' + me.color];
        },
        update : function() {
            var me = this,
                newColor,
                oldAnim;

            // is not animating && the event type is click
            if (! me.animating && ig.input.pressed('click')) {
                newColor = (me.color == 'black' ? 'white' : 'black');

                if (me.isItemClicked()) {
                    me.animating   = true;
                    me.newColor    = newColor;
                    me.currentAnim = me.anims['flip_' + (me.color == 'black' ? 'white' : 'black')];
                }

            }

            if (me.animating && me.currentAnim.frame === 11) {
                oldAnim  = me.currentAnim;
                newColor = (me.color == 'black' ? 'white' : 'black');

                me.color = me.newColor;
                me.currentAnim = me.anims['idle_' + (this.color == 'black' ? 'black' : 'white')];

                oldAnim.gotoFrame(0);
                me.animating = false;
            }
            me.parent();
        },
        isItemClicked : function() {
            var me       = this,
                igInput  = ig.input,
                igMouse  = igInput.mouse,
                thisPos  = me.pos,
                thisSize = me.size,
                mouseY   = igMouse.y,
                mouseX   = igMouse.x,
                posX     = thisPos.x,
                posY     = thisPos.y,
                sizeY    = thisSize.y,
                sizeX    = thisSize.x,
                boundY   = mouseY >= posY && mouseY <= sizeY + posY,
                boundX   = mouseX >= posX && mouseX <= sizeX + posX;

            return (boundY && boundX)

        }
    });

I guess my biggest question is: Is the changing of animations really correct? :(

What does the debugging panel say? Are draw times or update times very high?

I opened the debug and you can see that the performance graphs stay very low while the animations do their thing.

http://youtu.be/seUJuNioo6Y


I've updated the online demo to use the debugger so you can see for yourself. http://moduscreate.com/tmp/othello/


I think it has something to do w/ the timing of the click event and the animation start. :-\


I know so little of the framework that it's hard for me to debug.

OK. I'm getting close. Looks like the animation frames are not always starting at 0.

http://moduscreate.com/i/2011-12-22_1122.swf

That is what is causing the jerky nature. It depends on when the item was clicked and what time in each "cycle" the animation is in.

Still diving in... :(

After set currentAnim (line 57 and line 69) insert: me.currentAnim.rewind();

I guess that should work ;)

I tried it and it does not. I have tried:
The issue is the start frame calculation seems to be based on time for each cycle. I need to figure out why and how to get around it.

var newAnim = me.anims['idle_' + (me.color == 'black' ? 'black' : 'white')];
newAnim.frame = 0;

oldAnim.gotoFrame(0);

me.currentAnim = newAnim;
newAnim.rewind();

Here's a suggestion from left field.

What if when you determine that a flip is to happen you establish a delayed animation change. Then switch the animation when the currentAnim.frame == 0

draw: function() {
     if (this.currentAnim.frame == 0 && this.animToBecome != null) {
          // switch currentAnim to the new one
          this.animToBecome = null;
     }
     this.parent();
}

The above is obviously untested code just to give an idea of what I mean.
This could cause a varying delay in the "flip". But the animations might not have the dropped frames thing happening.

Just an idea.

The Entity's .addAnim supports a stop parameter. Set this to true and your animations will stop at the last frame. That way you don't have to set it to the idle animation every time.

Just rewind your animations when you set them and you should be fine:

this.currentAnim = this.anims['flip_' + (me.color == 'black' ? 'white' : 'black')];
this.currentAnim.rewind();

Also, to check if an animation has played through, you should look at its .loopCount. In theory - if the browser is too slow - the animation could skip a frame and your .frame == 11 check would not be true.

if( this.currentAnim.loopCount ) { // loop count not zero?
	this.currentAnim = this.anims.foo.rewind();
}

Thanks gxxaxx and dominic. I'm going to try both of these suggestions.

Just to provide closure, I wanted to tell everyone that the suggestions provided by @Dominic were perfect.


For anyone interested in seeing the full source for our EntityChip class:

    var flipBlack = [0,1,2,3,4,5,6,7,8,9,10,11],
        flipWhite = [11,10,9,8,7,6,5,4,3,2,1,0],
        black     = 'black',
        white     = 'white';

    EntityChip = ig.Entity.extend({

        animSheet : new ig.AnimationSheet('media/images/chip-sprite.png', 48,48),
        collides  : ig.Entity.COLLIDES.NEVER,
        size      : {
            x : 48,
            y : 48
        },
        init : function(x,y,settings) {
            var me = this;
            me.parent(x,y,settings);

            me.addAnim('flip_black', .03, flipBlack, true);
            me.addAnim('flip_white', .03, flipWhite, true);

            me.currentAnim  = me.anims['flip_' + me.color];
        },
        update : function() {
            var me = this,
                newColor;

            // is not animating && the event type is click
            if (! me.animating && ig.input.pressed('click')) {
                newColor = (me.color == 'black' ? 'white' : 'black');

                if (me.isItemClicked()) {
                    me.animating   = true;
                    me.newColor    = newColor;
                    me.currentAnim = me.anims['flip_' + (me.color == black ? white : black)];
                    me.currentAnim.rewind();
                }
            }

            if (me.animating && me.currentAnim.loopCount > 0) {
                me.color = me.newColor;
                me.currentAnim = me.anims['flip_' + (me.color == black ? black : white)];
                me.animating = false;
            }
            me.parent();
        },
        isItemClicked : function() {
            var me       = this,
                igInput  = ig.input,
                igMouse  = igInput.mouse,
                thisPos  = me.pos,
                thisSize = me.size,
                mouseY   = igMouse.y,
                mouseX   = igMouse.x,
                posX     = thisPos.x,
                posY     = thisPos.y,
                sizeY    = thisSize.y,
                sizeX    = thisSize.x,
                boundY   = mouseY >= ( posY + 5 ) && mouseY <= (sizeY - 5) + posY,
                boundX   = mouseX >= ( posX + 5 ) && mouseX <= (sizeX - 5) + posX;

            return (boundY && boundX)

        }
    });