1 decade ago by clok
I have been working on optimizing my game with Box2D v2.1a and found that relying on sprites and alpha blending to achieve the colors I wanted for my effects was not fast enough. So, I put together a plugin called color-picker.js that I use to generate arrays of Hex color code gradients that I can use with direct canvas rendering within ImpactJS.
The code is readily available on GitHub's gist and I am updating it regularly with tweaks, enhancements and bug fixes. Please provide feedback and suggestions, and of coarse fork it or report bugs. I want to do what I can to help.
It is also on PointOfImpact.
The current functions are as follows:
genMultiHexArray => input an array with any number of hex colors and number of steps, return array with 'steps' entries between each sequential pair of colors in the input array
genHexArray => input hex colors and a number of steps, return array with 'steps' entries fading from color1 to color2.
pickHex => input two hex colors and a ratio, return color that is equivalent to that fade between those two colors at the ratio point
hexToRGBstr & hexToRGBA => converter algorithms for browser compatibility and alpha fading
Using this plugin (especially the genMultiHexarray) has greatly improved my content pipeline and overall game performance. The genMultiHexarray is fantastic for generating more complex color gradients like the Matlab Jet gradient which is very useful.
PiSpace
Cheers!
The code is readily available on GitHub's gist and I am updating it regularly with tweaks, enhancements and bug fixes. Please provide feedback and suggestions, and of coarse fork it or report bugs. I want to do what I can to help.
It is also on PointOfImpact.
The current functions are as follows:
genMultiHexArray => input an array with any number of hex colors and number of steps, return array with 'steps' entries between each sequential pair of colors in the input array
genHexArray => input hex colors and a number of steps, return array with 'steps' entries fading from color1 to color2.
pickHex => input two hex colors and a ratio, return color that is equivalent to that fade between those two colors at the ratio point
hexToRGBstr & hexToRGBA => converter algorithms for browser compatibility and alpha fading
Using this plugin (especially the genMultiHexarray) has greatly improved my content pipeline and overall game performance. The genMultiHexarray is fantastic for generating more complex color gradients like the Matlab Jet gradient which is very useful.
PiSpace
Cheers!