Today we will get a little bit technical. Using a simple set of fragment shaders and color maps, we will entirely recolor a sprite on the fly.
Although the idea is implemented in Game Maker Studio, its principles should be applicable in any other shader-enabled application. Note that in Game Maker: Studio you may need to turn off "Interpolate colors between pixels" in the Global Game Settings for this to work!
This tutorial is aimed mainly at people with a basic or intermediate (like me) understanding of shaders. The method presented is not intended to be the fastest or more compact and efficient, and is broken down in steps that would be avoided by more experienced programmers, but I chose this structure in order to a) Make the method easier to understand and b) Highlight some specific things like texture coordinates, shader values and parameters[*]If there is one thing I hate in tutorials, it's this: "How to draw a kickass elf warrior: Step 1. Draw three circles. Step 2. Draw the rest of the kickass elf warrior.".
First of all we need a character sprite. It can contain many sub-images but it's not mandatory. Here is our guy:
Since the sprite will be recolored, we don't necessarily have to use good-looking colors: In fact, it helps if we use distinguishable hues to separate visually the various body parts and/or potential body accessories. For the same body part, we can use different brightness values to visualize that variance in the final sprite. But really, one can just paint a sprite with "normal" skin colors and everything: As long as all possible different colors are set up correctly, we are ok.
This is our "base sprite": It serves as the precursor to our "color mapped" sprite. But how exactly does this method work?
At first, we set up a "color mapping" shader and, using this shader, we draw all of our sprite's subimages on an empty surface. The only "additional" info for this first shader is a color map. The color map is simply a one-pixel-height sprite containing every color value in the base sprite that we created, in no particular order (but some hue grouping helps). If you want a value of the base sprite to be unchanged, like the sprite's outline, you can omit this color from the color map.
For our example, I am using a 32x1 sprite as the color map. Remember, if you are using Game Maker Studio, check the "use for 3d" box in the sprite properties of the color map! This will create a separate texture page for it and thus getting the texture coordinates of every pixel in the shader will be much easier[*]Other sprite dimensions will work, but for the "use for 3d" option to be available, they must be integer powers of two, like 1, 2, 4, 8, 16, 32, 64 etc.. Also, not all pixels of the color map have to be used: If you have a 20 different colors sprite, you can use a 32x1 color map where the first 20 pixels will be the various sprite colors and the rest can be a color not used anywhere in the base sprite.
