Sprite doesn't animate while tweening

[MelSmits]

Are these two things not meant to be used together? 

The animation worked when I was using moveToXY, but using that function I found I couldn't easily stop the movement so after googling and searching this forum I decided to move to tweening. The object won't need physics in the future, so it should be fine. 

Here's what I have. 
The function is passed a value 'i', which is a random number. This is meant to determine how far it should move. 
'j' is the calculated target destination. Current x + i. 
The tween should take longer if the distance is further, not some constant amount of time, hence the (npc.x-j)*3000.

		function wanderRight(i){
			j = npc.x + i;
			npc.animations.play('right');

			game.add.tween(npc).to( {x: j},(npc.x - j)*3000, null ,true);
		
		}

When this function has completed, it moves on to:

	npc.animations.stop();
	npc.frame = 4;	

4 being the 'face forward' frame. I feel like this should work. 

What happens is that the npc does move to the right, like it should. Only it's not animating while it moves. It just stays on the frame it was on before the tween started. 

Can someone explain why this doesn't work? 

[MelSmits]

Anyone? 

Could it be something to do with the "j" variable? Could I avoid using it somehow then? 

[gnoof]

Hey there.

You say it stops the animation "When this function has completed".

As JavaScript is asynchronous, could it possibly be that the code to stop your animation is running immediately, rather than waiting for your tween to finish?

I think what you might need is the tween onCompleteCallback function.

e.g.

tween.onComplete.add(stopAnimation, this);

 

[MelSmits]

Thanks! I'm more used to Java, so I had it all linear in my head! I'll try it out. 

 

[MelSmits]

		function wanderLeft(i){
			j = npc.x - i;
			npc.animations.play('left');

			tweenLeft = game.add.tween(npc).to( {x: j},(npc.x - j)*3000,null,true);
			tweenLeft.onComplete.add(stopAnimation, this);
		
		}

Now the code is like this. And in the listener is the npc.animation.stop(); and the frame = 4 bit.

The animation plays! But it doesn't stop. :S At least it's progress. 

Also I think turning off the body.moves for the tweening made the npc not collide with world boundaries anymore? At least he sometimes just zooms off the side of the screen, but I'll deal with that when the animation is fixed. 

[MelSmits]

Got it working, there was a type. Thanks loads! 

[gnoof]

Cool, glad you got it working!

[danwguy]

I know this was a while ago, but I am having a similar issue. I have a "player" and an "enemy". When the player and the enemy overlap, the player "eats" the enemy. seems simple enough, but what is happening is, they overlap, the player animation starts, but only goes to the first frame, then pauses, then the enemy tween starts, finishes, then the player animation continues. So they aren't happening at the same time like I need them to.

Here is the code I have...

update() {
    this.game.physics.arcade.overlap(this.player, this.enemy, this.eatEnemy, null, this);
}

eatEnemy(player, enemy) {
        this.playerIsEating = true;
		this.enemy.animations.stop();
		this.player.animations.stop();
		this.enemy.frame = 2;
		this.player.animations.play('eat');
		this.game.add.tween(this.enemy).to({y: (this.game.world.height - 200)}, 600, Phaser.Easing.Linear.None, true);
		this.timer = setTimeout(() => {
			this.enemy.kill();
			console.log('playing blood splatter');
			this.bloodSplatter.animations.stop();
			this.bloodSplatter.alpha = 1;
			this.bloodSplatter.position.x = this.enemy.position.x;
			this.bloodSplatter.position.y = this.enemy.position.y;
			this.bloodSplatter.animations.play('spray');
			this.playerIsEating = false;
		}, 600);
}

So, what is supposed to happen is, they overlap, the player animation starts, while that is animating the enemy gets tweened to the players mouth, then once there the blood splatter happens and the enemy is killed.

 

But like I said, they overlap, then everything pauses while the enemy is tweened up, once the tween is done the player and blood animate. 

 

I know that using setTimeout will make the blood splatter wait until then to start, but my player animation is before the tween, yet the player just stands there until the tween is done, then he animates. Is there any way to animate a player while the enemy is being tweened? Thank you guys, I really don't mean to hijack your post at all, I just thought starting a new post for the same problem was not smart. 

[drhayes]

I bet your this.eatEnemy method is getting called every frame. What you're seeing is the first frame of the player's "eat" animation because you're playing it over and over again.

Since you've already set the playerIsEating flag, maybe you should put a "if (this.playerIsEating) return;" statement at the beginning of eatEnemy. Should clear that right up.

I noticed you're using setTimeout. That's fine, it'll work, but it won't pause when the game pauses, like if the user focuses away from the page. Not sure if that's what you wanted. If not, try looking at Phaser.Timers instead. You could also set it as an addOnce on the animation complete signal of your player.