Tileable Water with refraction

I wasn't sure where to put this post.

I made a water effect with refraction, using only built-in effects.

<img src="https://dl.dropboxusercontent.com/u/28087823/Construct%20Examples/Water%20Refraction/Html/screenshot.png" border="0">

What I used:

1. an animated sprite of Perlin Noise (24 frames at 48x48pixels, made seamless in photoshop, frame by frame, with the Filter->Offset method) inside a semitransparent layer with the "Lens" effect.

2. a caustics sprite set on "dodge"

3. a semitransparent greenish tiledBackground set to hard light (to set the color of the water and everything in it)

4. a semitransparent water "surface" sprite

So it's tileable refractive water, that can affect all layers beneath it, and doesn't use masking or "force own texture" on layer. This is something that can't be reproduced any other way in Construct 2, so far as I know.

You can check the effect out here:

live demo

and you can study the CAPX here (although a little sloppy):

CAPX

EDIT: Also the principle behind surface reflection. Read more on the second page of this thread.

Reflection CAPX

Reflection Live Demo

That looks pretty cool! It's a pretty neat effect.

Thanks C-7 it took a lot of research and head-scratching :)

You've done a wonderful job here. And a plus is that even without any graphics card acceleration, rendered entirely using the cpu (tested with FF on WinXP) it still runs with 36 fps - a good value.

Also your technique is a brilliant example, why it would be an advantage to have an 'offset image' property for the tiled background object (like in CC). One perlin noise texture offsetted in realtime would reduce the memory load and make it easier to maintain the event sheet, while it wouldn't add to gpu/cpu load.

tx tulamide, yes it's a pretty cheap effect, it just needs a little advance preparation.

But you're right, it could be made better with the "offset image" feature. I've seen a lot of requests, too.

Ashley can we get an offset image property for tiled backgrounds, if tulamide and I promise to write a big tutorial on it?

Nice work!

Ashley can we get an offset image property for tiled backgrounds, if tulamide and I promise to write a big tutorial on it?xD

Hi Christina. I bit off topic, but I recognize your art from your Ludum Dare entry, Legend of Troll. Nice work on that. I really like your troll design.

Your tileable water with refraction tip is cool too! Thanks for sharing it.

Thank you! I've learned something very useful and beautiful today!

Hi Christina. I bit off topic, but I recognize your art from your Ludum Dare entry, Legend of Troll. Nice work on that. I really like your troll design.

+1

Your tileable water with refraction tip is cool too! Thanks for sharing it.

+1

This is beautiful!

Regardless of the effect, which is great, I loved the entry! Great job.

lukedirago

Niko

—

eli0s

Sebastian

Thank you. I wish the queen didn't jump over the obstacle randomly. I think I['ll have to make a custom level-solving algorithm instead of using the platform behavior. But yeah, apart from being a broken game, I like it too

christina,

I wish you could figure out a way to do real time reflections (in a simple and elegant way like you did the refractions) and share it with us <img src="smileys/smiley14.gif" border="0" align="middle">

Right now I can't figure out a way other than duplicating sprites, mirror them vertically and masking them to gradually hide the edges, which is really inconvenient and only works with still objects...

There is the canvas object that can achieve some interesting results, but its implementation is too complicated for my simple brain.

At this post, NEVES is demonstrating an excellent example, but he keeps his magic a secret :(

Again, thank you again for sharing your effort!

Elias

Wow! Thank you very much for sharing! It's really amazing!