6 ms·

Procedural colors for video games

67 points by guillaumec 12y ago

mxfh 12y ago
Good to see that the OP is getting acquainted with color theory. Just one thing: Is this color scheme used elsewhere in the game? This might be OK for a menu, but it's almost impossible to extract any encoded information out of it, if you have any mild form of color blindness. The difference between factory/jungle just doesn't work out in any version. Having different lightness values actually helps as a factor to maximize uniqueness of each distinct color in the set. See the simulated example in similar case and how to fix it http://wearecolorblind.com/example/trainyard/ http://wearecolorblind.com/example/trainyard/
- skywhopper 12y ago
  I also found the difference between "Factory" and "Jungle" colors to be very difficult to discern in the example images. Any design, be it for software, physical interfaces, traffic lights, or anything else that relies on colors for conveying information should also provide alternate means of encoding the same information. You can use shape, texture, lightness/saturation, order, or a number of other properties. The 4-5% of the population who are colorblind or have color vision deficiency will thank you.
  - guillaumec 12y ago
    I hear you guys. In that case it is not a problem, since the color does not convey any information. In the game the difference in lightness of the elements should be enough so that colorblind people can still play without any trouble.
    - qzc4 12y ago
      "should be"—have you tried setting your monitor to grayscale? (It's not quite accurate, but fairly close).
eXpl0it3r 12y ago
Seems to be overloaded: https://webcache.googleusercontent.com/search?q=cache:http://blog.noctua-software.com/procedural-colors-for-game.html https://webcache.googleusercontent.com/search?q=cache:http:/...
- guillaumec 12y ago
  Yep, sorry my server is completely overloaded now :( I am trying to fix that.
- cordite 12y ago
  Unfortunate that the pictures aren't there.
jaunkst 12y ago
Create a color fence. You can create a polygonal fence that describes your preferred color set and calculate an intersection from the hue value in HSV. If my hue is 320, then I could find a nice shade of orange/red along the polygonal fence. This should give you controlled useable colors. The intersection length is the value, and you could store variable saturation on the fence points if you want to control the level of saturation. https://www.evernote.com/shard/s6/sh/c48da69a-7056-4ee0-9bcf-60ce346ca67f/6c1dd47660961c12d8ba91eefc13b7b5 https://www.evernote.com/shard/s6/sh/c48da69a-7056-4ee0-9bcf...
- jaunkst 12y ago
  Here is a codepen example, this code was thrown together. You can add modify the fence line in the colorFence array http://codepen.io/anon/pen/ycqpI?editors=101 http://codepen.io/anon/pen/ycqpI?editors=101
boronine 12y ago
Plugging HUSL [1], a color space created for this very purpose. http://www.boronine.com/husl/ http://www.boronine.com/husl/
vanderZwan 12y ago
Procedural colours might also make daltonization[0] easier. [0] http://www.daltonize.org/p/about.html http://www.daltonize.org/p/about.html
joeld42 12y ago
That's pretty cool. Ages ago I made a procedural platformer that colorized random tilesets in a similar way (I don't have any screenshots handy, sorry) and it worked out really well. I used the same random colorscheme code for a procedural landscape generator: http://www.ludumdare.com/compo/2010/12/19/some-planets/ http://www.ludumdare.com/compo/2010/12/19/some-planets/ If anyone cares, the code is here: https://code.google.com/p/ld48jovoc/source/browse/ld19_discovery/pally.cpp https://code.google.com/p/ld48jovoc/source/browse/ld19_disco...
flip101 12y ago
Does anyone know how to get an X amount of colors that visually are as much different from each other as possible? While setting boundary conditions such as allowed lightness values.

67 points by guillaumec 12y ago

mxfh 12y ago

Good to see that the OP is getting acquainted with color theory. Just one thing: Is this color scheme used elsewhere in the game? This might be OK for a menu, but it's almost impossible to extract any encoded information out of it, if you have any mild form of color blindness. The difference between factory/jungle just doesn't work out in any version. Having different lightness values actually helps as a factor to maximize uniqueness of each distinct color in the set. See the simulated example in similar case and how to fix it http://wearecolorblind.com/example/trainyard/ http://wearecolorblind.com/example/trainyard/

skywhopper 12y ago
I also found the difference between "Factory" and "Jungle" colors to be very difficult to discern in the example images. Any design, be it for software, physical interfaces, traffic lights, or anything else that relies on colors for conveying information should also provide alternate means of encoding the same information. You can use shape, texture, lightness/saturation, order, or a number of other properties. The 4-5% of the population who are colorblind or have color vision deficiency will thank you.
- guillaumec 12y ago
  I hear you guys. In that case it is not a problem, since the color does not convey any information. In the game the difference in lightness of the elements should be enough so that colorblind people can still play without any trouble.
  - qzc4 12y ago
    "should be"—have you tried setting your monitor to grayscale? (It's not quite accurate, but fairly close).

eXpl0it3r 12y ago

Seems to be overloaded: https://webcache.googleusercontent.com/search?q=cache:http://blog.noctua-software.com/procedural-colors-for-game.html https://webcache.googleusercontent.com/search?q=cache:http:/...

guillaumec 12y ago
Yep, sorry my server is completely overloaded now :( I am trying to fix that.
cordite 12y ago
Unfortunate that the pictures aren't there.

jaunkst 12y ago

Create a color fence. You can create a polygonal fence that describes your preferred color set and calculate an intersection from the hue value in HSV. If my hue is 320, then I could find a nice shade of orange/red along the polygonal fence. This should give you controlled useable colors. The intersection length is the value, and you could store variable saturation on the fence points if you want to control the level of saturation. https://www.evernote.com/shard/s6/sh/c48da69a-7056-4ee0-9bcf-60ce346ca67f/6c1dd47660961c12d8ba91eefc13b7b5 https://www.evernote.com/shard/s6/sh/c48da69a-7056-4ee0-9bcf...

jaunkst 12y ago
Here is a codepen example, this code was thrown together. You can add modify the fence line in the colorFence array http://codepen.io/anon/pen/ycqpI?editors=101 http://codepen.io/anon/pen/ycqpI?editors=101

boronine 12y ago

Plugging HUSL [1], a color space created for this very purpose. http://www.boronine.com/husl/ http://www.boronine.com/husl/

vanderZwan 12y ago

Procedural colours might also make daltonization[0] easier. [0] http://www.daltonize.org/p/about.html http://www.daltonize.org/p/about.html

joeld42 12y ago

That's pretty cool. Ages ago I made a procedural platformer that colorized random tilesets in a similar way (I don't have any screenshots handy, sorry) and it worked out really well. I used the same random colorscheme code for a procedural landscape generator: http://www.ludumdare.com/compo/2010/12/19/some-planets/ http://www.ludumdare.com/compo/2010/12/19/some-planets/ If anyone cares, the code is here: https://code.google.com/p/ld48jovoc/source/browse/ld19_discovery/pally.cpp https://code.google.com/p/ld48jovoc/source/browse/ld19_disco...

flip101 12y ago

Does anyone know how to get an X amount of colors that visually are as much different from each other as possible? While setting boundary conditions such as allowed lightness values.