Ripple effect

You need to specificy size of texture in pixels (for example 640,240).

You can also set margin in pixels (optional).

In order to make the shader work, you have to set the circle_center to your relative mouse position Vector2(0.0 – 1.0, 0.0-1.0). To get relative value of where you clicked you will have to do some math. Here is example of getting relative position for Sprite2D:

var pos = $Button.to_local(event.position)/Vector2(640,240)

and then you can pass the position to shader:

$Button.material.set_shader_param("circle_center",pos) 

To animate the click effect you have to tween the “time” parameter like so:

var tw = create_tween().set_trans(Tween.TRANS_SINE).set_ease(Tween.EASE_OUT)

tw.tween_property($Button.material,"shader_param/time",1.0,0.5).from(0.0)

Shader code
shader_type canvas_item;

uniform vec2 circle_center = vec2(0.);
uniform float time : hint_range(0.,1.) = 1.;
uniform vec2 size = vec2(64.);
uniform vec4 color : hint_color = vec4(1.);
uniform vec2 margin = vec2(0.);

void fragment() {
	vec2 center = vec2(.5);
	vec2 coords = (UV - center) / vec2((size.x-margin.x*2.)/size.x,(size.y-margin.y*2.)/size.y) + center;
	vec4 edges = vec4(.0);
	if (abs(coords.x - center.x) <= .5 && abs(coords.y - center.y) <= .5) {
		edges.a = 1.0;
	}
	vec2 uv = (UV - circle_center);
	float ratio = size.x/size.y;
    uv.x *= ratio;
	float d = length(uv);
	float circle = smoothstep(d-.01,d,.25+(ratio-.25)*time-.01);
	COLOR = vec4(color.rgb,max(circle-max(time,.25),.0))*edges.a;
}
Tags
animation, border, button, circle, click, corner, margin, material, ripple, touch, ui
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

Ripple effect

Ripple shader

TV noise effect

guest

0 Comments
Inline Feedbacks
View all comments