Custom UI Focus Highlights in Unreal Engine

When it comes to game UI, supporting mouse and keyboard is usually straightforward. Controller support, however, can be an absolute headache. While frameworks like CommonUI and CommonInput help smooth out some of the rough edges, there’s still plenty of work to do.

The Challenge: Controller UI Navigation

One challenge is making UI elements feel just right when navigated with a controller. In many games—including Diablo 4—the UI adapts to show a distinctive highlight when using a controller. Diablo 4, for instance, draws a bright rectangle around focused UI elements.

Diablo’s super bright focus rectangle

I wanted to bring that into my own project. Unreal Engine already provides a similar feature by drawing a blue-line border around focused elements—except, admittedly, it’s a bit… blue and boring.

The default blue focus rectangle in Unreal Engine

If you’re not seeing this blue outline on focused items, double-check your project settings. Make sure the Render Focus Rule isn’t set to Never:

1. Go to Project Settings.
2. Navigate to Engine - User Interface.
3. Ensure that Render Focus Rule is set to something other than Never.

The Render Focus Rule setting in Project Settings

Overriding the Focus Brush with C++

To swap out that default blue border for something that fits your game’s style—a custom material, texture, or color—we need to expose a function to Blueprints. I like to centralize UI-related functionality in a UIManagerSubsystem, so let’s add one that lets us override the focus brush.

Here’s the C++ code:

static FSlateBrush OverridenFocusBrush;

UCLASS(Abstract, config = Game)
class MYTHIC_API UMythicUIManagerSubsystem : public UGameInstanceSubsystem 
{
	GENERATED_BODY()

public:
	UMythicUIManagerSubsystem() { }

    // Overrides the Focus brush in the FStarshipCoreStyle.
    UFUNCTION(BlueprintCallable, Category="Mythic UI Manager | Slate Overrides")
    void SetFocusBrush(FSlateBrush InBrush) { 
           OverridenFocusBrush = InBrush; 
           FStarshipCoreStyle::SetFocusBrush(&OverridenFocusBrush); 
    }
};

Note: static FSlateBrush OverridenFocusBrush; is a global because the Brush needs to be in memory at all times.

With this function exposed to Blueprints, you can now call SetFocusBrush from anywhere in your UI.

Customizing Your Focus Style

In my project, I have a Widget that serves as the main HUD for the player. Inside that widget, I simply call the function to swap out the default blue rectangle with my custom material.

Calling the SetFocusBrush function in Blueprint

I used a super basic material that leverages two noise textures (which rotate over time) along with a mask to keep the center clean. This approach gives a subtle, dynamic effect to the focus rectangle, making it stand out without being too flashy.

After calling SetFocusBrush with your custom material (or texture, color, etc.), your UI elements will now highlight using your custom brush instead of Unreal’s default blue. Here’s what the new focus rectangle looks like:

Our custom focus brush in action. Here with anims in very low quality

Important Note

Overriding the focus brush will affect the entire Slate styling environment. This means that your changes won’t be confined to the in-game UI—they will also override the focus brush in the Unreal Editor. If you rely on the default blue focus styling in the editor for debugging or visual consistency, be aware that this change applies globally.

Final Thoughts

Controller-friendly UI can be a game changer for player experience, and even small visual improvements can make your project feel more polished. With just a bit of C++ and a touch of Blueprint magic, you can override Unreal Engine’s default styling to create a more engaging and immersive interface.

Have you experimented with custom UI styling in Unreal Engine? Share your thoughts or ask questions in the comments below!