Spotlight Effect/Transition with Feathering & Position

Shader code
shader_type canvas_item;
render_mode unshaded;

uniform float circle_size = 0.5;
uniform float feather = 0.05;
uniform vec2 circle_position = vec2(0.5, 0.5);
uniform float screen_width = 1920;
uniform float screen_height = 1080;

void fragment() {
    float ratio = screen_width / screen_height;
    vec2 adjusted_uv = vec2(mix(circle_position.x, UV.x, ratio), UV.y);
    float dist = distance(circle_position, adjusted_uv);
    float edge_start = circle_size - feather;
    float edge_end = circle_size + feather;
    COLOR.a = smoothstep(edge_start, edge_end, dist);
}
Tags
circle, spotlight, transition
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

Circle Mask (with Feathering & Position)

Rainbow – Changes based off y position.

Squish according mouse position

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
casualtyxy
casualtyxy
1 month ago

Perfection!

Zibetnu
1 month ago

Thanks for posting this! It worked great in my game:
https://store.steampowered.com/news/app/2499500/view/693091765959262924