Tileable Water with refraction

Get help using Construct 2

Post » Mon Sep 02, 2013 6:18 pm

I wasn't sure where to put this post.

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



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
christina2013-09-07 17:11:16
B
28
S
12
G
4
Posts: 193
Reputation: 4,581

Post » Mon Sep 02, 2013 6:31 pm

That looks pretty cool! It's a pretty neat effect.
B
103
S
38
G
19
Posts: 962
Reputation: 17,996

Post » Wed Sep 04, 2013 12:00 am

Thanks C-7 it took a lot of research and head-scratching :)
B
28
S
12
G
4
Posts: 193
Reputation: 4,581

Post » Wed Sep 04, 2013 12:22 am

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.
Image
B
24
S
8
G
10
Posts: 1,821
Reputation: 8,279

Post » Wed Sep 04, 2013 4:07 am

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?
B
28
S
12
G
4
Posts: 193
Reputation: 4,581

Post » Wed Sep 04, 2013 4:42 am

Nice work!
B
22
S
4
G
1
Posts: 100
Reputation: 2,150

Post » Thu Sep 05, 2013 1:14 am

[QUOTE=christina]@Ashley can we get an offset image property for tiled backgrounds, if @tulamide and I promise to write a big tutorial on it?[/QUOTE] xD
Image
B
24
S
8
G
10
Posts: 1,821
Reputation: 8,279

Post » Fri Sep 06, 2013 6:19 am

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.
B
14
S
7
G
3
Posts: 145
Reputation: 3,035

Post » Fri Sep 06, 2013 10:22 am

Thank you! I've learned something very useful and beautiful today!
composer - multimedia artist
www.eli0s.com/en/
B
69
S
27
G
6
Posts: 1,146
Reputation: 10,379

Post » Fri Sep 06, 2013 10:34 am

[QUOTE=Sebastian] 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.[/QUOTE]
+1

[QUOTE=Sebastian]Your tileable water with refraction tip is cool too! Thanks for sharing it.[/QUOTE]
+1
B
34
S
9
G
1
Posts: 47
Reputation: 4,612

Next

Return to How do I....?

Who is online

Users browsing this forum: dop2000 and 33 guests