Making the machines of Hyper Drift
All the machines in Hyper Drift are 2D sprites. But look at that lighting! How did we do it? Read on.
Above is what a finished machine looks like. In order to get to that image though, we need quite a few different things. The first piece is the most straightforward: we need a simple sprite of the machine.
There’s the sprite for the Imperial Warcastle. If it looks a little boring, part of that is probably because we don’t want any fancy lights on the base sprite image. The lights go onto what’s called the “emissive” layer later, for now we just want the raw colors, and this raw color sprite you see above is our “diffuse” layer.
Now we have a machine, but if we just throw it in-game as is with some glow effects…
We can kinda get some lighting and shadows on it. But everything is baked into the pixels, so we can’t do cool effects with dynamic lighting. To fix that, we turn to another tool, Sprite Lamp.
Sprite Lamp is a tool available to generate normal maps for 2D sprites. But it doesn’t do it free, we now need lighting maps for the sprite…
And there we have 5 lightmaps. Imagine the sprite is being lit from 5 directions (above, top, left, right, bottom). Take all these images, and have Sprite Lamp works its magic.
Sprite Lamp will give us several images. From left to right: normal map, depth map, AO map. The most useful one for us is the normal map, since that will let us shade the sprite with a shader.
All these maps sit in memory while the game is running. During every frame, the game uses a shader that takes these maps along with light positions in the scene to draw the sprite. The result is a beautiful image that isn’t 3D, but isn’t really 2D either. It’s somewhere in the middle, and that makes it interesting! Below is the final result.