Customize the HUD

Vehicle Soccer Template splits UI across the main menu, vehicle selection, and in-match overlays. This tutorial covers the widgets you will edit most often.

flowchart TB
  subgraph menus["Menus"]
    Main["WBP_MainMenu"]
    Select["WBP_VehicleSelection"]
  end
  subgraph ingame["In match"]
    HUD["WBP_VehicleUI"]
    Board["WBP_ScoreBoard"]
    Entry["WBP_ScoreEntry"]
  end
  GI["BP_VehicleGameInstance"]
  GS["BP_VehicleGameState"]
  PC["VehiclePlayerController"]

  Main --> GI
  Select --> GI
  PC --> HUD
  PC --> Board
  Board --> Entry
  GS --> HUD

1. Main menu branding

1. Open WBP_MainMenu (Blueprints/Widgets/WBP_MainMenu).
2. Adjust layout, fonts, and colours on the root canvas and WBP_Button children.
3. Background screenshots come from Textures/MenuScreenshots/ — replace those textures or swap in your own marketing art.

Menu actions already wired:

Button	Flow
Play Solo	Local match
Host Match / Host Game	Listen server
Find Matches / Refresh Servers	Session search
Join Session	Connect to list selection
Choose Vehicle	Opens selection flow

Match settings spin boxes bind to ST_VehicleGameSettings fields (Match Time, Match Count Down, Ball Reset Countdown).

2. In-match HUD

Open WBP_VehicleUI:

Element	Customization
Team One Score / Team Two Score	Text and Border_TeamOne / Border_TeamTwo colours
MatchTime / MatchCountdown	Timer formatting
BoostPercent	Boost bar fill (fed from VehiclePlayerController)
GoalScored / GoalScoreText	Goal splash copy and animation
OvertimeText	Sudden-death messaging

Team colours pull from BP_VehicleStatics → GetTeamColor — keep widget tints in sync with MI_TeamOneEmissive / MI_TeamTwoEmissive materials for a consistent stadium look.

3. Scoreboard overlay

1. Open WBP_ScoreBoard and WBP_ScoreEntry (Widgets/UserCreated/).
2. VehiclePlayerController shows this widget while IA_Scoreboard is held.
3. Add columns (ping, player name, goals) by extending WBP_ScoreEntry and the populate logic on the scoreboard.

Player names come from BP_VehiclePlayerState / GetPlayerName set on the main menu.

4. Vehicle selection cards

WBP_VehicleSelection reads DT_Vehicles rows. Customize:

• Card layout and hover states
• Preview camera (BP_CameraActor on Map_VehicleSelection)
• Description text length — keep copy short so it fits the card

5. Rebind UI actions

If you add new buttons:

1. Use WBP_Button (Widgets/UserCreated/WBP_Button) for consistent styling.
2. Call into BP_VehicleGameInstance for session flows or BP_VehicleStatics for game mode / game state access.
3. Compile WBP_MainMenu and test every navigation path (solo, host, back to menu via WBP_VehicleUI → ExitToMenuBtn).

Examples

Example A — Rename the goal splash

1. Open WBP_VehicleUI.
2. Select GoalScoreText (default copy: GOAL SCORED).
3. Change the default text to something on-brand, for example SCORE! or BLUE SCORES!.
4. Play a solo match and score to confirm GoalScored still triggers the animation.

The widget reads scorer details from ST_Goal on BP_VehicleGameState — you can append Scoring Player Name in the Blueprint graph if you want STRIKER SCORES! style messages.

Example B — Match team colours on the scoreboard

BP_VehicleStatics → GetTeamColor feeds UI tints. Align widgets with stadium materials:

Team	Widget border	Stadium material
TeamOne	Border_TeamOne → blue tint	MI_TeamOneEmissive
TeamTwo	Border_TeamTwo → orange tint	MI_TeamTwoEmissive

Example: set TeamOneName text to Azure and TeamTwoName to Crimson on WBP_VehicleUI, then match TeamOneColor / TeamTwoColor variables to the same hues used on goal lights (BP_TeamLight).

Example C — Simpler main menu for a demo build

Hide networking for a trade-show build:

1. Open WBP_MainMenu.
2. Set visibility on Find Matches, Host Match, Join Session, and Server List Scroll Box to Collapsed.
3. Leave Play Solo and Choose Vehicle visible.
4. Set default Play Mode to Solo on the menu widget or BP_VehicleGameMode class defaults.

Players land directly on offline play without unused session UI.

Example D — Longer scoreboard rows

1. Open WBP_ScoreEntry.
2. Duplicate the name Text block and add a second column bound to player score or ping.
3. In WBP_ScoreBoard, when building entries from BP_VehiclePlayerState, pass the extra fields into the new text block.

Hold Tab (IA_Scoreboard) in PIE to verify the overlay lists every connected player.

Next steps

• Change match pacing → Tune match rules
• Widget property lookup → Blueprint reference — Widgets