2D character tile based movement problem

Question

I am making a Super Mario like 2D platformer and I've encountered a problem. I need to move this sprite :

When a player presses the right key, the sprite moves by 32 px to the right. The process of moving the sprite is as follows :

• The sprite begins in a StandingIdleFirstStep state (Image 1).
• Then the sprite enters a transition state (Image 2). The sprite is moved by 16 px to the right. This state is visible for 256 ms.
• Finally, the sprite ends the movement in a StandingIdleSecondStep and has moved 32 px from its starting position (Image 3 - first and third step images differ).

During this entire process, the user cannot interact with the sprite. I can feed the process with a approx. 30 ms delta per frame.

Currently I'm thinking about this solution :

1. User presses move right
2. Set moving flag to true
3. Move sprite by x+=16 px.
4. Update sprite animation
5. Draw everything

(after 256 ms)

1. Check if currentAnimationImageIndex % 2 == 1.
2. If true (odd image, can't stop there), move sprite by another x+=16 px.
3. Update sprite animation
4. Draw everything
5. Set moving flag to false

Answer 1

Try thinking this way:

UI thread:

1. User presses move right
2. Set moving flag to true

Game Loop Thread, measure elapsed time between updates

1. show current character sprite frame
2. if moving add elapsed time to total animation time, else show frame 1
3. if animation time < 256ms show frame 2, if animation time > 256ms show frame 3 (ando so on for longer walk)
4. update sprite position by distance (if it moves 128 pixels per second, move it 128 * elapsed time in seconds)
5. perform checks
6. draw everything

---

Don't try to do everything in one thread, don't let UI or waiting for another frame block the whole game.