Background Blur Widget

Describes how to use the Background Blur Widget to blur objects beneath a single child widget.

Windows
MacOS
Linux

Description

The Background Blur 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, which 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 increase blur, resulting in a 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 that 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 aforementioned properties 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 following example, 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 with our simplified menu, using the Blur Strength value to determine the strength of background blur being applied.

BlurWidgetDesigner.png

On our Menu Widget Blueprint's Graph, we create a 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 the Quit button is pressed, we quit the game. Inside of our player character's Blueprint (see below), we add a script to create and display the menu when a key is pressed. In this case, whenever P is pressed, the game is paused when the menu is displayed.

CharacterBlueprint.png

The result is the ability to pause the game and blur the background, keeping 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

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback