2
\$\begingroup\$

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 :

http://jsfiddle.net/simurai/CGmCe/light/
http://www.splashnology.com/article/sprite-animation-in-css3/1485/

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.

\$\endgroup\$
3
\$\begingroup\$

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.

OR,

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

\$\endgroup\$
3
  • \$\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

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .