I´m working on the design of a new game concept at the moment and I would like to know how to handle a customization of sprites. (In 2D that is, hence the topic.)

This is my scenario: The player will have a tower containing 3 floors (or more). Each floor can be replaced by another "piece", i.e. a blue floor, a fire floor, a stone floor.

With the little knowledge of game development I have, creating a sprite for each possible combination is probably not a good idea, since the size of the game file will be HUGE.

So, how does developers solve this? Do you put a standard position and just replace the sprite itself? Any advice or information about this would be great.


  • 1
    \$\begingroup\$ Are you talking about the floor being tiles and the player is replacing just parts of it? A quick image mock up would go a long way in helping to explain this. \$\endgroup\$
    – MichaelHouse
    Jul 9 '12 at 22:53
  • \$\begingroup\$ Let me put it in other words, it´s same concept: A character in the game contains three separate parts: A head, a body and and legs. The player can switch between different heads. Each type of "head" is a custom sprite. (The same goes for body and legs). Hope that helps! Thank you. \$\endgroup\$
    – Alouette
    Jul 10 '12 at 12:20

You don't have one sprite, you have three sprites. A "top", "middle", and "bottom" sprite. You just render all three sprites when you render the player's tower. Need to change the middle segment? Not a problem, just swap out the "middle" sprite.

There's no reason to try generating all possible sprite combinations and there's no reason to do anything fancy with color-keying or programmatic replacements.

That's roughly how something like Ultima Online worked - each "player" is a pile of a half-dozen to dozen sprites, one for each piece of equipment, and they all just get rendered together.


This could be done using colour-keying.

This would work much in the same way that green-screening works for TV - look for a particular colour and replace it. It's quite common for this to be a colour not normally used (and quite garish) like magenta.

Some SDKs (like SDL) have direct support for this, but you can easily add it to any shader that draws a sprite, just like you'd expect - look for your colour and replace it with one specified in code.

Of course, if you're dealing with more complex situations (like multiple customisations) you need multiple different colour keys. At this point, the simpler solution might be to use transparent sprites, a range for each part, and then composite them together afterwards by drawing one on top of the other.


I'm going to use your example above about a character with a head, body and legs since it's a bit easier to understand. :)

Since you can both change the shape of the item (different shape heads, male/female heads) and also the hair colour (red, brown, blonde, blue...) you could have each head shape and then have the hair pixels marked in your colour key, for example all hair is magenta. Then, you can overwrite magenta with red, brown, blonde or blue.

The downside of this is that it needs to be an exact colour match, so you couldn't do shaded colour from this approach. However, if you separate the image out into a mask and the detail, you can colour-key the mask and then add semi-transparent detail on top.

This would work based on alpha blending - much in the same way that if you overlay one colour at half opacity over another, you still get some of the previous colour. This then requires that when you're developing your assets, rather than picking the colour you want you need to have a layer underneath of the 'base' colour that's going to be replaced by magenta and then you have to put a colour on top that creates the desired difference you want. In this case also, you detail will more than likely be in black and white or it won't apply nicely across all the colours. Sadly my pixel-fu isn't strong so I can't really show you an example.

In short though, it's an awful lot of work just to save a bit of memory in assets - you could probably be better served by breaking things down into smaller parts (in this case, separating the hair from the head) and then making each iteration of them.

  • \$\begingroup\$ Okey, thanks for your answer. However, every piece of "floor" will be pretty detailed and not at all controlled by its color, so would it work to just give each part a unique ID and then have standard positions? \$\endgroup\$
    – Alouette
    Jul 10 '12 at 12:11
  • \$\begingroup\$ I've edited the answer to talk about detailing and how you'd achieve that, but the short of it is: It's probably simpler to just make each iteration (unless we're talking thousands). :) \$\endgroup\$
    – Matt Kemp
    Jul 10 '12 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.