 |
Attention | Topic was automatically imported from the old Question2Answer platform. |
 |
Asked By | diogo_0 |
Hi,
How can I replicate the effect in the gif bellow? a simple 2d drop shadow effect?
|
Reply From: | volzhs |
check this demo.
Thank you for answering, this is almost what i need. As can be seen in the gif, as the ball moves and rotates the shadow stays in place, at an offset, with the example from the project sprite_shaders, the shadow rotates with the sprite (https://streamable.com/4ej5z).
How can i fix this?
diogo_0 | 2018-04-03 15:39
I’m not familiar with shader.
need to research and test with docs.
Shading language — Godot Engine (3.0) documentation in English
volzhs | 2018-04-04 12:58
Same, complete noob when it comes to shaders. Looks like a good time to start learning.
diogo_0 | 2018-04-04 14:23
Maybe try to take a screenshot of the sprite, Then use removebg to extract just the shadow, And put the shadow seperately
Alternatively you can try blurring the image and then setting its opacity using modulate to create a shadow, Here is some shader code that blurs a image. (if it looks weird then try adjusting the steps)
shader_type canvas_item;
render_mode blend_mix;
uniform float radius = 4.0;
uniform int steps = 32;
uniform float vertex_expand = 2.0;
mat2 rotationMatrix(float angle){
angle *= PI / 180.0;
float s = sin(angle);
float c = cos(angle);
return mat2( vec2(c, -s), vec2( s, c) );
}
void vertex() {
VERTEX.x *= vertex_expand;
VERTEX.y *= vertex_expand;
}
void fragment() {
float uvx = UV.x * vertex_expand - vertex_expand/2.0 + 0.5;
float uvy = UV.y * vertex_expand - vertex_expand/2.0 + 0.5;
vec2 new_uv = vec2(uvx,uvy);
vec4 col = texture(TEXTURE, new_uv);
float angle = 360.0 / float(steps);
for (int i = 0; i < steps; i++){
col += texture(TEXTURE, new_uv + vec2(radius, 0.0) * rotationMatrix(angle*float(i)) * TEXTURE_PIXEL_SIZE);
}
col /= float(steps) + 1.0;
COLOR = col;
}