1

I am trying to make a simple side-scroller game in p5.js. As far as I understood I need to have vectors to imitate real-world physics. All I really need is a force that pushed the player down and a force that makes it jump when a key is pressed. I watched a video from youtube on the topic and I am pretty sure I followed it exactly as it was described but I get a different result. My keys don't always get detected and also they are all with different amount of force. Thank you in advance.

// This is a part of a player class that I have
update(){
  this.pos.add(this.vel)
  this.vel.add(this.acc)
}

applyForce(force){
  this.vel.add(force)
}

earth(){
  if (this.pos.y > height - 100){
    this.pos.y = height - 100
    this.acc.y *= 0
  }
}

// This is where I detect the pressed key
function keyPressed(){
  let jump = createVector(0,-10)
  player.applyForce(jump)
}

// And then in the draw function i have this
player.applyForce(gravity)
player.earth()
meowgoesthedog
  • 14,670
  • 4
  • 27
  • 40
Pavel Kostadinov
  • 13
  • 2

1 Answers1

1

Basic problems:

  • applyForce should add the force vector to the acceleration, not the velocity.
  • You should not update the physics in the draw function, but in update.
  • In games the jumping mechanic is typically implemented as an impulse (i.e. velocity change) instead of a force. You could add an applyImpulse function for this.
  • You should always reset the acceleration after updating, so that forces don't accumulate.

Amended code:

// move all updates to here
update(){
  this.acc.add(gravity)
  this.pos.add(this.vel)
  this.vel.add(this.acc)

  this.earth()

  this.acc = createVector(0, 0)
}

// add to acceleration, not velocity
applyForce(force){
  this.acc.add(force)
}

// impulse for jumping
applyImpulse(imp){
  this.vel.add(imp)
}

// set vertical *velocity* to zero, not acceleration
earth(){
  if (this.pos.y > height - 100){
    this.pos.y = height - 100
    this.vel.y = 0
  }
}

// apply the impulse to jump
function keyPressed(){
  let jump = createVector(0,-10)
  player.applyImpulse(jump)
}

// no updating in the draw function
meowgoesthedog
  • 14,670
  • 4
  • 27
  • 40
  • So I implemented what you have written and my character jumps but there is no longer gravity and I think that is because i reset the value of the acceleration 2 lines after i apply the gravity force in the update function.I am not really sure how to fix that. – Pavel Kostadinov Dec 27 '18 at 14:08
  • @ElarcisKostadinov I've made an amendment which might fix the issue, but I don't think resetting the acceleration in the update method is the reason. Can you link an interactive demo with your current code? – meowgoesthedog Dec 27 '18 at 14:13
  • https://editor.p5js.org/Muffie/sketches/B1c4eXGbN if you have any questions contact me because I don't think my code is very readable . – Pavel Kostadinov Dec 27 '18 at 14:56
  • @ElarcisKonstadinov you didn't implement my suggestions correctly. 1) you initialize `gravity` in `draw` not `setup`. 2) you don't add `gravity` to `this.acc` in `update`. 3) you've set the jump speed to 1 which is too low: it is exactly equal and opposite to the gravity, and since the effective time step is 1, they cancel each other out; therefore `jump` must be larger than `gravity`. See my [amended version](https://editor.p5js.org/meowgoesthedog/sketches/B1Az9Pf-V) of the demo which works as intended. Going further, you may want to implement explicit timesteps. – meowgoesthedog Dec 27 '18 at 15:05
  • 1
    I made the changed that you initially told me to but I had missed the last line in earth() where I had to change the acceleration to velocity and so I started experimenting by changing some thing in the code and the when I send you the link I forgot to change it back to how you had told me to. Thank you anyway it worked. – Pavel Kostadinov Dec 27 '18 at 15:55