Animation does not finish

[jonteferm]

Hey,

I've got a function call on isDown for the left mouse button. This function checks the direction and then plays an animation of two frames. Like this:

if(this.lastDirection === "down"){
	this.animations.play("hitDown");
}else if(this.lastDirection === "left"){
	this.animations.play("hitLeft");
}else if(this.lastDirection === "right"){
	this.animations.play("hitRight");
}

For example hitDown looks like this:

this.animations.add('hitDown', [16,17], 5, true);

The thing is; when I run "this.animations.play" - I expect theboth animation frames to just run but they're not. The whole animation does not run unless I hold the mousebutton pressed. If i just click - only the first frame in the animation shows. Why is that?

[jonteferm]

Discovered that I can set the FPS for each animation like this:

this.animations.play("hitDown", 60, false);

So animation FPS is set to 1 as default? 

[drhayes]

I usually don't set the FPS when calling play, only when adding the animations to the AnimationManager via this.animations.add. There, FPS defaults to 60. I wonder if you're calling play on another animation before the first one finishes?

[jonteferm]

1 hour ago, drhayes said:

I usually don't set the FPS when calling play, only when adding the animations to the AnimationManager via this.animations.add. There, FPS defaults to 60. I wonder if you're calling play on another animation before the first one finishes?

Hmm, yes. Part of the problem appears to be that I played the idle mode as an animation. Like "if no key input -> play idle". Really stupid of me to have idle as an animation.

}else if(this.wasd.right.isDown){
	this.body.velocity.x = 100;
    this.animations.play("right");
	this.lastDirection = "right";
}else{
	this.animations.stop(false, true);
	/*
	if(this.lastDirection === "up"){
		this.animations.play("idleUp");
	}else if(this.lastDirection === "down"){
		this.animations.play("idleDown");
	}else if(this.lastDirection === "left"){
	    this.animations.play("idleLeft");		
	}else if(this.lastDirection === "right"){
		this.animations.play("idleRight");
	}*/
}

and now the animation plays trough. Hovever... 

Now if I do not provide the FPS parameter - the animation does not get past the first frame. 

if(this.lastDirection === "down"){
	this.animations.play("hitDown", 60, false);
}else if(this.lastDirection === "left"){
    this.animations.play("hitLeft", 60, false);
}else if(this.lastDirection === "right"){
	this.animations.play("hitRight", 60, false);
}

Edit: aaah! unless I hold the button down. Then it keps playing.

Edit: What I also can see is that I really have to hold the button down. Isn't there any way to detect a simple press on the button?

[drhayes]

Glad we're making progress, but I'm not sure what you're asking. You are detecting the simple press of a button. When making sure the player animation looks right I use a full-blown state machine to ensure that animations finish before going to the next and they transition correctly. You might end up doing something similar.

[jonteferm]

On 2016-12-29 at 6:33 PM, drhayes said:

Glad we're making progress, but I'm not sure what you're asking. You are detecting the simple press of a button. When making sure the player animation looks right I use a full-blown state machine to ensure that animations finish before going to the next and they transition correctly. You might end up doing something similar.

Okey, yes that is true. I thought of it in the wrong way. I guess my problem is that during the next frame, it enters the else - where the animation stops - as I am no longer holding down the button. So what i probably have to do; is to flag in some way that a animation is still in play and in that case prevent the animations.stop() even though it enters the else. However, I am under the impression that this is exactly what should be solved by the second parameter in my call to the animations.stop() function (dispatchComplete) which I set to true. Maybe I got that wrong.

[drhayes]

What version of Phaser are you using? The params switched sometime between 2.4.2 and 2.6. In 2.6 the docs for AnimationManager.stop say the second param is "resetFrame": "When the animation is stopped should the currentFrame be set to the first frame of the animation (true) or paused on the last frame displayed (false) (defaults to false)". Just wondering if that's messing things up, too.

[jonteferm]

On 2017-01-03 at 8:02 PM, drhayes said:

What version of Phaser are you using? The params switched sometime between 2.4.2 and 2.6. In 2.6 the docs for AnimationManager.stop say the second param is "resetFrame": "When the animation is stopped should the currentFrame be set to the first frame of the animation (true) or paused on the last frame displayed (false) (defaults to false)". Just wondering if that's messing things up, too.

I'm using 4.7. Seems like it is the same params. But hey, I solved it. By just removing that damned else condition and adding this instead:

this.events.onAnimationComplete.add(function(){			
	this.animations.stop(true, true);	
}, this);

Thanks for looking into this!