The “Diversity Shader” or How to Paint Sprites


Startup Freak is probably going to be as much about employee management as anything else in the game so it’s going to be important for the player to able to identify each employee visually. I’m expecting a late game will have around 20-30 employees. I obviously don’t have the budget for someone to create dozens of different characters with their own unique look and and animations (that would be pretty great) so I’ll need to work with a handful of base sprites, with random customization thrown in. There are a couple of ways to do this:

  • Have the artist create multiple color variations of the same sprites. This does increase rendering and memory requirements as I would need to work with many more textures, but honestly these days I don’t think this will be too taxing.
  • Try to randomize the sprite colors programatically / with a shader.

It may very well be that the former is actually the better both in terms of quality, and complexity for the artist. Nevertheless I had to try the latter just to get a feel for it and be able to have a meaningful conversation with an artist about what’s involved.

Sprite Coloring Shader

The shader takes 2 textures, and several colors, one for each area like skin, hair, clothing, etc. The first image is a black and white instance of the sprite. This is essentially the shadow/highlight information. The second image as you can see below, is a color mask. The colors in this image determine the “type” of each pixel. For example red is reserved for skin, blue is reserved for clothing, and so on. The shader uses this mask to determine which color to use for tinting a given pixel.

Note: the following image is courtesy of and will not be in the game.


This doesn’t actually look too bad, given I generated the B&W version and color mask after the fact. It should be a lot cleaner if the original layers were available. However there are a couple of issue:

  • While the outside edges look nice and clean (because the B&W image still has the original alpha values), inside edges can look a bit ugly because there are no “transition colors” between areas. You can see this, for example, around the skin-eye edges or jacket-shirt edges. I think this might be manageable with cleaner masks, as well as using an art style that doesn’t use a lot of gradually transitioning colors… if that makes sense.
  • Another potential issue is creating the black and white image itself…it’s not exactly a matter of turning a colored sprite in the black and white. The contrast and average color really change the look of the sprite. Because I’m simply multiplying the colors with the B&W value, it means that a darker hair in the B&W image will always be dark regardless of the color.

I think this has been a worthwhile experiment and I’ll be talking to artists to see if it makes sense to go down this route, or it’s better just pre-bake the colors. On the plus side, using a shader allows me to create far more color variations than is practical otherwise.

Other Updates

Other bits of progress include:

  • Replaced the run-sprint button with something a little more fun (art work is still a placeholder). It also gets triggered when space is pressed:clock
  • Added email templates with parameter substitution
  • At the start of the game you now choose your character / CEO
  • When the HR backlog item levels up, a new “candidate” slot is unlocked

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s