Godot

5904 readers

1 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

Other Communities

Rules

Posts need to be in english
Posts with explicit content must be tagged with nsfw
We do not condone harassment inside the community as well as trolling or equivalent behaviour
Do not post illegal materials or post things encouraging actions such as pirating games

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

The icon is a modified version of the official godot engine logo (changing the colors to a gradient and black background)
The banner is from Godot Design

founded 1 year ago

MODERATORS

[email protected]

[SOLVED] How to apply a shader to a sprite without it becoming a rectangle? (startrek.website)

submitted 3 months ago* (last edited 3 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] 0 points 3 months ago* (last edited 3 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.

[–] [email protected] 0 points 3 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] 0 points 3 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.