Visual Effects with an Image Mask

The shader can perform several types of modifications to the color and brightness of a selected area of an image, using a mask. The mask image defines the area on which the visual effect is applied to.

The visual effects that can be applied are:

* Dim the background outside the target area, or make it completely transparent.

* Change the color tint and brightness of the target area.

* Make the target area glow by cyclically increasing and decreasing the brightness of the image over time.

Uniforms used in this shader:

maskImage – black and white image that defines the area to be shown or to which visual effects should be applied.

dimLevel – Alpha level of area outside the mask (white pixels).

tintColor – Base color of the tint you want to apply.

tintBrightness – Multiplier of the base tint color. Causes the base color to be more dominant.

frequency – Determines the rate of flashing of the target area. Lower values result in slower flashing, while higher values intensify the flashing speed.

brightnessRange – Specifies the range of brightness for the glow. Typically, you wouldn’t want the glow to oscillate between pitch black and pure white. Use this uniform to limit the brightness range. A lower value narrows the range, while a higher value widens it. The exact value will depend on the image used, the masked area and your visual preferences.

brightnessOffset – Sets the brightness offset from the center. Lower values darken the flashing, while higher values make it brighter.

 

Read the full article explaining the entire shader in details here: https://www.nightquestgames.com/godot-2d-shaders-visual-effects-with-masks/

For more helpful game development topics, visit the Night Quest Games Blog at: https://www.nightquestgames.com/blog-articles/

Good luck!

Shader code
shader_type canvas_item;
 
uniform float frequency : hint_range(0.0, 10.0) = 2.0;              // Rate of glow change
uniform float dimLevel : hint_range(0.0, 1.0) = 0.0;                // Alpha level of area outside the mask
uniform float brightnessRange : hint_range(0.0, 1.0) = 0.05;        // Range of brightness change
uniform float brightnessOffset : hint_range(-0.1, 0.1) = -0.05;     // Offset of brightness from center
uniform vec3 tintColor : source_color;                              // Base tint color
uniform float tintBrightness : hint_range(0.0, 1.0) = 0.2;          // Brightness of the tint color
uniform sampler2D maskImage;                                        // Mask Image
 
void fragment() {
    vec4 maskImageColor = texture(maskImage, UV);
     
    // Caluclate the brightness of the pixel in the mask image
    float maskImageBrightness = (maskImageColor.r + maskImageColor.g + maskImageColor.b) / 3.0;
     
    // Show only the white area on the target texture and dim the rest
    COLOR.a = min(dimLevel + maskImageBrightness, 1.0);
     
    // Combined shader of inner glow and color tint
    COLOR.rgb += maskImageBrightness * (brightnessRange * sin(frequency * TIME) + brightnessOffset) * tintColor * tintBrightness;
}
Tags
brightness, dim, glow, mask, tint, visual effect
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Useful Gradient Effects All-in-one Shader

Animated Fade Shader with Additional Effects

Simple UI Noise Mask

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
toledos
toledos
30 days ago

This is very cool! Thank you for sharing the blog post as well.