Simple 2d Water

Very simple 2d  water for cartoon game graphics

Shader code
shader_type canvas_item;

uniform sampler2D bg : hint_albedo;
uniform sampler2D wave1 : hint_albedo;
uniform sampler2D wave2 : hint_albedo;
uniform sampler2D noise : hint_black_albedo;

vec2 tile(vec2 _st, float _zoom){
    _st *= _zoom;
    return fract(_st);

float box(vec2 _st, vec2 _size){
    _size = vec2(0.5)-_size*0.5;
    vec2 uv = smoothstep(_size,_size+vec2(1e-4),_st);
    uv *= smoothstep(_size,_size+vec2(1e-4),vec2(1.0)-_st);
    return uv.x*uv.y;

void fragment(){
	vec2 st = vec2(UV.x/(SCREEN_PIXEL_SIZE.y/SCREEN_PIXEL_SIZE.x),UV.y);
    vec3 color = vec3(0.0);
   st = tile(st,8.0);
	color += texture(bg,st).rgb;
	color += 0.5* texture(wave1,vec2(st.x + TIME * 0.02,st.y +0.2  + sin(TIME*1.5) * 0.06)).rgb / 0.5 * texture(noise,vec2(st.x + cos(TIME * 0.5),st.y)).rgb;
	color += 0.5* texture(wave2,vec2(st.x - TIME * 0.08,st.y)).rgb / 0.5 * texture(noise,vec2(st.x ,st.y - sin(TIME * 0.5))).rgb;
	COLOR = vec4(color,1.0);
2d_water, sea, water
The shader code and all code snippets in this post are under MIT license and can be used freely. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

Related shaders

Stylized Water with DepthFade

2D Procedural Water

Wind Waker Water – NO Textures needed!


Newest Most Voted
Inline Feedbacks
View all comments
3 months ago

is not work,i use tilemap but is made my tile all white

29 days ago
Reply to  salee

try importing your images like so:

29 days ago

I add it to any project other than the demo one and the shader completely breaks

29 days ago
Reply to  Fresh

Found it! It was actually the way everything is imported.