Toon styled water

So in this game I have been working on, the artist made a painted concept sketch/mockup of how the level graphics could be, like this:

Click image to enlarge.

And my first reaction was something like, oh noes, now they want some kind of water/fluid simulation stuff and this should run mobile. But then I thought about it some more and some different approaches and eventually came up with this.

A way to do toon-like water/ripples/edge foam for dynamically generated levels.
(Note. This might have been done in better ways before, haven´t really looked in to it.)

What I’m talking about here is the edges/outline of the objects, just to be clear.

The idea is that you draw like a “depthslice” of the surface of your water to a texture/rendertarget white on black, like you were looking straight up or down with no perspective. Then you run a blur-pass on that texture/rendertarget, this is used for the “ripples”. Then, without clearing, you draw once more on top without the blur, this is to get the hard outline.

So now you have a texture that looks something like this:

Then you feed this texture/rendertarget to a shader.
In the shader we take the pixel value and multiply it by a larger number and run that value through a sin-function along with time. This makes the gradient part “peak” and animate outwards with time.
If we then “cut off” these peaks when they are above a certain threshold and then set that value to 1, we get the ripples.

Also to get some more “life” in it, we feed the shader with another texture, like a noise pattern of some sort. We can then move it and use the pixel-value to remove the ripples on some places to get it to look less static. And also to offset/wave everything a bit and also to make bigger ripples.

The end result in the game was like this:

Click image to enlarge.

In my usecase the levels were static, as in no objects moved around, so the setup could be done once in the beginning of each level. I also only had square and round objects. So what I did was to draw sprites, according to how the level looked, to a offscreen orthographic camera. Then render that once with the blur and once more with no blur on top.
If you were to have moving objects that should be included, you would have to render this all the time. And possibly do some kind of “depthslice” of the real geometry along the surface of the water. I have not looked in to that.

Check out this test on youtube to see it running:

Here is a link to that proof-of-concept unity-project on github.
This was fast-hacked just to test the idea, so it’s very rough and not production-ready code.

And if you want to play the game, it is here: App Store and Google play. It is a logic puzzle game