2D Color Theory
Author
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?
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.
(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.
Author
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:
Green
144,255,144
177,255,177
0,209,0
0,144,0
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]
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:
Green
144,255,144
177,255,177
0,209,0
0,144,0
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]
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.
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.
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.
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
