Radar Blip Ring

Creates an expanding ring for a radar blip (Part of a pack of 3 shaders)

Implementation:
I used a ColorRect in the size that I wanted the scanner to be

Uniforms:
Circle Width: How wide the ring should be

Wait TIme: How long to wait between each expansion
Speed: How quickly the ring expands

Alpha Boost: Multiplicative factor for the ring’s alpha value

Shader code
shader_type canvas_item;

// --- Uniforms --- //
uniform float circle_width: hint_range(0.0, 1.0, 0.05) = 0.15;
uniform float wait_time: hint_range(0.0, 5.0, 0.1) = 0.5;
uniform float speed: hint_range(0.0, 10.0, 0.1) = 1.0;
uniform float alpha_boost: hint_range(1.0, 5.0, 0.1) = 2.0;

// --- Functions --- //
void fragment() {
	float dist = distance(UV, vec2(0.5));
	float mod_dist = dist - mod(TIME * speed, 0.75 + wait_time) + 0.5;
	COLOR.a *= 1.0 - step(0.5, mod_dist);
	COLOR.a += step(0.5 - circle_width / 2.0, mod_dist) - 1.0;
	COLOR.a -= 2.0 * dist;
	COLOR.a *= alpha_boost;
}
Tags
animated, expanding, radar, radar blip, ring
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.

More from KingToot

Pixelize

Shine

Radial Blur

Related shaders

Radar with trace blip

Radar Blip

Simple horizontal radar scan with blip trace

Subscribe
Notify of
guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Vadim
Vadim
3 months ago

Adjusted the transparency of the shader. Why was it opaque.
Here is the code:

shader_type canvas_item;

// — Uniforms — //
uniform float circle_width: hint_range(0.0, 1.0, 0.05) = 0.15;
uniform float wait_time: hint_range(0.0, 5.0, 0.1) = 0.5;
uniform float speed: hint_range(0.0, 10.0, 0.1) = 1.0;
uniform float alpha_boost: hint_range(1.0, 5.0, 0.1) = 2.0;

// — Functions — //
void fragment() {
  float dist = distance(UV, vec2(0.5));
  float mod_dist = dist – mod(TIME * speed, 0.75 + wait_time) + 0.5;
   
// Background transparency
  COLOR.a = 0.0; // The background is completely transparent
   
  // Ring effect
  float ring_alpha = 1.0 – step(0.5, mod_dist); // Transparency inside the ring
  ring_alpha += step(0.5 – circle_width / 2.0, mod_dist) – 1.0; // Transparency of the edges of the ring
  ring_alpha -= 2.0 * dist; // Attenuation of transparency with distance
  ring_alpha *= alpha_boost; // Increased transparency
   
  // Applying the transparency of the effect
  if (ring_alpha > 0.0) {
    COLOR.a = ring_alpha; // Leaving only the effect
  }
}

Last edited 3 months ago by Right Sorcerer
SquishyFishy
SquishyFishy
27 days ago

Simple, straightforward, easy to apply, many thanks!