Implementing Spectator HUDs for Match Observation

In this lesson, you will learn how to create a dedicated Spectator HUD that provides observers with high-level match data without cluttering the active players' screens.

When players are actively competing, their HUD focuses on immediate needs like health, ammo, and ability cooldowns. However, a Spectator needs a bird’s-eye view of the game state, such as team scores, match timers, and a list of active players. Because we have already established custom HUD classes and User Widgets, we can now architect a system that swaps the player's UI based on their current SpectatorPawn state.

Using the PlayerController to Direct the UI

The PlayerController acts as the bridge between your logic and the display. When a player transitions into spectator mode, the PlayerController should check its Pawn type. If it identifies a SpectatorPawn, it triggers the removal of the standard gameplay HUD and the addition of the Spectator-specific UI.

You can handle this in your custom HUD class by checking the state:

// Inside your custom HUD class
void AMyGameHUD::DrawHUD() {
    Super::DrawHUD();

    APlayerController* PC = GetOwningPlayerController();
    if (PC && PC->GetPawn()->IsA(ASpectatorPawn::StaticClass())) {
        // Display match-wide statistics widget
        DisplaySpectatorDashboard();
    } else {
        // Display standard player combat widget
        DisplayCombatHUD();
    }
}

Designing the Spectator Dashboard

Your Spectator HUD should be built as a separate User Widget containing container elements like TilePanels or ListViews. These containers can dynamically update by pulling data from your GameInstance or GameState. Since we’ve previously mastered Blueprint Interfaces, your spectator widget can listen for events like OnPlayerEliminated or OnScoreUpdated to refresh the scoreboard display in real-time without the overhead of heavy ticking.

By keeping the Spectator HUD modular, you ensure that the logic for "observing" remains decoupled from the logic of "playing," keeping your codebase clean and easy to maintain as your game grows.

Key Takeaway: By checking the Pawn type within your PlayerController or HUD class, you can toggle between specialized UI overlays that provide relevant information for either a competitor or an observer.