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:
- Outline at rest
- Outline contracted 1 pixel on all sides.
- Outline at rest (copy of 1)
- 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.
Basic expand and contract animation. Edges adjusted to the underlying pebbles. Some outlines animated in. And then, semi-transparent at 50%
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.
Basic Undulation Animation Adjusted to the pebbles below. And with an outline. The outline is a little messy here because I lost concentration due the heat, but it should work for demonstration purposes.
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
Single pixel wave, with a proportion of 1 to 4 Double pixel waves, with 1/4th inwards, and 1/4th outwards double pixel wave, with 3/8 inwards and 3/8th outwards, except near the corners. Waves that look like a blob receiving a shock. Double pixel wave with outline blended at 50% transparency. Single pixel wave with rocks cut out, 75% transparency. Double pixel wave without rocks Other double pixel water without rocks.
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.
Expanding ocean wave with more and more transparent underwave. Also an expanding ocean wave, but this time the contraction is slower than the expansion.
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.
Raw Flickers Blended flickers, here with multiply and the edges copied onto a second layer and accentuated.
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.
Waves going from and to the sides. Waves going outwards to the sides. Waves going from the sides inwards. Waves going from the sides inwards, without blending.
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:
Simple brighter/darker loop on the edges. Brighter darker loop, but then in the style of the waves above. Another example of the waves, but then flickering between 2 frames, back and forth.
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.
Flickers with multiply+overlay both layers at 50% The flickers here look like some kind of refraction effect. Contract and expand with multiply+overlay both layers at 50%
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.
75% opacity, flickers, and faded centers Waves+faded centers, opacity of 75% Expand/Contract+Blending+faded centers Flickers+Blending+Faded Outlines+ Wave animation on the side.
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.
Tiny flickers of waves streaming down. The waves pop a little here, which makes it more suitable for rain falling off something… Smoothing animated waves going up. Wave animation rotated to animate to the right. waves going down, and blended with multiply+overlay. The waves are animated around.
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 🙂
One reply on “Animating Water Tiles part 1: Edges”
Do you have a place to buy this tileset?