Jump to content

Real-Time Image Hue RGB Color Changing?


JeZxLee
 Share

Recommended Posts

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!

Link to comment
Share on other sites

  • 1 month later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...