Skip to content

UI Setup: LapPositionBarUI

The LapPositionBarUI gives players an at-a-glance horizontal mini-map of where every competitor is on the track.

Prerequisites

  • A RaceTimingManager existing in the scene.
  • A CompetitorFocusManager existing in the scene (controls which dot is highlighted green).
  • Track markers must be configured (the system needs to know track length to calculate relative lap positions).

The easiest way to get the Lap Position Bar is to drag the pre-built prefab into your Canvas.

  1. Ensure you have a standard Unity Canvas in your scene.
  2. Navigate to Assets/SlowToastRacing/RaceTiming/UI/Prefabs/
  3. Drag the LapPositionBarUI prefab as a child of your Canvas.
  4. Adjust the Rect Transform on the root LapPositionBarUI object to place it where you want (e.g., top centre of the screen).

[!TIP] The LapPositionBarUI component manages a pool of dots. It will automatically spawn neutral grey dots for opponents, a red dot for the race leader, and a green dot for the currently focused competitor. Wait until runtime to see them appear!

Manual Setup (Custom UI)

If you prefer building the UI from absolute scratch:

  1. Create an empty GameObject under your Canvas and name it CustomLapPositionBar.
  2. Add the LapPositionBarUI component.
  3. In the Inspector, configure your colours:
  4. Leader Color: (e.g., Red)
  5. Focused Color: (e.g., Green)
  6. Default Color: (e.g., Grey)
  7. Assign a Dot Sprite (e.g., the default Unity 'Knob' for a circle, or leave empty for squares).
  8. Set the Initial Pool Size high enough to cover your maximum expected grid size (default is 30).
  9. Provide a Dot Container. This is the RectTransform area where the dots will slide left to right. It should be as wide as you want the bar to be.

Changing Focus at Runtime

To change which car gets the green "Focused" dot, simply update the CompetitorFocusManager:

// Focus on Car 5
CompetitorFocusManager.Instance.SetFocus(5);