Hmm, I'm new to this board, so I apologize if this is considered a necropost. I didn't see a time threshold listed anywhere to indicate when you consider a topic necrotic... it was still on the first page so, I'm guessing it's fair game.
I was asked this very same question earlier today, so I guess I'll give my input here too in case anyone finds it useful.
have any of you ever worked on a pixelArt game where you could customize your character? If so, how did you go about it?
It's relatively easy to let the player adjust which pixels of the character have which color. One thing that becomes much harder is to let the player get more and more new weapons, items, etc.
I'm guessing there's no really smart / clever way to do this, but I thought we could brainstorm a little bit. Would love to hear some feedback on that topic!
I used Color Combine Operations.
Essentially, you make the regions that are to be recolor-able in gray-scale. Separate each component of the item that's customizable -- you can have one "base" image that's not got customizable parts if you want too.
Now, as you render the sprite: Just multiply the correct user selected color with the component.
If you're writing the code manually, just take each channel value, scale it between One and Zero then multiply it by the user selected color and store the result.
result[x][y].r = ( input[x][y].r / 255.f ) * userSelected.r; // Note the float
result[x][y].g = ( input[x][y].g / 255.f ) * userSelected.g; // promotion in
result[x][y].b = ( input[x][y].b / 255.f ) * userSelecetd.b; // the division.
(OpenGL and DirectX both have blend modes that can do this for you...)
To speed things up, you can "pre-combine" the sprites once per player/avatar instead of each frame.
The multiply operation can be used to get other effects, like "warm sunny" or "cool night" effects by using color ranges other than grayscale in the input.
There are various alternate strategies for combining the colors. Eg: Instead of separate component grayscale images, you can use a single base grayscale image, and use a mask to select which pixels receive which custom color.
Additionally, you can use the same technique with different base images to dynamically switch between "in the shade" or "washed out in the sun", or use different operations to do other effects: like a final addition pass to make things like faux specular highlights, or little glowing lights. (see also: lightmapping)
Here's a GIMP image
using the multiply layer feature to help illustrate the effect. Draw in the "head color" layer to play with the effect.
OK, I'm assuming most folk knew that much already, so now to address the increasing complexity issue in a "smart / clever way": Regions that can be re-colored are designated as a class of color.
To simplify things you can have a set number of "custom color classes".
What worked for me was to have three classes of colors: Primary, Secondary, Detail.
Each type of sprite could have 3 unique colors. So, a user could pick three colors for the head, and three different colors for a body, three other colors for the main weapon, etc.
When creating the assets I assigned different areas of the images to one of the three color classes. This way, if the user selected a different gun, or different head, the colors would be applied automatically in their selected color motif. The "primary" color of one head is used as the "primary" color on a different head.
For easy mode coloring players could pick a color class, and select a color from a swatch, to apply the color it to every component class at once. However, if you wanted to get crazy about it, each item in the player's inventory could have it's own editable "color set" -- It's just 3 additional RGB values per item.
TL;DR: Color Classes. One set of assets. Tons of Custom Colors. It doesn't get much better that that.