Pixelation

Critique => Pixel Art => Topic started by: Zoggles on October 07, 2009, 07:24:46 am

Title: Hexagonal Animated Water Tile
Post by: Zoggles on October 07, 2009, 07:24:46 am

Ok, so this has been really bugging the hell out of me recently.. I've tried a multitude of different techniques (the rest of which I really didn't like), however, I'm still not sure about this one either. I'm almost tempted to make this a static tile instead of trying for a (what I hoped to be a very subtle and not distracting) animated one.

The edges of the tile I really dislike at the moment, but I need to take a break from it for now and continue again later on. They were done rather quickly as a bit of a test. Initially, the sides of the tile were static and just the top face was animated.

The image below shows the tile on its own, and how it works when actually tiled and what it looks like in a small mockup area.

(http://www.miniwizardstudios.com/odds/pix/Water-Tile.gif)


Comments, crits and suggestions very welcome at this stage...

-Z-
Title: Re: Hexagonal Animated Water Tile
Post by: EyeCraft on October 07, 2009, 03:17:53 pm
I think the issue comes from an indecision on the physical motion of the water. At the moment there appears to be 3 distinct directions of motion occurring simultaneously (surface lines moving left->right, surface pulses moving omnidirectionally and subsurface flowing down). I suggest just settling on one and working everything towards suggesting that motion. Maybe just simple lapping waves would be best. Subtlety will come down to the contrast and smoothness of the animation, I think. Try studying how water is done in other games, perhaps even 3D games and see what kind of shapes and motion there are. Sorry, that's all the advice I can really give at the moment.

Also, the grass tiles are very noisy, it would pay to give them a bit more attention, lower their contrast a little.
Title: Re: Hexagonal Animated Water Tile
Post by: .TakaM on October 08, 2009, 02:28:42 am
I like the surface animation just fine, the shimmers are great and I like the more subtle animation lying underneath it, no offense to Eyecraft but I don't think using other video game examples of water is very useful, it's best just to go to the source instead of another artists interpretation of it.

The drips on the sides though, I'd say are unnecessary. I don't think you need to explain the physicality of them with an animation, it'd look more sensible as if each tile of water was just up against glass.  :)
Title: Re: Hexagonal Animated Water Tile
Post by: Mush on October 08, 2009, 04:53:07 am
I think the drips on the sides are drawing to much attention to the water tiles. Also, it almost looks like you saved the grass tiles as jpeg.
Title: Re: Hexagonal Animated Water Tile
Post by: big brother on October 08, 2009, 05:48:38 am
I think the drops on the side would work if they were more subtle: less contrast between the drips and the side itself. Overall, that would help convey the wet and dynamic feel without stealing the focus.

The grass tiles would look great if you changed the hue to a more olive green. The plants could stay emerald. If you wanted to get really crazy, it might look cool if the plants were darker with a hue like hooker's green. I would make the grass on the side of the hex more "blade-like" (vertical lines) so it looks less like pressboard.

I really like the horizontal movement on the water, especially the varying tempos.
Title: Re: Hexagonal Animated Water Tile
Post by: Dusty on October 08, 2009, 05:57:59 am
Honestly, the subtle animation you have in the background of the water looks like those funky tidie-like animations you used to see in like, optical illusions and such.
Title: Re: Hexagonal Animated Water Tile
Post by: rikfuzz on October 08, 2009, 06:55:22 am
Your water's quite purpley- water gets it's colour from reflection of the sky in most situations, so I'd maybe add more cyan.  Have put a few suggestions into this little mock - not sure everything works (I was somehow surprised by the way the tiles connect) but feel free to take what you like from it!

(http://dl.getdropbox.com/u/1534394/waterhex.png)
Title: Re: Hexagonal Animated Water Tile
Post by: Mathias on October 09, 2009, 03:10:55 am
I like what I see; neat hex iso tiles! But, one thing about the water that definitely loses some merit is that the fluxing underwater animation is extremely mechanical, obviously done with posterized hue shift tweens, or something similar. And what that does is achieve a neat precise effect, but it's so mathematical/machine lookin', it loses out on that artistic organic manually drawn quality. I really like rikfuzz's underwater texturing, but now let's see him animate it like you, hehe. That's a whole other matter. You could try a looping bitmap displacement effect if you're photoshopping, but then it has to tile as well, so not sure how that'd turn out.

Nodoby seems to like the falling water texture on the water tile sides, eh? It's not too bad. I do agree less contrast would be good. No need to draw much attention to it. There is a discrepancy here however, and perhaps I just don't understand how these will be implemented in your game or whatever they're for, but you're treating the sides of the grass tiles as cross-section, like they're sliced, exposing the side (if not seems little blades and details should be hanging down over the soil layers rather than a perfect edge, but I guess this could boil down to a style choice), yet then you've got your water tiles like they're not sliced, but rather water cascading over an extruded hexagonal shape. I say make the concept for your tiles consistent to reduce confusion.

Not liking the grass top-face's texturing. Too sandy, it doesn't describe anything, it's just noise. Left/right sides of grass tiles are banded, must not be done yet. The little plants need help.
Title: Re: Hexagonal Animated Water Tile
Post by: hotnikkelz on October 10, 2009, 09:15:43 pm
The water needs more green in it.  The edit by rikfuz is too swimming pool like and everything big brother says is correct :)
Title: Re: Hexagonal Animated Water Tile
Post by: Zoggles on October 11, 2009, 12:48:48 am
There is a discrepancy here however, and perhaps I just don't understand how these will be implemented in your game or whatever they're for, but you're treating the sides of the grass tiles as cross-section, like they're sliced, exposing the side (if not seems little blades and details should be hanging down over the soil layers rather than a perfect edge, but I guess this could boil down to a style choice), yet then you've got your water tiles like they're not sliced, but rather water cascading over an extruded hexagonal shape. I say make the concept for your tiles consistent to reduce confusion.

Oh.. that's a very good point and you are spot on with that observation. Something that definitely didn't occur to me and possibly the main reason I felt that whatever I tried didn't fit.


As for studying water in other games, I have studied a wide variety of water effects and to be honest never liked any of them. While I don't think that truly reflecting nature is the most important aspect, obviously, if it is too far away from natural it tends to stick out like a sore thumb and be very noticeable.

Water (particularly in something like a lake without a distinct flow) has a very complex pattern of movements hence I had opted for two subtle effects rather than just the one. I was hoping to try and convey the underwater currents and also the wind affecting the surface creating the shimmers of light on the ripples. But wanted to try and keep both as subtle as possible, because the water areas are essentially 'null' areas of the game map. Initially I did have the water much lighter, but it was far too prominent so I made it darker to compensate, but I'll look into the colour choice more though.

Rickfuzz, thanks for the edit/image you've put up. It's certainly an interesting one and something I hadn't thought of. Though the first thing that springs to my mind is 'ice' and 'icicles' when I look at it. However, I do like the edges where it meets the land tiles.

As for the other comments, thanks guys, I will be updating again soon (some coding stuff to do at the moment though)

-Z-
Title: Re: Hexagonal Animated Water Tile
Post by: Conzeit on October 11, 2009, 03:09:17 am
May I just chime in to state the obvious and say
http://pixeljoint.com/pixelart/29178.htm
Fool did it best?
uhm.....yeah, I think you should go for the sliced water aproach...and do an actual botton made of dirt and rocks. You animate your waves...however you like (up the contrast tho) and then apply that as a lighting mask to the botton...it's gonna look much more natural.

The cascading stuff doesnt sound bad...but it sounds like it'd be messy to do it right...but maybe...who knows?
Title: Re: Hexagonal Animated Water Tile
Post by: Zoggles on October 13, 2009, 04:37:56 pm
Conceit: Yeah, a very nice iso piece.. though the water is not animated nor tileable. Still it is very nicely done and gives off great ambiance in the piece.

Anyhow I've had some FTP connection problems the last day or so but have just managed to get it working again and have uploaded my recent progress on a completely different style.

There is a bit of a bump in the animation currently.. one frame needs to be smoothed out somewhat, however. Opinions would be greatly appreciated :)

First one (re-post to reduce the need for scrolling)
(http://www.miniwizardstudios.com/odds/pix/Water-Tile.gif)

Newer W.I.P.
(http://www.miniwizardstudios.com/odds/pix/Water-Tile2.gif)


-Z-

*Edit: Updated to smooth out the bump in the animation slightly.
Title: Re: Hexagonal Animated Water Tile
Post by: EyeCraft on October 14, 2009, 01:12:09 am
Oh man, miles better!  :y:

One issue that immediately jumps out to me though is it looks like blocks of plastic on the sides. Water is translucent, so you shouldnt get such starkly defined edges like that on the sides; the light should filter through to the shaded side.

The palette for the water feels out of place. Water reflects the light around it, which is generally the sky outdoors. The colour it has at the moment implies a stormy, overcast sky, but the grass implies bright midday sunshine. Something bluer I think would fit better.
Title: Re: Hexagonal Animated Water Tile
Post by: Zoggles on October 14, 2009, 04:41:12 am
Heh was focusing so much on the actual animation and movement, I didn't really consider the palette before posting. However, you are very right about it being too stormy compared to the grass (which is also not finished though)

Updated.

(http://www.miniwizardstudios.com/odds/pix/Water-Tile3.gif)

As for the sides.. yeah. I still can't quite figure out what to do for them :(

-Z-
Title: Re: Hexagonal Animated Water Tile
Post by: Dusty on October 14, 2009, 05:09:22 am
Liking this a lot more, but I think the biggest problem I have with it is that it just doesn't have a very good flow. It animates wonderful, but it doesn't flow as though it is water; this is more noticeable on the edges. For example, the foremost edge of the water looks like it is jumping rather than waves flowing. It seems to work better on the diagonals of the tiles, however. I think it'd work very well if you made the edges flow with a nice steady pattern/sync, that way when you tile them the water actually flows around the whole body of water.

I wouldn't fret about the sides, though. But if you're that worried maybe light streaks or something? There's not much you can do with that small of a cut-out of water to portray what's underneath.
Title: Re: Hexagonal Animated Water Tile
Post by: Zoggles on October 14, 2009, 06:15:00 am
Yeah. The more I look at it, the more I agree with you.

I think I've made this new one in a back-to-front method really. I should have first started to define the movement at the edges and the general ebb-and-flow momentum and then added the animation of the waves to that. However, I started with the waves effect, and then tried to add in the extra edge animation.

Still.. I'm not entirely convinced by this re-design when in the game at the moment. Think I might be looking for a third option though with some similarities of both previous ones.

-Z-
Title: Re: Hexagonal Animated Water Tile
Post by: lollige on October 14, 2009, 08:43:06 am
I really don't like those moving edges, they give this a very strange feel.

I love the improvement on the water itself, but you might be better off with non moving edges, or less moving edges. make larger parts of the edges move at the same time maybe.

And about the sides, you can also decide to not have any harsh edges and round the edges of into just darker versions of the top part of the tile...
Title: Re: Hexagonal Animated Water Tile
Post by: Zoggles on October 14, 2009, 09:22:37 am
Well.. this was a reworking, focusing on the edges first and getting a steady 'water swooshing around' kind of feel to each tile, and making sure that the 'swooshes' matched up between tiles. From there I just added some simple dithering for the surface effect.

As it stands, the movement is even greater now, but it is at least smoother and more fluid.

Given lollige's recent comment, and the actual scale involved in these tiles, the 'swooshing' really is way O.T.T. However, I found the latest version far quicker to create. (though I've just noticed a slight looping-jump which I will fix a.s.a.p)

(http://www.miniwizardstudios.com/odds/pix/Water-Tile4.gif)

-Z-
Title: Re: Hexagonal Animated Water Tile
Post by: lollige on October 14, 2009, 09:53:51 am
There is a jump indeed, but thisone is great!

I like the new flow, if you could do this with the same size of the waves in length, but a lot shorther in height, that would be great I think!
Title: Re: Hexagonal Animated Water Tile
Post by: Dusty on October 14, 2009, 01:47:34 pm
Heh, that's a lot smoother, but at the same way extreme. I dunno if that would be distracting or not during gameplay. It'd be nice to see something a little more calm :)
Title: Re: Hexagonal Animated Water Tile
Post by: Doppleganger on October 14, 2009, 03:22:39 pm
Yeah, that's pretty awesome! I agree that a more subtle version of what you got going on would be appropriate. While you're fixing that up, you may notice that the bottom left edge of the water has a very stark jump from when the wave switches to a peak from its lowest point.
Title: Re: Hexagonal Animated Water Tile
Post by: Conzeit on October 14, 2009, 06:08:19 pm
=O wow that works really really well Zogs...I dont think u need anything else to make this seem like awesome water....but I'll still post my edit in case you WANT to anyway :p

My idea with posting Fool's tile is that you looked at the way he did translucency and the botton of the sea.
(http://cache3.asset-cache.net/xc/78032235.jpg?v=1&c=NewsMaker&k=2&d=C1A2C3D60D3A494D5125A89318739C6EE30A760B0D811297)


...as I didnt make myself clear I made an edit
(http://i22.photobucket.com/albums/b340/baybaybom/Water-Tile3.gif)
You copy all of the shading of the top of the water, *you invert the order of the ramp*(Actually dont invert it, looked at some ref and I was wrong), you take out the wavyness of the edges  and you paste that to the botton.Then of course you match the lightness of each connecting side of the tile to what corresponds to each of it's walls, to communicate that it's sliced water.

With that you have some basic sense of what the botton should look like, but then you're still missing  showing the mass of water that is between the botton and the top, so you want to do a gradient that goes from to completely dark at the top, to completely lit at the botton.I did that through redrawing the tile, but since (if I remember right) you work with photoshop maybe you can just apply an actual gradient :p

EDIT: took out some Irrelevant stuff I said because I found it was wrong.....suffice to say my edit isnt entirely correct, you dont have to invert the order of the ramp...you can actually use the same waves you have only darkened and making the highlights more defined and contrasted....
Title: Re: Hexagonal Animated Water Tile
Post by: Zoggles on October 14, 2009, 06:43:25 pm
Mmm.. interesting idea there Conceit... the edit makes your description far more obvious - thanks. I might try adding something like that to the next (less swooshy one) I try. Though that's not going to be until tomorrow probably.

-Z-
Title: Re: Hexagonal Animated Water Tile
Post by: EyeCraft on October 15, 2009, 01:55:59 am
Yes! This is what I was trying to say when talking about the plastic appearance of the cross sections, but couldn't formalise the concepts. Conceit's edit is just what I was getting at!

Title: Re: Hexagonal Animated Water Tile
Post by: CrazyMLC on October 15, 2009, 09:14:08 pm
I'd just like to say I could stare at that animation for hours, Zoggles, very entrancing.
The seas should probably be a little calmer though.