What's a Shader?

A shader is a program that runs on a graphics processing unit (GPU) to determine how to draw something on the screen, controlling visual effects like lighting, color, and shadows. By running on the GPU, shaders leverage its power to perform many calculations in parallel, making them efficient for graphics-intensive tasks and freeing up the central processing unit (CPU) for other tasks. They can operate on different types of data, such as calculating a vertex's position on the screen (vertex shader) or the final colour of a pixel (fragment shader).

Our goal is to introduce shaders by blurring the screen when the game over menu appears.

In the GameOverMenu Scene

Add a New TextureRect Node

Rename it to BackgroundBlur

Place it as the second node in the tree

Select the BackgroundBlur node

In the Texture property

Select PlaceholderTexture2D

In the Layout section

Set the Anchors preset to

Full Rect

In the Material property

Add a New ShaderMaterial

Expand the ShaderMaterial

In the Shader property

Add a New Shader

Set the Type to VisualShader

At the bottom of the screen

Open the Shader Editor

We are going to be connecting to

and adjusting the Color output

Color expects 4 parameters (Vector4)

RED, GREEN, BLUE and ALPHA

Right click in empty space

The Create Shader Node pops up

Search for Texture2D and add it

This represents the image we are blurring

Set the Texture to SamplerPort which allows us to feed in whatever is on screen

at the time of running the shader.

Texture2D requires screen dimensions

These are recorded as UV (Think x and y)

To provide these dimensions

Right-Click in empty space

Search for Input and add the node

Select screen_uv and connect

lod stands for Level of Detail

We need to provide a low value

Right-Click on empty space

Search for FloatConstant

Set it to 2.0

Finally, we need to set the screen properties

Right-click in empty space and add

a Texture2DParameter node

Set the properties as shown

and connect it to the Sampler

The final shader looks like this:

Now when the game over menu screen appears the background is blurred

It is important to note that the same affect can be achieved with code:

shader_type canvas_item;

uniform sampler2D screen_texture : hint_screen_texture, repeat_disable, filter_linear_mipmap;

uniform float lod: hint_range(0.0, 5.0) = 0.0;

void fragment(){

// Notice we use 'screen_texture' instead of 'SCREEN_TEXTURE'

vec4 color = texture(screen_texture, SCREEN_UV, lod);

COLOR = color;

}

Previous: Game Over

NEXT: New Gun