Playing an Idle Animation

[gnarf]

Hi,

 

I'm working on a simple platformer and I'm trying to get the player to play his idle animation when a timer reaches 0. I looked at the Basic Repeat Event example to get a sense of things. I tried two ways but didn't get the correct results.

 

V1: Sprite will flicker with the first frame of the idle animation, but does not play it through.

function create() {     player.animations.add('idle', [4, 15], 10, false);     game.time.events.repeat(Phaser.Timer.SECOND * 2.5, 10, idleAnim, this);}function idleAnim() {     if (player.body.velocity.x === 0 && player.body.touching.down) {          player.animations.play('idle');     }}

V2: After the timer ticks, nothing happens until I move my character left or right, in which case, he gets stuck in the first frame of the idle.

var goIdle = 0;function create() {     player.animations.add('idle', [4, 15], 10, false);     game.time.events.repeat(Phaser.Timer.SECOND * 2.5, 10, idleAnim, this);}function idleAnim() {     if (player.body.velocity.x === 0 && player.body.touching.down) {          goIdle = 1;     } else goIdle = 0;}function update() {     if (goIdle === 1) {          player.animations.play('idle');     };

I feel like I'm missing something totally obvious. Also, as a side note, does the repeat function need to have a repeat count? Could I leave that out if I wanted it to tick infinitely?

 

Thanks!

[tips4design]

What are you trying to do? If you're going to loop the animation why don't you use the loop parameter in the animation constructor? http://phaser.io/docs/2.4.4/Phaser.Animation.html

 

So, in your case I think it is: 

player.animations.add('idle', [4, 15], 10,  true);

 

 

Or your problem is only related to when to start playing the animation?

[gnarf]

Yeah, sorry, I should have been more clear. I want the idle to play every 2.5 seconds if the player isn't moving at all, not to loop constantly. But that makes me wonder, is there a way to check when an animation is complete?

[drhayes]

There is: animations have a signal called onComplete.

 

The tricky thing about animations is that if you call play('one') then immediately call play('two') then call play('one') again, you'll just keep seeing the first frames of each animation over and over. I'd handle this with some kind of state machine rather than timers. Or, maybe not timers at all but a count that increments when the player is idle?

[MichaelD]

I would do player.animations.stop(); player.animations.play("idle"); player.animations.currentAnim.onComplete(function(){ // do something or add timer });

[chongdashu]

player.animations.add('idle', [4, 15], 10, false);

 

Your idle animation is only two frames? As a 2-frame animation at 10FPS. This means that your entire animation will be over in 200ms (so it will look like it's flickering). This is really, really quick.

 

game.time.events.repeat(Phaser.Timer.SECOND * 2.5, 10, idleAnim, this);

 

This basically means that every 2.5 seconds, you will play a really quick 200ms animation. Are you sure you are not just missing it? Why not try to make your animation a little slower (e.g., player.animations.add("idle", [4,15], 2, false)). You should be able to better assess whether it's the timer that's the problem, or your animation (I suspect it's the latter)