Wobbly Shader - Godot
A downloadable asset pack
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!
Download
Comments
Log in with itch.io to leave a comment.
The shader is awesome but when I apply it the sprites lose their modulate color changes, which is unfortunate! Do you know how this could be fixed? I think it might have worked in the past but doesn't anymore due to Godot 4 changes
With a bit of research i found a solution! Here's the code with changes i did:
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
varying vec4 v_vertex_color;
void vertex() {
v_vertex_color = COLOR;
}
//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 = v_vertex_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);
}
*/
So glad you uploaded this! I used a similar technique (inspired by your work here) across several layers to create a fire-like effect for some text in my most recent game. I gave you credit, so hopefully more folks see your work here. Thanks for sharing! :)
Love this shader! You can actually use a NoiseTexture as the "Flow Map" too instead of downloading a random normal map from the internet. In the "Shader Param" section, hit the dropdown next to "Flow Map" and select "New NoiseTexture". Check "Seamless" and "As Normal Map" and set "Bump Strength" to a high value (I use 32). For "Noise" hit the dropdown and select "New OpenSimplexNoise." Then you can tweak the look with the "Strength", "Speed", and "Frames" options at the top of "Shader Param."
sorta like baba is you.
How did you make the flow map textures (new to shaders & curious)?
I used some random normals from google images. Maybe it sounds a bit lame, and it is. ;-)
oh lol, thanks anyway it might be a bit lame but it is a valid way of getting them :)
Is it possible to upload a gif of the animation? Looks great
Yeees, I will make some gifs. Thanks!!