Game Obstacles Can't be Gouped in Physijs

‹prev | My Chain | next›

My Three.js / Physijs rafting game benefited from a step back yesterday. The code and the concepts are substantially simpler at this point. I am unsure if this is simple enough yet for anything less than an advanced chapter in Gaming JavaScript, but at least it is worth including at this point.

I will worry about further simplification another day. Tonight, I need to finish the game. This means that I need to add some obstacles that prevent the raft from reaching the end of its river.

After last night, I can group my river segment objects (water, river banks, joints between segments) in an invisible Physijs object—I use a Plane Mesh to ensure that it does not interact with my raft or any other game elements. To this river segment, I add a single (for now) obstacle:

function riverSegment(rotatiaon, offset) {
  // ...
  var length = 1500
    , half = length / 2;

  var segment = new Physijs.PlaneMesh(
    new THREE.PlaneGeometry(10, 10),
    new THREE.Material()
  );
  segment.rotation.y = rotation;
  // ...

  var water = new Physijs.PlaneMesh(
    new THREE.PlaneGeometry(length, 500),
    new THREE.MeshBasicMaterial({color: 0x483D8B})
  );
  water.position.x = half;
  segment.add(water);

  addObstacle(water);

  scene.add(segment);
  // ...
}

The addObstacle() function randomly places a box along the river segment:

function addObstacle(water) {
  var width = 250
    , length = 1500
    , position = Math.random() * length;

  var obstacle = new Physijs.BoxMesh(
    new THREE.CubeGeometry(
      25, 25, 25
    ),
    Physijs.createMaterial(
      new THREE.MeshNormalMaterial()
    )
  );
  obstacle.position.y = 13;
  obstacle.position.x = position;

  water.add(obstacle);
}

This seems to work well enough as the raft is able to collide with the obstacles and can even come to rest on them:

Upon further reflection, that does not seem quite right. I gave no mass to the obstacles so the raft, continuously pushed by the river current, should be able to push the obstacles. I will worry about that another day.

For now, I would simply like to end the game once the raft collides with an obstacle. I start by adding a tracer bullet where the gameOver() function call will eventually go:

function addObstacle(water) {
  // ...
  obstacle.addEventListener("collision", function(object) {
    console.log("Game over dude!")
  });

  water.add(obstacle);
}

Only this does not work. I was sure that I had the callback syntax right. What could I be missing?

Eventually, I try adding the obstacle directly to the scene instead of to the river segment group:

function addObstacle(water) {
  // ...
  obstacle.addEventListener("collision", function(object) {
    console.log("Game over dude!")
  });

  scene.add(obstacle);
}

This works… unfortunately. In fact, not only do I see the collision event, but I also notice that the raft is now able to push the obstacles along, sometimes into each other:

Although it works to add the obstacle to the scene, this is not a workable solution for my game. I need to add the obstacles to individual segments of the river—not attempt to calculate the world location of river segments so that I can try to place obstacles in the scene.

I try digging through the Physijs source some, but this seems to be related to ammo.js interactions. Such investigation is going to require more than a night's worth of work. Bummer.


Day #492