Ripple Button Shader
The Ripple Button Shader is designed to create a dynamic ripple effect on UI elements, such as buttons, triggered by user interactions.
This shader is suitable for UI designs where interactive feedback enhances user experience, such as touch-based interfaces or visual effects for button clicks.
It offers customizable parameters:
– ripple’s size;
– ripple’s color;
– base color;
– blend width;
– UV scale = to form ripple form.
Usage example gdscript on Button:extends Button
var tween : Tween
func _ready():
get_material().set_shader_parameter("ripple_origin", Vector2(0,0))
get_material().set_shader_parameter("ripple_radius", 0.0)
func _input(event):
if event is InputEventMouseButton and event.pressed:
if get_global_rect().has_point(event.position):
var local_pos = (event.position - global_position) / size
get_material().set_shader_parameter("ripple_origin", local_pos)
ripple_effect()
func ripple_effect():
tween = create_tween()
tween.tween_method(
func(value):
get_material().set_shader_parameter("ripple_radius", float(value) / 50.0),
0.0,
150.0,
1.5
)
Shader code
shader_type canvas_item;
uniform vec2 ripple_origin = vec2(0.0, 0.0);
uniform float ripple_radius : hint_range(0.0, 1.0) = 0.0;
uniform float ripple_width : hint_range(0.01, 0.1) = 0.05;
uniform vec4 ripple_color : source_color = vec4(1.0, 0.0, 0.0, 1.0);
uniform vec4 base_color : source_color = vec4(1.0,1.0,1.0,1.0);
uniform vec2 uv_scale = vec2 (1.0,0.5);
void fragment() {
vec2 uv = UV * uv_scale - ripple_origin;
float dist = length(uv);
float ripple = smoothstep(ripple_radius, ripple_radius - ripple_width, dist) *
smoothstep(ripple_radius + ripple_width, ripple_radius, dist);
float center_blend = smoothstep(0.0, ripple_radius - ripple_width, dist);
COLOR = mix(base_color, mix(base_color, ripple_color, ripple), center_blend);
}
