Water and underwater animation

[looaks]

I'm working on an animated tiled water it is supposed to be murky water even though the palette isn't definitive.
 I'm almost happy with the surface (it was a pain to maintain consistency between animated tiles) but i'm struggling with the 'underwater' simply put I don't like it and i run out of ideas. Does somebody can help me with this?




Thanks a lot

[CatBerry]

Im not an expert but i think the water does not move that much under the surface ô.o
and uhm has lot less that would look string like ^^ (sorry i lack english words here :/ )
sadly google does only give me ocean water pictures when i try to find a propper reference... sorry.

you did a greatjob ont he water surface

[Johasu]

Just some thoughts that might help.
Underwater you wouldn't see the actual flow unless there was something bending or reflecting light within it.
Below the surface it will appear sort of as the sky does though diminished. Flow would likely be captured with particles or elements within the water moving or drifting. If there is blurring from light within the water that is likely from variance in the refraction from light hitting the water. That's why shallow ocean floors have that very attractive rippling light effect.
Examples of underwater elements to simulate flow[bubbles, sticks, leaves, silt, plants along the bottom waving in the current.]
The look you have now gives off an appearance of surface shadows (top down/45 degree angle perhaps)  Try going for a transparency feel and put some other elements in.
I remember Donkey Kong Country 2 or 3 having really great water visuals.  Check that out maybe.

[astraldata]

I have to say that, if anything the water looks like a pool of liquid metal/mercury, which is to say, it's a pretty cool looking effect for something other than the murky water you're going for.

And I have to second the Donkey Kong Country 2 water effect. I, however, don't think its effect will match the view/perspective you're going for, so I suggest using the dark color against the bottom of the waves, with a few simple rays of very subdued light appearing to fade in/out with the passing waves to simulate the murkiness of the water. As for the middle and bottom respectively, I would suggest using a solid color to indicate the water, and then for the bottom, just some *subtle* shifts up/down of perhaps the same dark color simulating some weak up/down motion (not the flowing pattern you've got there, which looks like a roaring riverbed with stringy kelp or something flowing), or just some plants/grass/algae shifting back and forth very slightly or something to keep it lively.

[looaks]

Thanks to everyone, that's the kind of feedback I was looking for.
My first attempt was a simple flat bright green/yellow color but it looked too static to me so maybe I overcompensated a little with the underwater storm (BTW I come up with a rather simple solution for that. In case somebody want to replicate the effect I may put up a small tutorial)
I don't like bubbles since i find them too 'cartoonish' and is not the style we are going for also there's no need for the water to move under the surface.
The photo reference a found online didn't help me much and the others pixel art examples I found in old videogames didn't satisfy me. Does somebody remember any other game with that effect in it?

[astraldata]

Megaman X2 (I think) had a portion of the latter end of the level where Megaman was walking through some water sort of like this if I remember correctly -- it was on the Sting Chameleon level if I am remembering correctly. The way they handled it though was that it was in the foreground and so thick and goopy that it covered your player sprite as you waded through it like mud. I'm not sure of any other examples that look similar to what you're doing though, outside of Donkey Kong Country 2 (which you should look at anyway, just because the level artwork is amazing).

[looaks]

I made some progress but still I feel there's lot of room for improvement. I figure out that the lake bottom add some perception of depth instead of using various gradient of green. I just start animating the kelps and already feels more dynamic. I didn't figure out what to do with the water itself  I can't use diagonal rays of light filtered from above because i need it to be a seamless tile. i could:
- Use an 85% transparency (but i feel that somehow transparency kills the 'pixely' feeling )
- Simulate some random specs floating in the water adding some particle effects in the code (I'm not sure)
- Decide that my game doesn't really need water after all



I also changed the animation for the surface I'm not sure which one is better, what do you guys say? the old one, the new one or something else altogether?

Thanks!

[Johasu]

http://www.youtube.com/playlist?list=PLezpCwYgD_yvJL35X8IacEkjovlCLwh4p
I found this guy on youtube.  He has a lot of stock amazon river underwater footage.  I'm sure if you spend some time skipping through his videos you can find a lot of really cool inspirations for things to liven up your water flow.   

I really like the dingy water color you have going on btw.

[astraldata]

I prefer the 3d look of the crests in the original animation personally (the new crests have no form/depth and seem incomplete), and judging by the background of your original image (if that's the intended context of the water of course), I preferred the cooler colors in that animation to the new one. However, the wiggly plant looks nice and the new toned town version of the sloshing seems more like a lake with a breeze going across it, though the old one would work for that too.

Additionally, I still would suggest a *very* tiny bit of dappled light or something being interrupted subtly by the murkiness of the water in the new animation. Try some *slightly* lightened versions of the main water color, but use it sparingly and almost exclusively beneath the surface waves, but no more than about 8 pixels deep to keep the sense of a murky gradient of light.

[Nmb910]

I really like your most recent update Looaks.


To add to the depth, I think it would fit very nicely to add a more desaturated kelp, to imply that it's being dulled by the water, or to show more depth.

I like the surface water animation, and think it would add to the 'murky' effect if the animation was slowed down in-game.


I also think vague/blurred impressions of shapes in the background would help as well.

[looaks]

I have done some experiment with surface filtered light despite my effort everything i tried requires too much colours for my taste or  looked fake (especially with tiling)
I switched back to the original water line, but i kept the second colour. 
 


also i added some transparency but I'm still not sure on this one.

[Ymedron]

Do you think you could try a slightly animated pillar of light at a slight angle going through the water? That might work and murky water/air usually has that kind of effect in sunlight.

I also think you could add more kelp into the water, kind of a murky silhouette. Transparency doesn't work for the dirty feel, because you really couldn't see nearly that well if the water was proper river-style.

[HezaKey]

What if instead of transparency to the background elements, make some larger shapes/rocks and set them in the background.
Make them have next to no detail/flat, as if your seeing them through murky waters.  Maybe fade the outline.

Sort of like the second layer of rocks you already have now.  You could even recolor the kelp animation and set it in the background as well.

[Probo]

have you tried keeping the transparency and making the water colour a gradient that gets darker, murkier and more opaque as the water gets deeper?

[r1k]

I think probo's idea sounds neat.  I did a quick mock up in photoshop using transparent gradients.  Maybe it can atleast give you ideas

[looaks]

Thanks again to everyone!
Since I'm working to other parts of the game I didn't spend much time on the water (although I will eventually finish it)

@milokey I will give a try, I have  to see  how thing works out

@probo @R1k  I don't want to use gradients. I like the aesthetics of pixel art and I don't fell like using a tons of colours. I like the strikes of light penetrating the surface but I can't use them because I need the water to be tileable

I tried VERY quickly to add some light under the surface here is the result:

It will be fun/a pain to animate accordingly AND seamlessly

[Probo]

if youre worried about it looking faithful to say the 16 bit era, transparent gradients were used in snes games. i always think of FF6 where there is a gradated transparency over the pixel art 'floor' in the intro, to make it look like it gets darker as it stretches into the distance.

http://www.youtube.com/watch?v=LHqGiwZNTNM

if you used this and make anything below the water level lower-colour (you dont need many colours to represent an obfuscated rock), and perhaps even dither the gradient, you could keep the onscreen colour count down a bit more.

i think alien 3 on the snes had a circular dithered gradient transparency over the entire screen for dark areas.

also maybe if the waters transparent you could have the shafts of light in the background?