Implementing Viewport Overlays for Debug Visualization

Render custom 2D overlays and debug information directly over the level viewport to provide immediate visual feedback for your editor tools.

In this lesson, you will learn how to draw dynamic 2D debug information directly over your level viewport to monitor your editor tools in real-time.

The Power of Viewport Overlays

When building custom editor tools, simply printing logs to the Output Log can be tedious. Instead, by hooking into the viewport rendering process, you can draw text, shapes, or status icons right on top of the scene. This allows you to visualize data—like an actor’s health, a pathfinding node, or tool status—without cluttering the scene with temporary meshes or complex HUD actors.

Registering the Overlay

In Unreal Engine, viewport overlays are typically managed by a FEditorViewportClient. By overriding the Draw method of your viewport client, you gain access to a FCanvas object. The FCanvas is your primary tool for drawing 2D elements like lines, triangles, and text strings.

Here is a simplified look at how you might draw a debug string onto the viewport:

void FMyViewportClient::Draw(FViewport* InViewport, FCanvas* Canvas)
{
    // Call the parent implementation to ensure standard rendering occurs
    FEditorViewportClient::Draw(InViewport, Canvas);

    // Define the string and font settings
    FString DebugText = TEXT("Tool Status: Active");
    UFont* RenderFont = GEngine->GetSmallFont();

    // Draw the text at a specific coordinate
    Canvas->DrawShadowedText(50, 50, FText::FromString(DebugText), RenderFont, FLinearColor::Green);
}

Why Use Overlays?

The beauty of this approach is that the overlay exists in Screen Space. Unlike debug lines drawn in World Space (which disappear when you move the camera or rotate), your overlay stays locked to the viewport window. This makes it perfect for displaying "Heads-Up Display" (HUD) elements for your editor utilities, letting you provide immediate visual feedback to the designer while they manipulate the level. You can toggle these draws using a simple boolean flag in your editor tool, effectively creating an "On-Screen Debug Toggle" for your custom plugin modules.

Key Takeaway: By utilizing the FCanvas within an FEditorViewportClient, you can create persistent, screen-space debug displays that provide immediate visual feedback for your editor tools without polluting your scene data.