Background Blur

Description

This widget can contain one child widget, providing an opportunity to surround it with adjustable padding and apply a post-process Gaussian blur to all content beneath the widget.

Details

In the Details panel for a placed Background Blur widget, there are a couple of specific options that can be set that pertain to the Widget:

BackgroundBlur.png

Option Description
Apply Alpha to Blur When true, this will modulate the strength of the blur based on the widget alpha.
Blur Strength How blurry the background is. Larger numbers mean more blurry but will result in larger runtime cost on the GPU.
Low-Quality Fallback Brush An image to draw instead of applying a blur when Low-Quality Override mode is enabled. You can enable Low-Quality Mode for background blurs by setting the cvar Slate.ForceBackgroundBlurLowQualityOverride to 1. This is usually done in the project's scalability settings.
Blur Radius This is the number of pixels which will be weighted in each direction from any given pixel when computing the blur. A larger value is more costly but allows for stronger blurs.

Each of the properties above can also be set or changed at runtime through Blueprint Script.

BackgroundBlurBP.png

The ability to set other appearance settings such as Horizontal and Vertical Alignment as well as any padding around the widget can also be defined.

Usage Example

In the example below, we use the Background Blur widget to highlight a menu when the game is paused, blurring out the background.

For this, we add the Blur Widget along with our simplified menu and use the Blur Strength value to determine the level of background blur applied.

BlurWidgetDesigner.png

On our Menu Widget Blueprint's Graph, we create some script to handle how our menu reacts to button clicks.

BlurWidgetGraph.png

Above, when we construct the widget, we are turning on the Mouse Cursor. When the Resume button is pressed we hide the cursor, un-pause the game and remove the menu from being displayed. When Quit is pressed, we simply quit the game. Inside our player character's Blueprint (below), we add some script to create and display the menu when a key is pressed, in this case whenever P is pressed, as well as pause the game.

CharacterBlueprint.png

The result is the ability to pause the game and blur the background but keep our menu intact for players to interact with.

50_Blur.png

We could also decrease the Blur Strength from 50 (above) down to 10 (below) to make the background slightly more visible.

10_Blur.png