Sign in to follow this  
Batzi

Move player diagonally (animation not working)

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.)

Share this post


Link to post
Share on other sites

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). 

Share this post


Link to post
Share on other sites

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");    }  }   }

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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;} 

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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();

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.