Animating Water Tiles part 1: Edges

I occasionally make tiles following the Liberated Pixel Cup style guide for relaxation. Given that I just handed in my bachelor thesis, I was in need of some relaxation.

One of the things that had been bothering me is that the default water for this style didn’t animated, nor really felt like it would get my characters wet. There were also very few people who’d made an attempt at animating the water. I myself tried, but I failed. So I suspect very few people know how to animate water properly. With that in mind, I decided to do a ton of experiments and document them so that others might learn from it as well.

I set up a thread on OpenGameArt.org, to see what others think, or to see what kind of things people have been trying. For this post, I am documenting all the ways to animated the edges of water tiles, with the aim of creating a nice transparent mountain brook.

Types of Edge Animation

So, the first thing you can try to animate is the border between the edge and the land. There’s several types here.

Expand/Contract

So, the most common edge animation is the expand and contract. Frame order is as follows:

1. Outline at rest
2. Outline contracted 1 pixel on all sides.
3. Outline at rest (copy of 1)
4. Outline expanded 1 pixel on all sides.

You can see variations of this in most games, as it is a really easy way to animate using few colors. The animation should be adjusted to the environment, so for example below there is a pebble texture that the animation is adjusted to. Then some outlines are added, and the whole thing is made semi-transparent. Of note here is that the outline is a little bit aligned to the texture as well, leading to a nice effect when made semi-transparent.

• 

• 

• 

• 

One of the posters on OGA, Evert, pointed out it’s a bit odd though: the surface area increases.

Undulate

To tackle that, one of the solutions is to make the water undulate. That is, the water pixels just circle around, being 1 pixel up, 1 pixel left, 1 pixel down and finally 1 pixel right, without any rest.

• 

• 

• 

Waves on the side.

The other solution was proposed by Evert: A little wave that goes by the side. This can be done by contracting 1/4th of the tile and expanding 1/4th of the tile, and then moving those areas 1/4th over a frame, leading to 4 frames where the 1st and 2nd frames as well as the 3rd and 4th of mirrored tiles are mirrors of each other. So if you have the topleft corner on frame 0, it is a mirror image of the topright corner on frame 1.

There’s several variations of these, one with a single pixel wave, one with two pixels on each side, one where the pixels on the sides are a little bigger than the transitional pixel, so the result feels a bit rounded, and one where the pixels don’t travel. Frame 0 and 2 are resting frames here, and frames 1 and 3 are mirrored as described above, this one rather looks like the water is a blob receiving a shock.

You can then adjust the outlines to the rock below, but sometimes this may end up so noisy that it might be better to avoid it, especially when combining with other animations

• 

• 

• 

• 

• 

• 

• 

• 

Ocean Waves

The ocean wave is a little tricky. It first most is much like an expand/contract one, with the main wave expanding, and then an underlying wave contracting or slowly becoming transparent to indicate evaporation. Furthermore, there’s a lot of timing tweaks necessary, you can for example make the contraction a lot slower than the expansion to get a more natural ocean-rhythm. Also of note is that because so many pixels get covered with water, these need to be 8 fps, or it will look choppy.

This one will need a lot more experimentation, but for now these little examples to demonstrate this type of edge animation.

• 

• 

Animating the inner outline

The second thing you can animate is the inner outline. These are often a lot more soothing.

Animating like the borders above but not animating the border.

This is basically, you animate the inner outline like above. Because you don’t animate the outer outline, the result is a lot smoother.

• 

• 

Circling Flickers.

This one is basically little dots that move about, aligned to the underlying pebble texture. By itself it doesn’t look fantastic, but once you start blending it becomes a very easy to control refraction effect.

• 

• 

Inner Waves

A very simple style where a single pixel border is animated inwards from the sides. The border is made more transparent as the wave gets closer to the center, fading it out.

• 

• 

• 

• 

Animating the brightness.

These were demonstrated on the OGA thread by both BenCreating and MedicineStorm, and they do show up on many commercial examples.

Basically, animate the outer outline from cyan to bright white. I also tried replacing the wave animation from the edge animation section with a brighter wave in this style:

• 

• 

• 

Blending the whole thing.

I’d also been playing with blending modes, the examples here using a water layer separated from the rocks, duplicated twice, both layers set to transparency, and the lower layer set to multiply while the higher is set to overlay. This increases the contrast of the water tiles, which is something wet objects are known to do in real life.

• 

• 

And other ideas.

Fading the center

These faded the centers a little, making the borders more distinct and adherent to the LPC style guide. It has a little bit the downside that these don’t make for good RPGmaker mv tiles, but for LPC and Wang it works just fine.

• 

• 

• 

• 

Animating the flow

This was an attempt at seeing how to handle water flow. General concensus was that it looked weird because the water came out of nothing.

• 

• 

• 

• 

• 

And further…

There’s still other parts to animating water, but I hope this gives some inspiration for how to tackle your own water. I myself will continue with experimenting till I have some satisfying tiles to share 🙂