Sprite 2D Outline

Animated Radial Lines Shader with Texture Preservation

This shader creates a pattern of animated radial lines that rotate around a central point while preserving the base texture of the sprite. It’s perfect for energy effects, force fields, or circular progress indicators.

Features

– Animated radial lines rotating around a central point

– Preserves the base texture of the sprite/node

– Highly customizable through uniforms

– Effect contained within an adjustable radius circle

– Optional rectangular frame around the effect

Uniform Parameters

– color (Color): Color of the radial lines

– direction (Range: -1.0 to 1.0): Rotation direction of the lines

– frequency (Range: 0.1 to 30.0): Number of radial lines

– speed (Range: 0.5 to 20.0): Rotation speed

– radius (Range: 0.01 to 1.0): Radius of the container circle

– line_thickness (Range: 0.0 to 0.5): Thickness of the rectangular frame

Recommended Usage

This shader is perfect for:

– Force field effects

– Circular loading indicators

– Energy or magic effects

– Dynamic UI elements

– Shield or barrier effects

Implementation Notes

The shader uses UV coordinates and trigonometric functions to create the radial pattern. The lines are generated using a sine function that varies with angle and time. The final effect is smoothly blended with the sprite’s base texture using linear interpolation.

Compatibility

– Godot 4.x

– Works on sprites and CanvasItem nodes

– Compatible with base textures

Shader code

shader_type canvas_item;

uniform vec4 color: source_color = vec4(1.0);
uniform float direction: hint_range(-1.0, 1.0, 1.0) = -1.0;
uniform float frequency: hint_range(0.1, 30.0, 0.1) = 15.0;
uniform float speed: hint_range(0.5, 20, 0.5) = 3.0;
uniform float radius: hint_range(0.01, 1.0, 0.01) = 1.0;
uniform float line_thickness: hint_range(0.0, 0.5, 0.01) = 0.03;

void fragment() {
    vec4 base_color = texture(TEXTURE, UV);
    
    vec4 circle_outline;
    vec2 pos = UV - vec2(0.5);
    float circle = step(length(pos), radius);
    float angle = atan(pos.y, pos.x);
    float wave = 0.5 * sin(direction * frequency * angle + TIME * speed) + 0.5;
    circle *= step(0.5, wave);
    circle_outline = vec4(color.rgb, circle * color.a);
    
    float rect_alpha = 1.0 - step(abs(pos.x), (0.5-line_thickness)) * step(abs(pos.y), (0.5-line_thickness));
    vec4 effect = circle_outline * vec4(1.0, 1.0, 1.0, rect_alpha);
    
    COLOR = mix(base_color, effect, effect.a);
}

Tags