Real-Time Image Hue RGB Color Changing?

[JeZxLee]

Real-Time Image Hue RGB Color Changing?

 

Hi,

 

My custom-built HTML5/JS 2-dimensional game engine is almost finished.

Only thing left is real-time image hue RGB color changing.

I have an extremely slow solution that can only be used if it's prerendered at game initialization.

 

Can someone show me how to do real-time image hue RGB color changing in HTML5 JavaScript?

Please keep it clean and simple with no additional libraries like jQuery...Straight HTML5/JS only...

Thanks!

 

JeZxLee

16BitSoft Inc.

Video Game Design Studio

www.16BitSoft.com

(new HTML5/JS website coming soon!)

 

 

_____________________________________________________________________________

Here is the code I have now in my HTML5/JS 2-d game engine:

//--------------------------------------------------------------------------------------------------------------function generateRGBKs(img){    var w = img.width;    var h = img.height;    var rgbks = [];    var canvasRGB = document.createElement("canvas");    canvasRGB.width = w;    canvasRGB.height = h;    var ctxRGB = canvasRGB.getContext("2d");    ctxRGB.drawImage(img, 0, 0);    var pixels = ctxRGB.getImageData( 0, 0, w, h ).data;    // 4 is used to ask for 3 images: red, green, blue and    // black in that order.    for (var rgbI = 0; rgbI < 4; rgbI++)    {        var canvasRGB = document.createElement("canvas");        canvasRGB.width  = w;        canvasRGB.height = h;        var ctxRGB = canvasRGB.getContext('2d');        ctxRGB.drawImage(img, 0, 0);        var to = ctxRGB.getImageData(0, 0, w, h);        var toData = to.data;        for (var i = 0, len = pixels.length; i < len; i += 4)        {            toData[i  ] = (rgbI === 0) ? pixels[i  ] : 0;            toData[i+1] = (rgbI === 1) ? pixels[i+1] : 0;            toData[i+2] = (rgbI === 2) ? pixels[i+2] : 0;            toData[i+3] =                pixels[i+3]    ;        }        ctxRGB.putImageData(to, 0, 0);        // image is _slightly_ faster then canvas for this, so convert        var imgComp = new Image();        imgComp.src = canvasRGB.toDataURL();        rgbks.push(canvasRGB);//imgComp);    }    return rgbks;}//--------------------------------------------------------------------------------------------------------------function generateTintImage(img, rgbks, red, green, blue){    var buff = document.createElement("canvas");    buff.width  = img.width;    buff.height = img.height;    var ctxRGB  = buff.getContext("2d");    ctxRGB.globalAlpha = 1;    ctxRGB.globalCompositeOperation = 'copy';    ctxRGB.drawImage( rgbks[3], 0, 0 );    ctxRGB.globalCompositeOperation = 'lighter';    if (red > 0)    {        ctxRGB.globalAlpha = red   / 255.0;        ctxRGB.drawImage( rgbks[0], 0, 0 );    }    if (green > 0)    {        ctxRGB.globalAlpha = green / 255.0;        ctxRGB.drawImage( rgbks[1], 0, 0 );    }    if (blue > 0)    {        ctxRGB.globalAlpha = blue  / 255.0;        ctxRGB.drawImage( rgbks[2], 0, 0 );    }    return buff;}//--------------------------------------------------------------------------------------------------------------function CreateFourColoredPlayfieldSprites(){    var rgbksPF = generateRGBKs(ImageSprites[6]);    ImageSprites[7] = generateTintImage(ImageSprites[6], rgbksPF, 255, 0, 0);    ImageSprites[8] = generateTintImage(ImageSprites[6], rgbksPF, 255, 255, 0);    ImageSprites[9] = generateTintImage(ImageSprites[6], rgbksPF, 0, 255, 0);    ImageSprites[10] = generateTintImage(ImageSprites[6], rgbksPF, 0, 0, 255);}//--------------------------------------------------------------------------------------------------------------

Thanks!

[pixelpathos]

Hi JeZxLee!

I don't know the nature of your source sprite, but in the past, I've generated tinted versions of a greyscale sprite by doing the following:

1. Draw a solid colour rectangle of the sprite size, and desired tint, onto the canvas.

2. Change the globalCompositionOperation of the context to 'destination-in'.

3. Draw the greyscale sprite directly on top of the coloured rectangle.

This avoids the need to perform any pixel-by-pixel manipulation, but I'm not sure if this technique would work for your specific application - hopefully it might help .

Vince.