December 2017 Update – Go with the flow


This month was dedicated almost exclusively to research and development for getting flowing water, namely the river, into the game. In the end I’ve spent longer than I’d have liked on this feature, although having the river implemented unlocks the core game mechanics for the next section of development – farming crops leading into needing food and drink. The main reason for taking so long is that I spent a long time researching how flowing water could be represented in a top-down 2D game, which has not received much coverage that I could find.

The main reference implementation was published by Alex Vlachos of Valve in 2010 with a SIGGRAPH paper on how they achieved a flowing water effect in Portal 2.  For this technique, a flow map (a texture representing the direction of flow) is generated or drawn by an artist, and the water texture is moved across the surface according to the direction at the point in the flow map. However, as each point in the texture is being scrolled in a different direction, after a short time they become too-far distorted from each other which looks terrible. The solution described in the paper is to use 2 different water textures, and blend between them, one to the other, and when one becomes fully transparent to reset it so that it does not become too distorted (though this has an unfortunate “pulsing” side effect which is then masked by some noise). Here’s a video of an implementation of this made by Philip Fortier:

This approach was very nicely implemented in 2D by Shaun Baruth of Sector 12 Games, who shows the same effect applied to a 2D game:

This seemed to be the route I wanted to follow, although this approach requires a flow map, and I felt a flow map generated or calculated for a map as big as those used in King under the Mountain would not be very feasible, or at least not fast enough for the game to run well on low-end hardware. Ideally I was after something tile-based, so it could be applied on a per-tile basis rather than needing something to be generated for the entire map. While I think I could have adapted the flow map texture to this problem, fortunately I stumbled across a much better water flow algorithm (for my purposes) devised by Frans van Hoesel of the University of Gronigen.

This approach is based on the Valve water-flow model, but by taking an average contribution of the flow direction of 4 nearby tiles. Rather than varying the blending of the water textures in time (leading to the pulsing problem described above) they are varied across space, which means the pulsing problem goes away. Better yet, this uses a tile-based approach which lines up very well with how I want things to work in King under the Mountain.

So now I had an approach I knew I wanted to use, the only problem was implementing it! Graphics programming is probably my weakest area of game programming, and it took me some time to get back to grips with OpenGL’s shading language and especially to get my head around the seemingly magical effects produced by the algorithm. I ended up using a simple displacement shader as a place to start from – a displacement shader uses the “height” or another channel of a texture to offset the co-ordinates used to sample another texture, as well as moving it over time, which gives an effect like this:

Or if you’d like to play around with a distortion shader, Shader Toy is an excellent website for tooling around with them. After a lot of head-scratching followed by hand-banging (on the desk) I managed a reasonable implementation of the above approach in my little test shader which had a pre-generated tiled flow map – the tiles to the lower-left are flowing upwards while those in the upper-right are going to the right, generally.

I didn’t want anything too fancy or advanced to make sure the look of the water fits in with the cartoonish visual style of the game, though despite this I wanted to keep adding effects and/or trying to improve the look. The above shader uses only a pair of single 64×64 textures (which represent one tile in the game) and I spent some time experimenting with a larger multi-tile pair of textures for the effect, but I couldn’t get anything looking quite right, instead it was too “busy” and not what I was going for. Eventually I had to concede that I needed to progress with the overall development rather than being bogged down in graphics programming, especially at such an early stage, so I decided to stick with the result I managed above and leave any improvements to the future when I have a better understanding of what’s required.

The above shader ended up being released as the first patreon reward of a “prototype” to backers at the $3 and above level – last month’s launch of the Patreon page has been a much bigger success than I was hoping for and a real incentive to keep development powering along as well as making sure I’ve developed something fresh to release as a patreon-only reward. If you want a peek behind the scenes at how these things work, or you want access to the earliest builds of the game before it goes to any paid release, please consider chipping in just a few $ on Patreon which will unlock these for you, and the money raised is going entirely towards the outsourcing budget for the game – primarily to pay for artists and music – I won’t be taking any of it myself.

Now that I had a way to animate flowing water moving in a different direction in each tile, I needed something to calculate which way and how water should be flowing in the game. This led to the creation of another prototype (which will be released as next month’s patreon reward) to model and experiment with flowing water, based on a simple cellular-automata model of each tile having an amount of water “stacked” up in it, which moves to any neighbour tiles if the level/height of the water is less.

As ever, it took a bit of testing to iron out the most obvious bugs when applied to a larger game map, although I’m confident it works in the great majority of randomly-generated maps, there may still be some that have part of the river not quite working as expected which will be fixed when more general mechanics for messing with water (water pumps!) are implemented. Here’s a look at a bigger map with the river-running algorithm going across it (and still not as big as those maps currently used in-game!)

Finally, thanks to all the work put into the two prototypes above, it was then a fairly trivial task to combine the two into the main game engine, and have an animated river in-game!

So while this isn’t finished – it’s currently a set colour rather than allowing for any colour to be mixed in using the game engine (which is how most other things work in the game) – I think it’s good enough for now to progress with the other development needed to bring the game up to an alpha state. I definitely plan to revisit and improve the flowing effect as well as the look of the river itself, but I’ve been immersed in this feature for a while and its important to keep everything else ticking along before development gets stuck in a rut.

Next I’ll be doing some small tidy-up tasks that have been hanging around since the original Kickstarter (March!) and then going on to the core mechanics that having a river and water in the game allows for – growing crops leading into needing food and drink. I might also tackle building walls next as that was probably the most-requested feature by people who got to play the first pre-alpha version and it also feels like a very core mechanic for the engine to get right.

Finally I just want to mention again that the Patreon launch was a much bigger success than I was hoping for – thank you so so much to those of you who’ve backed the project there. It’s a massive incentive (and kick up the backside) to keep working on the game and I’ll be making sure there’s something lined up as a reward for the 1st of each month!

One thought on “December 2017 Update – Go with the flow

Leave a Reply

Your email address will not be published. Required fields are marked *