35
[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 HobbesHK@startrek.website to c/godot@programming.dev
3 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?

all 4 comments
sorted by: hot top controversial new old
[-] julianh@lemm.ee 21 points 3 months ago

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)"

[-] HobbesHK@startrek.website 5 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.

[-] Wxnzxn@lemmy.ml 8 points 3 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.

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

Godot

5866 readers
38 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

!roguelikedev@programming.dev

Credits

founded 1 year ago
MODERATORS
snowe@programming.dev
Ategon@programming.dev
Feyter@programming.dev