PinballHUD

PinballHUD

Shows the score, the ball, the bonus, the plunger's pull and the director's news over a pinball table.

What it does

Top left is a panel: the table's title, the score with commas (1,234,567), which ball of how many (BALL 2 / 3), and what the bonus would pay right now (BONUS 1,170 × 3). Under that is your best score. Two lights show when they apply: BALL SAVE with the seconds left, and a blinking JACKPOT LIT.

When the PinballDirector has news, a big word shows in the middle of the screen for messageSeconds: BALL SAVED, BONUS 3X, JACKPOT 25,000, GAME OVER.

While a ball waits in the shooter lane, a power bar bottom right fills as you pull the plunger back. It hides when the ball launches.

On a table taller than the screen, a small map top right has one box per screen and lights the one the PinballScrollCamera is showing.

Between games it shows PRESS ENTER TO PLAY.

It is a DOM overlay over the canvas, so it works the same under Babylon and Three. With no document (a test, a worker) it builds nothing. It only listens. Take it out of a scene and the game plays on with no score on screen.

Use it in a scene

{
  "Game": {
    "components": {
      "PinballDirector": { "balls": 3, "ballSave": 8 },
      "PinballHUD": {
        "title": "PINBALL TOWER",
        "messageSeconds": 1.8,
        "showScreens": true
      }
    }
  }
}

Props

• title (string, default "PINBALL"). The name over the score.
• messageSeconds (number, default 1.8). How long a message stays up. A new message starts the clock again.
• showScreens (boolean, default true). Draw the screen map. Turn it off on a one-screen table.

Events

Listens to:

• pinball.game.changed. Score, ball, bonus, best, ball save, jackpot light.
• pinball.game.message. The word in the middle.
• plunger.charge. The power bar.
• plunger.launched. Hides the power bar.
• pinballScrollCamera.screenChanged. The screen map.

Dependencies

• PinballDirector. The game it draws.