Implementing State-Driven Widget Visibility

Learners will create a robust state machine to handle widget visibility transitions based on player interaction and game context.

In this lesson, you will learn how to orchestrate complex UI transitions by decoupling visibility logic from individual widgets and moving it into a centralized state machine.

The Problem with Direct Visibility Toggling

Beginners often toggle widget visibility (SetVisibility) directly inside functions like OnClicked or OnPlayerDeath. As your interface grows, this creates a "spaghetti" of dependencies where one widget needs to know the internal status of five others. Instead, we want our UI to respond to a single, abstract "State" (e.g., HUD_Active, Menu_Pause, Inventory_Open).

Centralizing State with an Enum

To implement this, define a UENUM representing the possible states of your UI. Your widgets should not manage their own visibility; instead, they should "listen" for state changes. When the global state changes, the UI controller notifies the widgets to update their visibility based on the new context.

Using the MVVM patterns we studied previously, you can bind the Visibility property of your widgets to a property in your ViewModel that tracks the current UI state.

// Inside your UI Controller/ViewModel
void UMainMenuViewModel::SetUIState(EUIMode NewState)
{
    CurrentState = NewState;
    // Broadcast a delegate or update the bound property
    OnStateChanged.Broadcast(CurrentState);
}

Mapping States to Visibility

In your widget class, you can implement a helper function that maps the EUIMode to specific Slate visibility rules:

ESlateVisibility UMyWidget::GetVisibilityForState(EUIMode CurrentState)
{
    switch(CurrentState)
    {
        case EUIMode::Inventory_Open: return ESlateVisibility::Visible;
        case EUIMode::HUD_Active: return ESlateVisibility::Collapsed;
        default: return ESlateVisibility::Hidden;
    }
}

By leveraging Compiled Bindings and the OnStateChanged delegate, you ensure that as the game moves between states, the UI updates automatically without the player-character or game-mode logic ever needing to reference a specific UUserWidget pointer. This approach keeps your UI code clean, maintainable, and significantly easier to debug using Slate Insights.

Key Takeaway: By using an Enum-driven state machine combined with data bindings, you replace hard-coded visibility toggles with a predictable, centralized UI flow that scales effortlessly with your game’s complexity.