Create a Glowing, Flowing Lava River Using Bézier Curves and Shaders

Most of the time, using conventional graphic techniques is the right way to go. Sometimes, though, experimentation and creativity at the fundamental levels of an effect can be beneficial to the style of the game, making it stand out more. In this tutorial I’m going to show you how to create an animated 2D lava river using Bézier curves, custom textured geometry and vertex shaders. Note: Although this tutorial is written using AS3 and Flash, you should be able to use the same techniques and concepts in almost any game development environment.

---

Final Result Preview

Click the Plus sign to open more options: you can adjust the thickness and speed of the river, and drag the control points and position points around. No Flash? Check out the YouTube video instead:

The actual demo runs at a much higher framerate.

---

Setup

The demo implementation above uses AS3 and Flash with Starling Framework for GPU accelerated rendering and the Feathers library for UI elements. In our initial scene we are going to place a ground image and a foreground rock image. Later we are going to add a river, inserting it between those two layers.

---

Geometry

Rivers are formed by complex natural processes of interaction between a fluid mass and the ground beneath it. It would be impractical to do a physically correct simulation for a game. We just want go get the right visual representation, and to do so we are going to use a simplified model of a river. Modeling the river as a curve is one of the solutions we can use, enabling us to have a good control and achieve a meandering look. I chose to use quadratic Bézier curves to keep things simple. Bézier curves parametric curves often used in computer graphics; in quadratic Bézier curves, the curve passes through two specified points, and its shape is determined by the third point, which is usually called a control point.
Read more: Create a Glowing, Flowing Lava River Using Bézier Curves and Shaders