Bouncy Platforms with Physijs

‹prev | My Chain | next›

I have a nice start on a new game in 3D Game Programming for Kids. This is actually a 2D game in the vein of Doodle Jump, thought it still benefits from WebGL and definitely needs Physijs in addition to the prettiness of Three.js. So far I have my player falling from the sky and hitting platforms. Today I hope to add some controls to the player and give it a little bounce.

The controls are easy enough. I have done this elsewhere in the book. In this case, I handle only the left and right arrow keys:

  document.addEventListener("keydown", function(event) {
    var code = event.keyCode;
    if (code == 37) left();  // left arrow
    if (code == 39) right(); // right arrow
  });

The left() and right() functions are simple wrappers that move the player in the positive or negative X direction:

  function left()  { move(-100); }
  function right() { move(100); }

This level of indirection is a bit tricky in a kids book. Really, I could have called the move() function directly in the event handler with the appropriate argument. I do think it makes sense to keep the indirection when there are more controls (up, down, jump, etc.). It just reads better for kids (and me), though there is more typing. In the Basic that I coded from as a kid, they never would have used indirection. Then again, does Basic even have functions? I make a mental note to never look that up and move on...

The move() function is tasked with changing the X velocity, but not the Y velocity. So I grab the downward speed into a local variable and update the speed accordingly:

  function move(x) {
    var velocity_y = player.getLinearVelocity().y;
    player.setLinearVelocity(
      new THREE.Vector3(x, velocity_y, 0)
    );
  }

That gives me the desired left-right controls. Now I need the player to bounce when it hits the platforms. It seems half a lifetime ago (in reality roughly 250 posts back), but I have done bounciness in Physijs before. The version of the library that I am using is a few months old. Still, the wiki page includes the same information about bouncy materials. So I update both my player and my platforms to be bouncy:

  function makePlatform() {
    var box = new Physijs.BoxMesh(
      new THREE.CubeGeometry(100, 20, 10),
      Physijs.createMaterial(
        new THREE.MeshNormalMaterial(), 0.2, 1.0
      ),
      0
    ); 
    // ...
  }
  // ...
  function makePlatform() {
    var box = new Physijs.BoxMesh(
      new THREE.CubeGeometry(100, 20, 10),
      Physijs.createMaterial(
        new THREE.MeshNormalMaterial(), 0.2, 1.0
      ),
      0
    ); 

The bounciness factor comes from the third number in the Physijs.createMaterial() function. I am using 1.0 for maximum bounciness. And that does the trick—I now have a nice, bouncy ball that I can move back and forth with arrow keys:

Unfortunately, I think I spot a flaw. The 1.0 bounciness is perfect bounciness—the player bounces away with the same speed that it hits (only in the opposite direction). In other words, I am never going to add velocity to move up to a goal in space.

This is not my only problem as I need to figure out a way to allow the player to pass through platforms when moving up, but bounce when going down. I will pick back up tomorrow trying to answer those two questions.

(the code so far)


Day #640