Jump to content
  • Advertisement


This topic is now archived and is closed to further replies.


2D Color Theory

This topic is 5984 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi, I’m working on a 16 bit color 2D game and I want the player to be able to select the colors for their character (hair, major color, minor color, armour, etc). After looking at the way the Baldur’s Gate people did it I noticed that they used 6 colors when they created their creature models. These models were rendered to a 2D image and the engine replaces these colors with the player’s selections. The creature models were rendered using the following colors: Red (255,0,0) Green (0,255,0) Blue (0,0,255) Cyan (0,255,255) Yellow (255, 255,0) Magenta (255,0,255) Now the images of the creatures use varying brightness levels of each of the above colors as the 2D images were created from lit 3D models. What I want to do is to read a color from the 2D image and recognise it as belonging to one of the above color groups. Then I want to replace that color with the player’s colour using the equivalent brightness. Does anyone know the relevant formulas or where I can find more information?

Share this post

Link to post
Share on other sites
You can find out which group it is from by noting which colour components are zero.

(x, 0, 0 ) is group 1,
(0, x, 0 ) is group 2,
(x, 0, x ) is the last group

Then, the relative brightness is simply what you have left over - i.e. imageValue/255; Normally, I''d expect that even if you have nonzero values in two components, the values would still be the same.

Share this post

Link to post
Share on other sites
Some of the values I'm getting are a little odd but they are still recognisable to the eye as belonging to one of the groups.

Thats why I thought there must be a formula as the rgb values also correspond to 3D coordinates in space. Think of a cube with the above values representing the corners. White and black would be corners 7 and 8.

Heres an example:



If you plug these values into a graphic program you'll see they all look green.

[edited by - davaris on June 5, 2002 8:47:03 AM]

Share this post

Link to post
Share on other sites
Okay, I''m just doing this off the top of my head so I''m not sure if its entirely correct.

You have a color (r, g, b) that can belong to one of 6 groups. In order to determine which group it belongs to you need to notice which colors are dominant (highest value). If one of the colors is at least x greater than both other colors (you''ll have to figure out a good value for x, 64 should work) then that color is dominant. If two colors are within x of each other and both are at least x greater than the remaining color, then both colors are dominant.

So for a color to be
red: r > g + x && r > b + x
green: g > r + x && g > b + x
blue: b > r + x && b > g + x

cyan: abs(g - b) < x && g > r + x && b > r + x
yellow: abs(r - g) < x && r > b + x && g > b + x
magenta: abs(r - b) < x && r > g + x && b > g + x

If none of these are true, then you can''t determine to which group the color belongs (and perhaps x is too large). I''m not sure how well this would work, you''ll need to test it out.

Give a man a fish and you feed him for a day; teach him to use the Net and he won''t bother you for weeks.

Share this post

Link to post
Share on other sites
try use hue saturation lumence (HSL) color space. better suited for what you are trying to do. rgb is quite poor when trying to just change the actual hue/sat of the color, while maintaining the same brightness. HSL on the other hand, is much easier. just modify the hue and sat values to change the color, but keep the brightness. then convert to rgb color space and your set.

its also MUCH easier to figure out which hue a color is (ie convert the rgb color to hsl space). just look at the hue and sat values making sure they are within a certain tolerence. then brightness of the color wont play much of a role in your algo to figure out what colors belong to what groups.

though you may just want to use palleted images in the first place. since the colors are indexed you dont need to do the fancy stuff your trying to do. you can always modulate (ie mulitply) the colored image with a 2d "lightmap" which represents the grayscale of the image showing the light and dark areas.

Share this post

Link to post
Share on other sites

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!