Skip to content

UI Setup: RaceTowerUI

This guide walks through setting up the built-in standings tower UI in a clean, editor-friendly way.

If you ran Tools → Sirocco Race Timing → Quick Start Wizard, you may already have a RaceTowerUI prefab instance in your scene. This guide is still useful if you want to rebuild it, change visuals, or troubleshoot.

What you need

  • A RaceTimingManager in the scene
  • At least one RaceCompetitor
  • A track (recommended): TrackMarkerManagerBehaviour + TrackMarkersSO
  • A Canvas-based UI root

The Quick Start Wizard attempts to create the UI from a prefab if it exists.

  1. In the Project window, locate the prefab:
  2. Assets/RaceTiming/UI/Prefabs/RaceTower.prefab
  3. Drag it into your scene.
  4. Press Play.

If the prefab is present and wired correctly, you should see rows created at runtime as competitors register and the session runs.

Option B: Build the UI manually (step-by-step)

1) Create a Canvas

  1. GameObject → UI → Canvas
  2. Ensure the Canvas has:
  3. Canvas
  4. Canvas Scaler (recommended: Scale With Screen Size)
  5. Graphic Raycaster

2) Create a container for rows

  1. Under the Canvas, create:
  2. GameObject → UI → Panel (or an empty RectTransform)
  3. Name it RaceTowerContainer
  4. Add:
  5. Vertical Layout Group
  6. Content Size Fitter (optional; typical settings: Vertical Fit = Preferred Size)

Recommended Vertical Layout Group settings: - Child Alignment: Upper Left - Spacing: 2–8 - Control Child Size: enabled (at least Width)

3) Create a Row prefab

You need a prefab with a RaceTowerRowUI component.

  1. Under the container, create:
  2. GameObject → UI → Panel (name it RaceTowerRow)
  3. Add the text fields you want. Typical minimal setup (using TextMeshProUGUI):
  4. TextMeshProUGUI named PositionText
  5. TextMeshProUGUI named NameText
  6. TextMeshProUGUI named GapText

Optional fields supported by RaceTowerRowUI: - LapText (shows L X) - RatioText (debug-style ratio display) - TeamColorStrip (an Image used for team color)

  1. Add component: RaceTowerRowUI
  2. Drag references in the Inspector:
  3. PositionText, NameText, GapText, LapText, RatioText
  4. TeamColorStrip if present
  5. Drag the RaceTowerRow object from Hierarchy into the Project window to create a prefab.
  6. Delete the temporary in-scene row instance (optional).

4) Add RaceTowerUI

  1. Select the Canvas (or another suitable GameObject in your UI)
  2. Add component: RaceTowerUI
  3. Assign:
  4. RowPrefab: the prefab you created
  5. Container: your RaceTowerContainer transform
  6. Choose Mode:
  7. GapToLeader - Shows gap to the race leader (P1). Classic standings tower format.
  8. GapToAhead - Shows interval to the car directly ahead. Useful for close racing.
  9. GapOnTrack - Shows track-based intervals relative to a reference driver. Broadcast-style display.
  10. GapToBestLap - Shows gap to the session's best lap time. Useful for qualifying sessions.

Mode-specific settings: - If using GapOnTrack, set ReferenceDriverId = -1 to automatically use the leader as reference. - GapToBestLap is best suited for qualifying/practice sessions where lap times matter more than positions.

Common pitfalls

“Nothing appears”

  • RowPrefab is not assigned
  • Container is not assigned
  • RaceTimingManager is missing or LapTimer isn’t running

Rows appear but data looks wrong

  • Competitors may show --- until they have crossed the start line (by design)
  • Track length might be 0 if the manager can’t find the track markers

UI looks stacked / overlaps

  • Ensure your container has a Vertical Layout Group
  • Ensure your row prefab has a sensible LayoutElement or consistent height

Screenshot / GIF placeholders (for later)

If you want to add images later, recommended captures: 1. Scene Hierarchy showing Canvas → Container → Rows 2. Inspector screenshot of RaceTowerUI with assignments 3. A running Game view with a few cars and the tower updating