How Gradient Mapping adds variety to Sky Diver Classic

One thing I wanted to bring back from my old version of Sky Diver Classic was the ability to change the colors for the different levels in the game (you can check here how I’ve structured the levels and worlds). In that old version I achieved it using a quite simple technique called tint or color multiplication.

This technique is remarkably easy. When a color is expressed as a numeric vector (R, G, B) with values ranging between 0 and 1, you can multiply each color coordinate by the corresponding ones of a different tint color. This results on zero values (black) remaining the same, and 1 values (white) taking the new color completely. Therefore, when you apply a color multiplication to a grayscale texture, you can tint it with a new hue!

Color multiplication is fast and easy, so it is supported by almost any game engine or photo editing software. While it can be used perfectly to alter the color of white sprites like a text, particles, etc. it has one problem when it comes to more complex shaded textures: You can’t get lighter hues than the original color as the multiplication with white will result in the base hue. This is a problem in cases where you want to apply highlights or shades that have a different tonality. You can see this effect in the previous image: The color planes have the base hue as highlight and the shades are a darkened version of it. So how can we do it better?

A possible solution is to use gradient mapping. With this technique a grayscale value expressed from 0 to 1 is translated into a coordinate in a gradient. And the resulting color is applied.

This gives us the possibility of colorizing the sprite in any possible way! We can now change hues for the shadows and highlights and the plane can look much better!

To apply this technique to Sky Diver Classic I decided that all the colors of the palette would be defined in a single 32×32 image. The X axis would be the gradient value, and the Y axis would be the different materials on the scene. I wrote a shader (a piece of code that runs in the GPU) to handle it, and applied it to all the objects in the scene. This way I can change the aesthetics of the whole game with a simple texture replacement!

Of course, achieving this in the game is easier said than done. All graphics need to be created carefully in greyscale, and some complex math and shader programming had to be done, but the results speak for themselves. The new Sky Diver game is much more diverse in the themes than the old one, and I can do all that just by creating a small color palette!

Want to know more about any other game development topics or issues? Leave me a comment and I’ll be happy to write about it!

Want to try Sky Diver Classic? Here is the link for Google Play: https://t.co/MDiQYuDTOm?amp=1