Jump to content

How to handle animations vs user input


ste2425
 Share

Recommended Posts

Hi guys n gals

 

I'm new to Phaser so go easy. I've been working with NodeJs and AngularJs for a few years then i came across Phaser and was extremely interested which lead me to this project. My project is to attempt to re-create my all-time favourite game Abe's Oddysee (I know jump in the deep end). So ive built a texture atlas for abe with all his different movements, walking, running, jumping up/forward, turning, rolling forward etc. 

 

Now these animations are triggered by different key presses however when one animation needs to change to another the current animation just stops and the next plays. In the real game there a transitions between these actions so when turning left from facing right, first a turning animation is played, when stopping abe comes to a halt rather then the walking animation just stopping etc. 

 

So my question is rather open ended and more a general what's best practice, but how do i handle these transition animations? Currently my controls are linked directly to playing specific animations. I realise i need to decouple these so the input says i wan't to turn right but there is something else that handles any required animations before the walking right animation is played. Is there some framework/practice that is usually followed to accomplish this or does it vary and is down to user specific implementations? 

 

Any advice would be extremely appreciated.

 

The code below is a very basic example of how I'm calling my animations.

var cursors = game.input.keyboard.createCursorKeys();if (cursors.left.isDown) {    game.player.animations.play('walkingL');} else if (cursors.right.isDown) {    game.player.animations.play('walkingR');}//In my update function

Thanks all Stephen.

Link to comment
Share on other sites

This is down to your implementation. I guess I'd approach this by controlling your character with velocity so there's some inertia to the character's movement, and then base your animations on the character's velocity and the intent derived from the inputs. For example, if the the left input is being pressed AND the character's velocity is negative on the x axis, play your run left animation; if the player lets go of the key or presses right, play a 'skid to a halt' animation facing left and let the drag (body.drag property) or the opposing directional velocity bring the character to a halt. If the character's x velocity is 0 AND no inputs are held, play a standing idle animation (you could add more here for velocity 0 with a direction held to do a 'pushing against a wall' animation too). As soon as the character starts moving in a direction again (its x velocity is != 0 and left/right input is held) you can start playing the appropriate running animation for that direction. Hope that makes sense!

Link to comment
Share on other sites

This is down to your implementation. I guess I'd approach this by controlling your character with velocity so there's some inertia to the character's movement, and then base your animations on the character's velocity and the intent derived from the inputs. For example, if the the left input is being pressed AND the character's velocity is negative on the x axis, play your run left animation; if the player lets go of the key or presses right, play a 'skid to a halt' animation facing left and let the drag (body.drag property) or the opposing directional velocity bring the character to a halt. If the character's x velocity is 0 AND no inputs are held, play a standing idle animation (you could add more here for velocity 0 with a direction held to do a 'pushing against a wall' animation too). As soon as the character starts moving in a direction again (its x velocity is != 0 and left/right input is held) you can start playing the appropriate running animation for that direction. Hope that makes sense!

 

It certainly does make sense :)

 

Since waiting for this post to be moderated I had a go at throwing together my own implementation so I'm glad i don't have to throw all that away. I created my own 'player' class which has a set of state flags. I currently haven't implemented any movement yet so no inertia or drag etc. However my input says i want to walk left but i check my flags to see what my character is already doing, then the playing animation depends on that. So i kind of follow the same idea but it stead of controlling it though my players current inertia drag etc i use flags. This works quite well and my focus at the moment is just trying to get the different animations transitioning smoothly depending on user input. Then i will plugin physical movement. Hopefully this state system can be extended and used when movement is added but for things like walking into a wall velocity will certainly be monitored also. (Wouldn't have thought of that at this time so thanks).

 

Stephen

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