How to make the player do small / medium / long jumps?

[toto88x]

Hi,

 

I'm building a mario like. Right now I'm doing this to make the player jump:

if (cursor.up.isDown && player.body.touching.down)        player.body.velocity.y = -100;

It's simple, and it works. What I'm trying to do now is to make the player do small / medium / long jumps, depending on how long the player press on the up arrow key. And I'm not sure what's the best way to do this. Any idea?

 

Thanks! 

[Pixelguy]

I'm still new to phaser so there is most likely a better way of doing this..
 
Quick and messy but this should work:
In the preload():

var timer = 0;var loadingJump = false;

In update()

    if (cursors.up.isDown && player.body.touching.down) {        loadingJump = true;        timer += game.time.elapsed; // time is in ms                    } else if (loadingJump == true) {                    if (timer < 300) {                // small jump                player.body.velocity.y = -150;            }            else if (timer < 600) {                 // medium jump                player.body.velocity.y = -250;            }            else if (timer > 600) {                // longjump                player.body.velocity.y = -350;            }            loadingJump = false;            timer = 0;        }

Edit: changed the timing

[toto88x]

Thanks! But I dont want the player to hold a key, and after see the player jump.

 

I want to make it like mario: while the button is pressed, the player jump. And depending on how long the button is pressed, the player will jump more or less high.

 

With your code:

1) if (cursors.up.isDown && player.body.touching.down), will be true only before the player jumps (when it touches the ground)

2) if (timer < 600), we cannot know in advance if the player is going for a medium jump 

 

Thanks!

[Jorasso]

I think that if you will modify the gravity:

1. Player started jump and holds his finger on the screen then gravity is 0.5 of normal garvity

2. Player released his finger then back gravity to the normal value

 

Then effect should be close to what you want to achieve. Sorry that I can't give you code example in Phaser but I am not familiar with it:)

[Pixelguy]

Ah okay now I understand what you want.

 

My old code lets the player "charge" a jump while standing on the ground. Upon release the jump is executed based on how long the button was pressed.

 

----

 

You want to change the gravity for your longer jumps while holding the jump key after the initial jump.

Again quick working code based on my limited knowledge about the engine:

 

preload():

var globalGravity = 9; // or any value you needvar playerJumped = false;

update():

    if (cursors.up.isDown && player.body.touching.down) {        //  Allow the player to jump if they are touching the ground.        player.body.velocity.y = -200;        playerJumped = true;            } else if (cursors.up.isDown && playerJumped == true )  {          // reduce players gravity if player recently jumped and jump key is down         player.body.gravity.y = globalGravity - 4;    } else {        // reset gravity once the jump key is released to prevent prolongation        playerJumped = false;        player.body.gravity.y = globalGravity;    }

Here is a working example:

https://dl.dropboxusercontent.com/u/7910081/html5examples/longjump/longjump.html

 

Edit: Jorasso beat me to it

[toto88x]

Thanks a lot! I'll try that. But what is the advantage of changing the gravity instead of changing the velocity?

[Pixelguy]

Setting the velocity is not impossible by any means but a bit awkward to do.

You would have to compute a velocity bleed by yourself the longer the jump persists instead of letting the physics engine do the work.

 

At least I think it's the best way altering the gravity.

Please correct me if I'm wrong

[jpdev]

I have another solution, it goes like this:

 

        var jumptimer = 0;

 

        function update() {

            if (cursors.up.isDown && player.body.touching.down)

            {   //player is on the ground, so he is allowed to start a jump

                jumptimer = 1;

                player.body.velocity.y = -250;

            } else if (cursors.up.isDown && (jumptimer != 0))

            { //player is no longer on the ground, but is still holding the jump key

                if (jumptimer > 30) { // player has been holding jump for over 30 frames, it's time to stop him

                    jumptimer = 0;

                } else { // player is allowed to jump higher (not yet 30 frames of jumping)

                    jumptimer++;

                    player.body.velocity.y = -250;

                }

            } else if (jumptimer != 0) { //reset jumptimer since the player is no longer holding the jump key

                jumptimer = 0;

            }

}

 

With this code (and a gravity of 9.8) my Player sprites jumps ~70 pixels high when you just quickly press jump.

If you hold jump, he does jump around 4 times as high. You can adjust by limiting the jump timer to more or less then 30 frames.

[jcs]

currently I'm doing something roughly similar. I use finite state machines to track & control sprite's behaviour. when the player sprite is in a 'jumping' state, but the jump key is no longer being held, I reduce the sprites velocity slowly (halve it each update, actually). when it reaches (more accurately when it closely approaches) zero, the sprite's state changes to 'falling'. yes, this circumvents the physics engine to some extent, but it gets me the 'feel' to the controls that I wanted.

 

the problem with all the approaches shown, including mine, is that the distance that the sprite can jump changes with the frame-rate of the game. if you depend on the sprite being able to jump a certain height to clear game obstacles, this can be a major problem - even a high-powered desktop machine will occasionally drop frames. the right way to do it would be to modify gravity or velocity based on the game time elapsed, not the number of frames.

[jpdev]

jcs, you are correct.

 

I wasn't sure of this - I thought maybe on dropping framerate only the drawing functions gets dropped (is called less), but you are right, the "update" method is called less too.

 

here is my test:

 

http://janpeter.net/alien/speedtest/speedtest2.html - 2 sprites running, one velocity 60, the other x+1 each tick

 

http://janpeter.net/alien/speedtest/speedtest.html - 2 sprites running, one velocity 60, the other x+1 each tick - SAME CODE WITH MORE Sprites "watching" (e.g. with lag)

 

So it's true, we can't rely on a counter for our jump-timing.

 

I will instead try to do it with game.time when I have a solution.

[jpdev]

This yields way better results in jumping while lagging.

 

It is not 100% - if the lags are so heavy, that the physics engine moves the player too far without calling update() he jumps higher than intended - but: at maximum this has the error of the movement that occurs between two frames, instead of having the error of all dropped frames while doing the jump (as the simple counter solution has).

 

        var jumptimer = 0;

 

        function update() {

            if (cursors.up.isDown && player.body.touching.down)

            {   //player is on the ground, so he is allowed to start a jump

                jumptimer = game.time.time;

                player.body.velocity.y = -250;

            } else if (cursors.up.isDown && (jumptimer != 0))

            { //player is no longer on the ground, but is still holding the jump key

                if (jumptimer > 600) { // player has been holding jump for over 600 millliseconds, it's time to stop him

                    jumptimer = 0;

                } else { // player is allowed to jump higher, not yet 600 milliseconds of jumping

                    player.body.velocity.y = -250;

                }

            } else if (jumptimer != 0) { //reset jumptimer since the player is no longer holding the jump key

                jumptimer = 0;

            }

}

 

 

I have just tested this in my jump and run (by adding lag with 5000 sprites).

Results are as expected.

Old Counter solution: You can jump as high as you want, because you have 30 frames to jump.. and framerate is low, so physics covers alot of ground in 30 frames

New Game.time.time Solution: You don't notice a difference, you lag, but you jump just as high as without the lag.

[Heppell08]

 

This yields way better results in jumping while lagging.

 

It is not 100% - if the lags are so heavy, that the physics engine moves the player too far without calling update() he jumps higher than intended - but: at maximum this has the error of the movement that occurs between two frames, instead of having the error of all dropped frames while doing the jump (as the simple counter solution has).

 

        var jumptimer = 0;

 

        function update() {

            if (cursors.up.isDown && player.body.touching.down)

            {   //player is on the ground, so he is allowed to start a jump

                jumptimer = game.time.time;

                player.body.velocity.y = -250;

            } else if (cursors.up.isDown && (jumptimer != 0))

            { //player is no longer on the ground, but is still holding the jump key

                if (jumptimer > 600) { // player has been holding jump for over 600 millliseconds, it's time to stop him

                    jumptimer = 0;

                } else { // player is allowed to jump higher, not yet 600 milliseconds of jumping

                    player.body.velocity.y = -250;

                }

            } else if (jumptimer != 0) { //reset jumptimer since the player is no longer holding the jump key

                jumptimer = 0;

            }

}

 

 

I have just tested this in my jump and run (by adding lag with 5000 sprites).

Results are as expected.

Old Counter solution: You can jump as high as you want, because you have 30 frames to jump.. and framerate is low, so physics covers alot of ground in 30 frames

New Game.time.time Solution: You don't notice a difference, you lag, but you jump just as high as without the lag.

 

 

This is exactly what i needed! Thanks

[Andrew Chen]

its awesome 

[houbzdawuzz]

Hello everyone, 

Was wondering if someone found a solution for this specific problem on phaser 3, cause if we call the stage.time method in the update function, the time will update everyframe so it wont work at all.

 

Thx

[wilmarzop]

I want to make it like mario: while the button is pressed, the player jump. And depending on how long the button is pressed, the player will jump more or less high.