How to do 2d water distortion?

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
Imaculata
Party member
Posts: 102
Joined: Mon Aug 10, 2015 2:51 pm

How to do 2d water distortion?

Post by Imaculata »

You may have seen some of my progress on this 8 bit Castlevania-style game. The game is a sidescroller, and I'm trying to find a good way to do a water distortion effect. I had a look in the shader topic, and only found this simple distortion shader that you see in the screenshot here. It's close to what I want, but not good enough. The effect looks really bad where it reaches the edges of the tiles. It basically only has empty space to work with, so you get this stretched color, which doesn't look good. The shader also seems to distort based on screenposition, so the water changes distortion whenever the screen moves (or when you jump). And that is not what I want.

What I'm basically looking for is an effect that can distort the tiles a little bit along the horizontal plane, without getting these ugly colors on the edge of the image. It doesn't have to be a wave pattern, and I don't need/want reflections. After all, we're not looking at the surface of the water, we're seeing directly underwater. Does anyone know of a good way to do this?

Image

Code: Select all

function setupShaders()
	distortion = love.graphics.newShader([[
	extern number time;
	extern number size;
	vec4 effect(vec4 color, Image tex, vec2 tc, vec2 pc)
	{
		vec2 p = tc;
		p.x = p.x + sin(p.y * size + time) * 0.03;
		return Texel(tex, p);
	}
]])

distortion:send("size", 10)
end
Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot] and 38 guests