Friday, September 21, 2012

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,
        shininess: 0,
        ambient: 0xffffff,
        emissive: 0xffffff
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() {
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.opacity = 0.15;
    else {
      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

No comments:

Post a Comment