So I'm working on an html5/javascript/css3-based game. Without going into too much detail, I'm thinking of having the characters be simple 8 or 16-bit style sprites, but I'd like to allow the user to customize the colors of their character.

Here are some examples of what I'm talking about :


So the problem I'm having is two-fold:

1) Should I use something other than a sprite map for my characters, like actually draw them as shapes and animate them in a canvas element? That way I can fill the sprite with colors of the user's choosing? My fear there is that this would be inefficient as far as resources and also waste a lot of time hand-drawing everything, but could allow other customization (like height/width etc).

2) Are there potentially some web apis that would allow you to alter colors inside of a sprite? I suppose I could do it on the back-end with GD, but I'm trying to make it entirely in-browser (including local storage).

It's not a definitive one-answer only question, but I'm hoping someone can suggest something they've seen that approaches the same problem from another angle or gives us a way to customize the sprites or manipulate them in some manner. Or avoid them altogether, and use a different method.


Answer to 1 & 2

Color Palette changing ->Take a look here<- Showing both client & server side color pallete changing in the two answers.

After you altered the pixels to your will. Retrieve the DataURL by calling

var newImgSrc = canvas.toDataURL(); //gets a base64 encoded PNG image

Now for a CSS3 game, edit the src attribute of the tag if it's added to the DOM.

imgInDom.setAttribute('src',newImgSrc); //Or use a jQuery equivalent function.


var newImg = new Image(); //create a new Image object
//document.createElement('img') does the same stuff.
//render image after it loads or else you wont see anything on the canvas.
newImg.onload = function(){
   //render it or append it to the DOM
newImg.src = newImgSrc; //specify the src of the Image, loads almost instantaneously
//For a CSS3 game, you may skip the onload handler function.
//And directly append the element to the DOM.

See more at MDN & Google Search

  • \$\begingroup\$ This is great! The only thing is that I don't know where the state of the image data is stored once it's been altered, so I'm not sure if applying a sprite-based css3 animation will negate the color change on the canvas. The server-side solution can work too but I'd rather keep it client-side. \$\endgroup\$
    – NateDSaint
    Jun 8 '12 at 22:22
  • \$\begingroup\$ Use context.getImageData(left, top, width, height); Read more from the MDN link \$\endgroup\$ Jun 9 '12 at 5:24
  • \$\begingroup\$ I do have an additional part of the question though, which I can answer for myself by testing, but for the purposes of the Q&A nature of the site I can leave here as a query: Would it be more efficient (in performance cost, not labor) to use canvas to draw the elements themselves instead of loading in an image and then editing the pixels? \$\endgroup\$
    – NateDSaint
    Jun 11 '12 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.