Sequences and Shaders

I started building a filmic title sequence for NEON STRUCT this week. My options for implementing it were somewhat constrained. I don’t have any support for Flash or Bink videos, so I had to build it all in-engine. It’s also a short sequence, so I didn’t want to spend too much time on it.

I wanted this sequence to contain visual elements suggestive of an electronic surveillance system searching for Jillian, the player character. I first considered a Casino Royale-esque treatment with swirling vector art of eyes and ears and camera apertures and drones, but I wasn’t sure I could execute that concept particularly well. Instead, I wanted to take a programmatic approach and let the code turn a small amount of content into something bigger.

The treatment I chose, as seen in the video above, is a sort of glowing, pixelated crawl that leaves behind a faint trace of Jillian’s face. It is implemented with just 4 textures, a simple shader, and a short piece of code that drives the control values in the shader during the sequence.

The fundamental concept of animating the crawl in the shader works by clamping a gradient texture to a small range of values that shifts over time.

For example, this is the gradient I use for the pink and blue diagonal wipe at the start of the video. By authoring it as a gradient from dark in the top-left to bright in the bottom-right, the pixels will crawl in that direction. I added some noise so that some pixels will light up earlier or later than their neighbors. And because I wanted a pixelated look, I started with a small gradient texture and blew it up to full size without interpolation, leaving all those big chunky pixels.

Then the shader multiplies the value by a grid mask to separate the big pixels from each other…

…and finally multiplies by a color texture to colorize the result.

In practice, the gradient texture and mask are packed into the red and green channels of a full color texture, and a second gradient/mask pair is packed into the blue and alpha channels to control the secondary crawl (the trail of longer-burning pixels that reveal Jillian’s face). The parameters for the gradient selection on each of these channels are driven by a small piece of game code.

When the sequence switches from the pink and blue crawl to the green radar crawl, it is simply using a different pair of textures; and I can easily implement more patterns just by authoring a couple of simple textures.