## Tuesday, August 28, 2012

### 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