When I want to draw my character moving from one tile to another, I would find the displacement vector between two tile's drawing offset and let the character walk in a linear line toward that direction until it complete this displacement vector. Now, I want to make my character jump from higher/lower tile to lower/higher tile. I have a drawing location (x,y) for the texture, start and end. However, I want it to motion like a projectile, not a linear line. Therefore, given 2 point, start and end point, how would I motion my character in a jumping motion form (maybe it's a parabolic form)?


1 Answer 1


From what I gather, your character movement is on tiles only, and you have a fixed animation length, something like a Tactics game?

What I would then do is to simulate a stationary jump, and combine it with the existing walking logic. Implement a simple gravity system, if you haven't already. When you want the character to jump, you simply give him an certain upward velocity vector negative to the gravity vector, and on each frame, subtract the gravity vector from a character's speed vector, until the character hits the ground again. Now you have a natural-looking parabolic jump made easy, because that's basically how it works in real life (under Newtonian laws).

Now, to jump from tile to tile, the moment you start jumping, apply the forward (horizontal) movement as you already can do. Displace the character sprite by the same vector as without jumping, and at the same time, also displace him according to a static upward jump, depending on his current upward vector. The jump and move displacement should combine to a natural-looking forward jump without fancy algorithms.

Of course, you need to take into account the height difference between the starting and end tile. If the character jumps up, you need to give him enough initial velocity to get there, enough to reach a height of, say, the difference + 1 height units. When jumping down or on even ground, jump up 1 height unit before falling down. So now the duration of the jump animation depends on the height difference.

Next, you need to make the duration of the forward movement dependent on the duration of the vertical movement. A long vertical jump takes a longer time to complete than a short vertical jump across the same horizontal distance, obviously, so your forward movement must not be constant, or you will typically overshoot. For a spot landing, it must always match the duration of the jump*. If you haven't already, you therefore need to extend your movement function with a duration parameter.

*Exception 1: For simulating a cool "slide" after landing, don't simply end your animation with a stop, but take the idea of gravity further by implementing a friction vector, which is basically "gravity for horizontal movement". Give your character a vertical and a horizontal movement vector. Ignore gravity while the character is on the ground, and ignore friction while the character is airborne or walking. Apply friction to the horizontal velocity as soon as the character lands from a jump, so his horizontal movement will continue, but slowing down until it reaches zero.

*Exception 2: If you want to simulate a jump against a wall, just reduce the upward and forward component velocity to zero the instant you hit a wall, and then let gravity do its work.

  • \$\begingroup\$ I did hardcode some sort of gravity (for testing purpose), and it did work. However, there is one minor problem, that is I used a predefine jumping time. However, as height get higher, the jumping time should increase. Therefore, I made a workaround which simply increase jumping time by linear factor as height get higher. This work well for height less than 15-20 blocks. Because more blocks than that seems too unrealistic, therefore, it is a well paid solution. \$\endgroup\$
    – user1542
    May 18, 2012 at 9:43
  • \$\begingroup\$ @user1542 Glad to hear it worked out! \$\endgroup\$
    – Hackworth
    May 18, 2012 at 16:46
  • \$\begingroup\$ @Hackworth, any chance you can give a JavaScript snippet for your explanation? \$\endgroup\$
    – true. lion
    Dec 9, 2019 at 19:02
  • \$\begingroup\$ @true.lion No, I don't know javascript. \$\endgroup\$
    – Hackworth
    Dec 9, 2019 at 21:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .