Move player diagonally (animation not working)

[Batzi]

I am trying to move my player diagonally when I press down the 'up' & 'left' arrow keys.

 

My current code is this

this.moved = false;            if (this.cursors.up.isDown) {                this.moved = true;                this.player.body.velocity.y -= 100;                this.player.play('up');            } if (this.cursors.down.isDown) {                this.moved = true;                this.player.body.velocity.y += 100;                this.player.play('down');            } if (this.cursors.left.isDown) {                this.moved = true;                this.player.body.velocity.x -= 100;                this.player.play('left');            } if (this.cursors.right.isDown) {                this.moved = true;                this.player.body.velocity.x += 100;                this.player.play('right');            }            if (!this.moved)                this.player.animations.stop();

Now if I add the following

if(this.cursors.left.isDown && this.cursors.up.isDown){  this.moved = true;  this.player.play('upLeft');}

and I press down the 'up' and 'left' keys, the player goes up (x=-100 & y=-100) which is what I want however, the animation does not work! It switches to the first frame of that animation but it stops after. So you will see a player sliding diagonally.

 

It might be the "this.player.animations.stop()" that is getting in the way but I can't figure it out. Is there something I am not seeing?

[chongdashu]

I assume that when it is working for non-diagonal movements?

 

If so, I think it is a result of the update() method calling this.player.animations.play('left'); followed by this.animations.player.play('up'); 

 

This would keep starting the first frame of each animation, thus, resulting in what you see.

 

To resolve this, it depends on what your desired result should be? Should it just take the animation of the last key press? Or do you have a specific diagonal movement animations (e.g., "left-up", "left-down", etc.)

[Batzi]

I assume that when it is working for non-diagonal movements?

 

If so, I think it is a result of the update() method calling this.player.animations.play('left'); followed by this.animations.player.play('up'); 

 

This would keep starting the first frame of each animation, thus, resulting in what you see.

 

To resolve this, it depends on what your desired result should be? Should it just take the animation of the last key press? Or do you have a specific diagonal movement animations (e.g., "left-up", "left-down", etc.)

I have a specific diagonal movement animation called 'upLeft'.

 

So basically when you click the 'left' & 'up' regardless of the order, it should do the 'upLeft' animation.

 

To answer your first question, it is working for non-diagonal movements (the animations). 

[chongdashu]

If that's the case, you could instead play the animations based on the velocity of the player body - as opposed to the key presses.

this.moved = false;

if (this.cursors.up.isDown) {    this.moved = true;    this.player.body.velocity.y -= 100;} if (this.cursors.down.isDown) {    this.moved = true;    this.player.body.velocity.y += 100;}if (this.cursors.left.isDown) {  this.moved = true;  this.player.body.velocity.x -= 100;} if (this.cursors.right.isDown) {  this.moved = true;  this.player.body.velocity.x += 100;  }if (this.player.body.velocity.x !== 0 && this.player.body.velocity.y !== 0) {   // diagonal movement    if (this.player.body.velocity.x > 0 && this.player.body.velocity.y > 0) {      this.player.animations.play("down-right");   }   // ... continued   }else {   // axis-aligned movement​     if (this.player.body.velocity.y == 0) {      // horizontal movement             if (this.player.body.velocity.x > 0) {        this.player.animations.play("right")      }      else if (this.player.body.velocity.x < 0) {        this.player.animations.play("left");      }   }  if (this.player.body.velocity.x == 0) {    // vertical movement        if (this.player.body.velocity.y > 0) {      this.player.animations.play("down");    }    else if (this.player.body.velocity < 0) {      this.player.animations.play("up");    }  }   }

[Batzi]

 

If that's the case, you could instead play the animations based on the velocity of the player body - as opposed to the key presses.

this.moved = false;

if (this.cursors.up.isDown) {    this.moved = true;    this.player.body.velocity.y -= 100;} if (this.cursors.down.isDown) {    this.moved = true;    this.player.body.velocity.y += 100;}if (this.cursors.left.isDown) {  this.moved = true;  this.player.body.velocity.x -= 100;} if (this.cursors.right.isDown) {  this.moved = true;  this.player.body.velocity.x += 100;  }if (this.player.body.velocity.x !== 0 && this.player.body.velocity.y !== 0) {   // diagonal movement    if (this.player.body.velocity.x > 0 && this.player.body.velocity.y > 0) {      this.player.animations.play("down-right");   }   // ... continued   }else {   // axis-aligned movement​     if (this.player.body.velocity.y == 0) {      // horizontal movement             if (this.player.body.velocity.x > 0) {        this.player.animations.play("right")      }      else if (this.player.body.velocity.x < 0) {        this.player.animations.play("left");      }   }  if (this.player.body.velocity.x == 0) {    // vertical movement        if (this.player.body.velocity.y > 0) {      this.player.animations.play("down");    }    else if (this.player.body.velocity < 0) {      this.player.animations.play("up");    }  }   }

 

I was going for that approach then I noticed that resetting the velocity in the update was messing with the animations too

this.player.body.velocity.set(0, 0);

removing this obviously would make it work but then the velocity would exponentially increase/decrease and your player will become faster then the speed of light.

[Skeptron]

That is why you should NOT increase/decrease velocity. You should have it constant, and use acceleration instead.

 

So : this.player.body.velocity.x = 100;  

and not : this.player.body.velocity.x += 100;  

[Batzi]

That is why you should NOT increase/decrease velocity. You should have it constant, and use acceleration instead.

 

So : this.player.body.velocity.x = 100;  

and not : this.player.body.velocity.x += 100;  

Where woud you reset the velocity?

[chongdashu]

Where woud you reset the velocity?

 

 

What @skeptron is suggesting isn't suggesting against resetting velocity -- but rather, you should not be setting your velocity by incrementing it.

this.player.velocity.set(0,0);// .. more stuffif (this.cursors.up.isDown) {    this.moved = true;    // this is causing a deceleration here    // so you might end up with the wrong velocity if you hold down your button for too long    this.player.body.velocity.y -= 100;} 

this.player.velocity.set(0,0);// ..if (this.cursors.up.isDown) {    this.moved = true;    // just set the velocity, it will only ever be -100, and not any less    this.player.body.velocity.y = -100;} 

[Batzi]

 

What @skeptron is suggesting isn't suggesting against resetting velocity -- but rather, you should not be setting your velocity by incrementing it.

this.player.velocity.set(0,0);// .. more stuffif (this.cursors.up.isDown) {    this.moved = true;    // this is causing a deceleration here    // so you might end up with the wrong velocity if you hold down your button for too long    this.player.body.velocity.y -= 100;} 

this.player.velocity.set(0,0);// ..if (this.cursors.up.isDown) {    this.moved = true;    // just set the velocity, it will only ever be -100, and not any less    this.player.body.velocity.y = -100;} 

Resetting the velocity this way is causing all the animations not to work. :S If I remove the reset, the animations start working but obviously the player won't stop moving.

[Batzi]

Ok I fixed the velocity problem and I will share the code momentarily with a demo video showing how it works.

 

Thank you guys!

[chongdashu]

I suspect that the animations going weird has nothing to do with the resetting of the velocity, but the logic running multiple animations.start(animation_name) in the same update() run. If you post the code you have, we can work off from there. Otherwise, I'll try to get a working example running later today.

[Batzi]

I suspect that the animations going weird has nothing to do with the resetting of the velocity, but the logic running multiple animations.start(animation_name) in the same update() run. If you post the code you have, we can work off from there. Otherwise, I'll try to get a working example running later today.

It was the velocity reset that was not wrapped under a condition   That was my work around

            if (this.player.body.velocity.y == 0) {                if (this.player.body.velocity.x < 0) {                    this.player.play('left');                }                else if (this.player.body.velocity.x > 0) {                    this.player.play('right');                }                this.player.body.velocity.x=0;            }            if (this.player.body.velocity.x == 0) {                if (this.player.body.velocity.y < 0) {                    this.player.play('up');                }                else if (this.player.body.velocity.y > 0) {                    this.player.play('down');                }                this.player.body.velocity.y=0;            }            if (this.player.body.velocity.x !== 0 && this.player.body.velocity.y !== 0) {                if (this.player.body.velocity.x < 0 && this.player.body.velocity.y < 0) {                    this.player.play("upLeft");                } else if (this.player.body.velocity.x > 0 && this.player.body.velocity.y > 0) {                    this.player.play("downRight");                } else if (this.player.body.velocity.x > 0 && this.player.body.velocity.y < 0) {                    this.player.play("upRight");                } else if (this.player.body.velocity.x < 0 && this.player.body.velocity.y > 0) {                    this.player.play("downLeft");                }                this.player.body.velocity.set(0, 0);            }            if (this.cursors.left.isDown) {                this.moved = true;                this.player.body.velocity.x = -100;            }            if (this.cursors.right.isDown) {                this.moved = true;                this.player.body.velocity.x = 100;            }            if (this.cursors.up.isDown) {                this.moved = true;                this.player.body.velocity.y = -100;            }            if (this.cursors.down.isDown) {                this.moved = true;                this.player.body.velocity.y = 100;            }            if (!this.moved)                this.player.animations.stop();

[chongdashu]

Just checking, is it all working fine now? Or is there still something that needs a looks?

[Batzi]

Just checking, is it all working fine now? Or is there still something that needs a looks?

All good! Thank you for the suggestions!