What would a game that ran on a turbocharged Super Nintendo look like? We figured it would look like a blend of 16bit color palettes, smooth animations and modern techniques like motion blur and bloom. This is the core idea behind the art style of Road Warriors, a side-scrolling combat racing game set in outer space. This article is a lightweight breakdown of how some of the effects in the game were done.
Compositing Pixel Art Animations
I have a preference for frame-by-frame animations. When animating this way, a good artist can add a certain flair and style to the animation by transforming shapes in unique ways in combination with carefully thought out timings. It’s a unique signature that can take your animations to the next level. I’d love to put in that amount of effort but I’m the only artist on the team and I simply don’t have time for such details. So we needed a solution that would save time and look good all the same.
Welcome to the world of compositing. I use Adobe After Effects for animations that are complex, require a lot of frames or both. Like flames for example, one of the trickier elements to animate traditionally. For these type of effects I mostly abuse a combination of the following image operations/generators:
- Noise functions (Perlin, Fractal or other)
- Masking / Blending modes (add, multiply, overlay, screen etc)
- Value thresholds / rounding (posterize)
A basic composition could look something like this:
The benefit of compositing an effect in AE is that your workflow is completely non-destructive. You can tweak every operation on your effect stack at any point. So once you’ve got a basic effect set up, it becomes trivial to make variations on what you already have.
Once you’re happy with the effect, it’s simply a matter of rendering your frames and building a texture sheet for use in Unity.
Generating worlds with shaders
For some of the effects and objects in the game, we’ve opted to write a shader that ‘generates’ art based on parameters instead of creating traditional bitmaps. Good examples of this are the planets in the background of the track select screen.
All of the shaders written for Road Warriors are made in Shader Forge, a node based shader editor for Unity. The steps involved in building shaders in a node based editor actually work a lot like compositing visuals in After Effects. The difference is that now you’re using a flowchart style approach, rather than a stack of timelines.
Using this technique we can create infinite planet variations by just tweaking the material parameters and maybe swapping a noise or cloud texture. Or even better, generate those textures as well! We could generate an entire random universe of fully animatable planets, with a few lines of code!
Traditional art still plays a big role in the game’s art pipeline. For assets we’ll generally choose the art workflow which gives the best quality in the least amount of time. These are just some examples of generating art using compositing and custom shaders in Road Warriors.