Jump to content

Exact walking animation


Recommended Posts

Hi Phaser practitioners,


I am trying to achieve a very exact walking animation, something like the old school Manic Miner game:

With every frame (effectively with every RIGHT key press - quick), you move an exact number of pixels. For example, I have 4 frames to walk right.

  • Frame 0
  • Frame 1: + 4 pixels
  • Frame 2: + 8 pixels
  • Frame 3: + 12 pixels

I want to avoid the "Michael Jackson" slipping effect, if you understand what I mean.

I can set my sprite's velocity, I can set my onUpdate function, I can specify the sprite's animation frequency... However, with every RIGHT key press, I would like to walk exactly 4 pixels and change my animation frame++.

This example shows, that you move right by slipping in-between frames:


Attached are Manic Miner's animation frames.


Any idea how to accomplish this task?

Thank you!







Link to comment
Share on other sites

Hi jjcale!

I'm not exactly sure how you want the character to move, but it seems like you would like to take the animation out of Phaser's hands. Maybe you could try manually changing the frame. Here's some pseudo code to get my point across.

number_of_right_walk_frames = 4
pixel_step_size = 4
if (right_arrow_key_is_Down) {
    player.x += pixel_step_size
    if (player.frame !== number_of_right_walk_frames - 1) {
        player.frame += 1
    else {
        player.frame = 0

Is this what you're looking for? Or, am I misunderstanding?

Link to comment
Share on other sites

12 hours ago, samme said:

// @create ->
animRight = player.animations.add("right", [0, 1, 2, 3]);
// etc.

// @key.onUp -> 
player.animations.currentAnim = animRight;


Ooo, I like that next() method. Cleaner and more Phaserish than my if-else.

4 hours ago, jjcale said:

I was pondering over this approach -- being in full frame control. Now how would I manage collisions and overlaps? This way I could easily get off the map and/or collide with wall objects. I would be missing out arcade physics. I would have to mimic jumps, etc.

I'm pretty sure the physics will be completely independent of the animation technique you use. i.e., you wouldn't be missing out on arcade physics.

This example uses arcade physics without any animations involved: https://github.com/photonstorm/phaser-examples/blob/master/examples/arcade physics/one way collision.js.

Link to comment
Share on other sites

Seems interesting, I need to check how this works:

Say the player is 2 pixels from the wall (no collision) and I move the player right 4 pixels (new position  - touching the wall with 2 pixels). But then the collision/overlap function will fire up, but the player's position has already been updated :-(. Tricky.

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.

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.


  • Recently Browsing   0 members

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