Flashing Spotlight on Victory

‹prev | My Chain | next›

I remain dissatisfied with the goal marker in my Three.js / Physijs tilt-a-board game. The spotlight almost works:

But it seems odd just starting thin air like that. I could add a light fixture of limited sophistication, but that would still look odd suspended in mid-air.

Tonight, I try a pale, transparent light that shines through the game platform:

    goalLight = new THREE.Mesh(
      new THREE.CylinderGeometry(20, 20, 1000),
      new THREE.MeshPhongMaterial({
        opacity: 0.15,
        transparent:true,
        shininess: 0,
        ambient: 0xffffff,
        emissive: 0xffffff
      })
    );
    scene.add(goalLight);

This results in a light that extends the entire height of the screen:

That's still not ideal—it might be better if the visible "light" had a blur to it. Or maybe became square after passing through the center of the platform. No matter, I will worry about that another day.

For now, I would simply like to change the light to indicate a game win. I already have a goal object. I had been logging to console when the game was won. Instead, I now tell it to flash the goal light in salute of victory:

    score.addEventListener('collision', function() {
      flashGoalLight();
      resetBall();
    });

The flash light function merely switches between two states for the light:

  function flashGoalLight(remaining) {
    if (typeof(remaining) == 'undefined') remaining = 9;
    
    if (goalLight.material.opacity == 0.4) {
      goalLight.material.ambient.setRGB(1,1,1);
      goalLight.material.emissive.setRGB(1,1,1);
      goalLight.material.color.setRGB(1,1,1);
      goalLight.material.opacity = 0.15;
    }
    else {
      goalLight.material.ambient.setRGB(1,0,0);
      goalLight.material.emissive.setRGB(1,0,0);
      goalLight.material.color.setRGB(1,0,0);
      goalLight.material.opacity = 0.4;
    }

    if (remaining > 0) {
      setTimeout(function() {flashGoalLight(remaining-1)}, 500);
    }
  }

The result is the goal "spotlight" flipping between white and red:

I may fiddle with that some more. Then again, with the deadline for Gaming JavaScript fast approaching, I may move onto more pressing matters.


Day #516