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;
}
This is very cool! Thank you for sharing the blog post as well.