Request for creating shaders for button animation!

Help Shaders
, ,
1

Hey, how are you? I would like to put an effect on some buttons in my project, however, I don’t know anything about shaders. The effect I would like to make is a Ripple effect, like on Android buttons… Look:
ripple-effect-exemple

I would like to place this effect inside a Control node and have it change the TextureRect node inside it. If anyone can help me, or knows someone who understands shaders…

Send me a message here or on discord! I pay! Please!

2

I guess basically what u need here is - set shader parameter on click via set_shader_parameter. In shader u mix() between common background color and smoothstepped circle using global uniform TIME. Kinda simple thing to do

3

click_shader

GDScript:

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
	)

Godot shader:

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);
}
1 Like