Skip to content

UI Setup: RaceTowerUI

This guide walks through setting up the standings tower UI.

If you ran the Quick Start Wizard with Race Tower enabled, the prefab is already in your scene. This guide is useful if you want to rebuild it, tweak the layout, or troubleshoot.

What you need

  • A RaceTimingManager in the scene
  • At least one RaceCompetitor
  • A Canvas-based UI root
  1. Find the prefab in the Project window:
  2. Assets/SlowToastRacing/RaceTiming/UI/Prefabs/RaceTower.prefab
  3. Drag it into your scene.
  4. Press Play.

Rows appear at runtime as competitors register and the session starts.

Option B: Build the UI manually

1) Create a Canvas

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

2) Create a row container

  1. Under the Canvas, add a panel or empty RectTransform.
  2. Name it RaceTowerContainer.
  3. Add these components:
  4. Vertical Layout Group
  5. Content Size Fitter (optional — set Vertical Fit to 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 a panel (GameObject → UI → Panel) and name it RaceTowerRow.
  2. Add text fields using TextMeshProUGUI. Minimum setup:
  3. PositionText
  4. NameText
  5. GapText

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

  1. Add the RaceTowerRowUI component.
  2. Assign the text and image references in the Inspector.
  3. Drag the RaceTowerRow object from the Hierarchy into the Project window to create a prefab.
  4. Delete the temporary in-scene instance (optional).

4) Add RaceTowerUI

  1. Select the Canvas (or another suitable UI object).
  2. Add the RaceTowerUI component.
  3. Assign:
  4. RowPrefab: the prefab you just created
  5. Container: your RaceTowerContainer transform
  6. Set Mode (default: GapOnTrack):
Mode Description
GapToLeader Gap to P1. Classic standings format.
GapToAhead Interval to the car directly ahead.
GapOnTrack Track-based intervals relative to a reference driver.
GapToBestLap Gap to the session's best lap. Best for qualifying.

For GapOnTrack, set ReferenceDriverId = -1 to automatically use the leader as reference.

Common issues

Nothing appears

  • RowPrefab not assigned
  • Container not assigned
  • RaceTimingManager missing or session not started

Rows appear but data looks wrong

  • Competitors show --- until they cross the start line (by design)
  • Track length may be 0 if TrackMarkerManagerBehaviour can't be found

UI stacks or overlaps incorrectly

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

Screenshots

1. Prefab Hierarchy

(Shows the hierarchy when using the wizard or the provided prefab. Row clones appear under RaceTowerPanel at runtime.) RaceTower Hierarchy

2. RaceTowerUI Inspector

RaceTowerUI Inspector

3. In-Game

RaceTower In-Game