How to walk through animation step by step
clovis2

Hello!

I want to walk through an animation on mouse click. Here is the code of my behavior file:

LightItem = function()	{   	this.onAddToScene = function()    {        wade.addEventListener(this.owner, 'onMouseDown');    }    this.onMouseDown = function()    {    	var sprite = this.owner.getSprite(0);    	var anim = sprite.getAnimation("Piece");   		anim.step();    };};//@ sourceURL=match3Item.js

Any way I try to define my animation parameters, the animation is displayed but doesn't step on click.

What is my mistake?

Please help :(

All 7 Comments
foxcode

Hello!

 

The step function increments time for the animation by the simulation rate. so lets say our simulation rate is 30fps or 1/30.

That is how much time will be added to our animation. If our animation is set to run slower, say 10fps, step would need to be called 3 times to make anything happen.

 

I think it is confusing, the function name is a bit misleading and we will aim to include a function that moves to the next animation frame by the next release.

 

Right now I will come up with a work around for you, but thank you for bringing this issue up, I will be back soon :)

Gio

Like foxcode said, step advances the animation by the default time step (16.67 milliseconds unless you change it).

 

There is however a setFrameNumber function that you can use:

var frameNumber = 0;this.onMouseDown = function(){    var sprite = this.owner.getSprite(0);    var anim = sprite.getAnimation("Piece");    // calculate next frame number    frameNumber = (frameNumber + 1) % anim.getFrameCount();    // set frame number    anim.setFrameNumber(frameNumber);};
foxcode

Okay, I have found a way to do what you want. It isn't amazingly pretty but it seems to work.

 

Like I said above, step() increments by the simulation rate, which you can access via wade.c_timeStep

if we set the animation's speed to 1/wade.c_timeStep, then in theory, every time step is called the animation frame should be updated, hopefully giving you

the behavior you want. If you have any questions please reply to this thread :)

LightItem = function(){    this.onAddToScene = function()    {        wade.addEventListener(this.owner, 'onMouseDown');    }; // This semi colon was missing    this.onMouseDown = function() // This is unchanged from your program    {        var sprite = this.owner.getSprite(0);        var anim = sprite.getAnimation("Piece");        anim.step();    };};App = function(){    this.load = function()    {        wade.loadImage('animExample.png'); // Remember to use your own animation not mine :p    };    this.init = function()    {        var mySprite = new Sprite(); // Empty sprite        // Again own animation cells, but 1/wade.c_timeStep, false is crucial to do it the way you want        var myAnimation = new Animation('animExample.png', 13, 2, 1/wade.c_timeStep, false);        mySprite.addAnimation("Piece", myAnimation);         var myObject = new SceneObject(mySprite, LightItem);        wade.addSceneObject(myObject);        myAnimation.stop(); // This is very important, must have it after adding the scene object to the scene    };};
foxcode

Gio I tested your solution, it is similar to my first attempt at solving this and it doesn't work, I just tested it in my sample. I tried it with animation playing, not playing, speed 0, speed 30, with animation stop, without it. None of those worked, I think there is a bug somewhere in those functions. I looked at the wade pro code but couldn't find anything wrong. For the mean time my solution is the only one I could get working

Gio

Yes, I think there is a bug with setFrameNumber, as it doesn't appear to trigger a redraw of the sprite. It'll be fixed in the next release. A workaround is calling sprite.setDirtyArea() after setFrameNumber - or use foxcode's solution.

 

Either way, it is important that you call anim.stop() after adding the animation to the scene, otherwise it'll play it automatically, overriding anything you try to do manually.

clovis2

Hello!

The Foxcode's solution works fine! As I want to wrap around my animation, I have to put "true" in "looping" parameter while creating the animation.

I didn't retry the "setFrameNumber" with redraw forcing.

Thanks to you both :)

foxcode

You're welcome clovis2, glad it worked for you :)

Post a reply
Add Attachment
Submit Reply
Login to Reply