Wobbly Effect – Hand painted animation

Hi there,

Here is a wobbly effect / hand painted animation for 2d sprites.

Uniforms:

  • flowMap: aka displacement map, adjust the movement of the sprite using normals.
  • strenght: Force of the distortion from the displacement map.
  • speed: Velocity of each frame.
  • frames: How many frames should have the animation.

Important note: It’s better to have a little transparent border in the image so that the effect can go outside the sprite. If not, the edges will be cut. (See screenshot with the normal logo vs logo with transparencies).

Stay safe everyone!

Shader code
shader_type canvas_item;

uniform sampler2D flowMap; //Displacement map
uniform float strength;    //Force of the effect
uniform float speed;       //Speed of the effect
uniform int frames : hint_range(1, 10); //Frames of the effect

//Returns a value between 0 and 1 depending of the frames -> exemple: frames = 4, frame 1 = 0.25
float clock(float time){
	float fframes = float(frames);
	return floor(mod(time * speed, fframes)) / fframes;
}

void fragment(){
	float c = clock(TIME); //Get clock frame
	vec4 offset = texture(flowMap, vec2(UV.x + c, UV.y + c)) * strength; //Get offset 
	//COLOR = texture(TEXTURE, vec2(UV.x,UV.y) + normal.xy); //Apply offset
	COLOR = texture(TEXTURE, vec2(UV.x,UV.y) + offset.xy - vec2(0.5,0.5)*strength); //We need to remove the displacement 
}


// TEST CLOCK
/*
void fragment(){
	float c = clock(TIME);
	COLOR = vec4( c, c, c, 1);
}
*/
Tags
stylized
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

Foliage animation

Undertale Animation Skew

shock wave animation

Subscribe
Notify of
guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
CatalaHD
CatalaHD
3 years ago

Woah tremendous shader! Like 🙂

lllll
lllll
2 years ago

Thanks a lot, awesome shader! Is it possible to affect the entire viewport?

ArtcadeDev
1 month ago
Reply to  RoughSkin

After applying the changes, I do see the results and it is working, but there is some sort of artifacts happening as well.

Any idea how to fix it?

ArtcadeDev
1 month ago

Thanks, I’ve used it my latest project.