this post was submitted on 27 Jul 2024
33 points (100.0% liked)

Godot

6007 readers
21 users here now

Welcome to the programming.dev Godot community!

This is a place where you can discuss about anything relating to the Godot game engine. Feel free to ask questions, post tutorials, show off your godot game, etc.

Make sure to follow the Godot CoC while chatting

We have a matrix room that can be used for chatting with other members of the community here

Links

Other Communities

Rules

We have a four strike system in this community where you get warned the first time you break a rule, then given a week ban, then given a year ban, then a permanent ban. Certain actions may bypass this and go straight to permanent ban if severe enough and done with malicious intent

Wormhole

[email protected]

Credits

founded 2 years ago
MODERATORS
[email protected]
[email protected]
[email protected]
33
[SOLVED] How to apply a shader to a sprite without it becoming a rectangle? (startrek.website)
submitted 4 months ago* (last edited 4 months ago) by [email protected] to c/[email protected]
4 comments fedilink hide all child comments
 

I have been looking for a 2D reflective water shader for some time and was delighted to see that this tutorial was posted on YouTube to create just that:

https://www.youtube.com/watch?v=wPr5PvSgxFo

I've had a go at implementing it and have got the reflective water rendering. It's very "Kingdom: Two Crowns" like when spread across the full width of the scene.

However, as you can see from the image above, I've drawn a pond (as a separate Sprite2D) and I've applied the water shader to the pond. It's done that, but draws the water as a rectangle.

Is there a way to apply this shader to the Sprite2D, but conform to the actual sprite (only the light blue), rather than as a rectangle?

top 4 comments
sorted by: hot top controversial new old
[–] [email protected] 21 points 4 months ago (1 children)

I think you'd want to apply the alpha value of the sprite. You can do that by making the last line "COLOR = vec4(mix(...).rgb, texture(TEXTURE, UV).a)"

[–] [email protected] 5 points 4 months ago

This worked perfectly - thank you!!

For anyone else looking here later, the final shader code (confirmed working Godot 4.2) is:

shader_type canvas_item;

uniform sampler2D screen_texture : hint_screen_texture;
uniform vec4 water_color : source_color;
uniform sampler2D wave_noise : repeat_enable;

void fragment() {
	vec2 water_wave = (texture(wave_noise, UV * TIME * 0.02).rg - 0.5) * 0.02;
	vec2 uv = vec2(SCREEN_UV.x , SCREEN_UV.y - UV.y) + water_wave;
	vec4 color = texture(screen_texture, uv);
	float mix_value = 1.0 - UV.y;

	float avg_color = (color.r + color.g + color.b) / 3.0;
	avg_color = pow(avg_color, 1.4);
	mix_value += avg_color;

	mix_value = clamp(mix_value, 0.0, 0.7);
	COLOR = vec4(mix(water_color, color, mix_value).rgb, texture(TEXTURE, UV).a);
}

Credits to Single-mindedRyan for creating this shader in the first place.

[–] [email protected] 8 points 4 months ago

Oof, I haven't touched shaders in Godot myself yet, besides a very simple section during one tutorial, so maybe I should not give any advice, but I think this can be solved by applying the shader to the pond and adding a check for transparency before applying the changes to the pixels.

[–] [email protected] 8 points 4 months ago* (last edited 4 months ago)

I'm typing the from my phone and can't double check on my computer.

In the fragment shader, get the texture of the white puddle, and the UV of the puddle texture, then get the pixel color of this puddle texture using the same method as the color for the mirror effect was gotten except don't reverse the V coords. With this color, multiply only the alpha channel into the final color's alpha channel.