Forums » Help » 2D Scrolling Platformer Jumping

This thread should be named 2.5D Scrolling Platformer Jumping, but I don't think I can edit.

I would like to know how to get the player to jump as in popular 2D side scrollers with Impact's built in jump physics. So far, I have had to turn gravity off to keep the player from sliding down the map.

Today, I tried turning the gravity back on and playing with the code again. Now, I can get the player to jump, but they barely get any velocity so the jump looks tiny. Well, I can't even really tell if it's a jump, bc it barely move the player.

Focusing on the code that is surrounded in slashes... NOT setting this.vel.y=0 allows the player to jump...but...

EDIT: I got it narrowed down to this bit of code. Now the player can jump, but they can't go up, and they continue to slide down.

EDIT (6/16/12): I will keep the script here so it is always updated. Thanks for the help you guys! I'm excited to expand on this.

https://gist.github.com/2942094

i am also noticing that you can't jump while running anymore as in the biolabs example.

hmmmmm... how would you draw the collision layer under the player each time they change Y by walking???

just guessing:

if zlevel = 2
and collision tile zlevel = 2
collision = true

you need to look at gravity, gravityfactor and friction, maybe?

I've been playing with all of the above. If you take out gravity then you can't use the standing boolean variable which the jump relies on.

The only way to get the up direction to work is by turning off gravity and increasing the Y. So then Y needs to become 0 again for the entity to come to rest. But you can't keep Y at 0 when falling bc it will never look like it is jumping or falling.


With gravity on it says that the entity is falling because standing=false until it hits a collision tile.

I don't know... seems like you would need to juggle between the two states of gravity on and off and draw a collision map underneath the player when Y changes, but not when jumping. But then you may not be able to ever walk down.

I'm a little new to impact.js and that may not even be possible. Or I could even be going about it all wrong...

It depends on how floaty you want your game to feel, but typically gravity should be at least 100. Your jump vel should be about half your gravity.

It's likely your issue is that you're not setting your jump vel high enough. Also check your .maxVel, make sure the default 100 isn't limiting your jump.

Here are the current settings.

main.js
gravity:200;

player.js

speed:140,
		
gravityFactor:0,
		
		
//Physics
maxVel: {x: 100, y: 200},
friction: {x: 600, y: 0},
accelGround: 400,
accelAir: 400,
jump: 3000,

When you jump the y velocity is set back 0 immediately to handle the up and down inputs. If you don't set the y vel back to 0 then you can't walk up and down.

gravityFactor is the culprit. Here's line 66 of entity.js:

this.vel.y += ig.game.gravity * ig.system.tick * this.gravityFactor;

If gravityFactor = 0, no gravity will be applied. gravityFactor = 1 by default. Think of it as a percentage between 0-100% that allows you to specify how much of the game&039;s gravity to apply to a single entity. I'd suggest leaving #gravityFactor = 1, since most of the time you want your game's gravity to apply uniformly to all entities.

That's the issue. I set gravity to 0 so that the player can move up and down. When the player jumps the gravityFactor is set to 1, but the player still doesn't jump because on no input the Y is set back to 0 as I described above.

It's like a loop you can't break out of...

You'll need to define some sort of jumping state, like this:

if jump button pressed and this.standing {
    gravityFactor = 1
    this.vel.y = jump vel
}
else if( this.standing ){
    gravityFactor = 0
}

if up button pressed and this.standing {
    //move up
}

Yeah, but you are never standing if the gravityFactor is 0 so the jump will never run.

Then change the logic so that gravityFactor gets flipped back on if up is not pressed:

if jump button pressed and this.standing {
    this.vel.y = jump vel
}

if up button pressed {
    gravityFactor = 0
    this.vel.y = move vel
}
else{
    gravityFactor = 1
}

OK. but if you are moving the character up on the plane then the gravity must be off and they will never be standing. In the example you just gave you have to set gravityFactor to 1 to start. The player sinks down the Y plane and then hits the collision layer. Now he is "standing" and gravity is turned off so you can walk up. Now that gravity is off you can never jump again because the player will never be "standing".

It's a vicious cycle...

I can't believe nobody has tried this with Impact yet. Has to be a way to do a psuedo 3D 2D Platformer...

Impact is a 2D tile engine. You can't do pseudo-3D or isometric easily.

I'd suggest you define a plane that acts as the ground. For example, let's say your canvas height is 320. We'll define the ground as any y-position between 250-300. If a player's pos.y + size.y is within that range, set this.standing = true and vel.y = 0.

Now consider jumping. In order for this to work, you'll need to cache the starting pos.y, let the player jump, and when the pos.y reaches the cached jump pos.y, stop the jump and set this.standing = true.

For example:

//assume player isn't standing
this.standing = false;

//jump
if jump is pressed {
    this.cache.y = this.pos.y;
    this.vel.y = jump vel;
    this.jumping = true;
}
//if falling back down from jump and on ground plane
else if this.jumping and this.pos.y > this.cache.y {
    this.pos.y = this.cache.y;
    this.vel.y = 0;
    this.jumping = false;
    this.standing = true;
}
//if not jumping and on ground plane
else if !this.jumping and this.pos.y + this.size.y > 250 and this.pos.y + this.size.y < 300 {
    this.standing = true;
    this.vel.y = 0;
}

To move up, I'd suggest you track a separate move.y variable and apply it yourself directly to pos.y:

this.pos.y += this.move.y * ig.system.tick;

Hope that helps.

I should note that if you use the above method, you don't want a collision layer for the ground. Use collision tiles for boxes, platforms, etc.

Also, I'm assuming this is a TMNT-style game?

Alright, I am trying out these updates, but won't be able to post anything until tomorrow some time. Thanks for the help you guys! I would love to get this working.

@quidmonkey - Yes like TMNT, but why wouldn't a birds-eye rpg want this as well. A game like Zelda: Link to the Past could be made.

A pseudo 3D plugin for Impact would be awesome. Just hope we can get this working for now, though.


If anybody thinks this is a bad idea or would like to suggest another HTML5 game engine for these types of games please let us know.

OK I was able to get this working with the code below. However, there are new issues and concerns now. I took the collision layers off and now the player is bound by the code.

Problem: When the player tries to jump at the top of the screen they are blocked by the collision layer and this is not good. They should be able to jump through collision layers on the y plane, but not be able to walk past them. Some way to check for velocity when it hits the collision layer and react accordingly. hmmm....


Most current version is here: https://gist.github.com/2942094

Another issue... There is no real way to fall bc of the bounding box... So you can't put in a cliff or hole because the player will just walk over it. Might have to have a way to toggle it...

Found a bug... When you touch the bottom bounding box and try to jump on that plane you can't bc it still thinks it is jumping...

Please check the demo by clicking the link at the bottom of my post - http://auz1111.com/blog/html5-game-development-impactjs/

Ahh you can make the player ignore the collision layer while in jump... Let me see... You do

this.pos.y += this.vel.y * ig.system.tick;

in your update function.

I guess it would be advisable to give it a timer or so...