Jump to content

Move player diagonally (animation not working)


Batzi
 Share

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?

Link to comment
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.)

Link to comment
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). 

Link to comment
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");    }  }   }
Link to comment
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.

Link to comment
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?

Link to comment
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;} 
Link to comment
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.

Link to comment
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();
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...