1

I'm playing around with the idea of modifying my game development IDE to produce HTML5 versions of the games created with it. One of the features of the IDE is the ability to define frames, which not only define how a graphics cell is transformed (rotated, stretched, etc), but also how it is colored when it is drawn. So if I wanted green hills and brown hills and uphills and downhills, I would only need 1 graphic defined for all of those, simply transformed and colored differently.

I can see how an HTML5 canvas context will allow me to transform drawImage results, but I don't see a practical way to modulate the colors. I want to be able to say, for example, R=255, G=255, B=0, A=127 and have none of the blue channel come through (a yellow-tinted version of the graphic) drawn at 50% translucency (keeping in mind that portions of the graphic cell may already be translucent or transparent).

Is this possible? Or will I need to getImageData and manipulate the pixels and cache manipulated copies? If I need to cache manipulated copies, what's the best JavaScript data structure to accomplish this? I think I'd want some kind of dictionary where the key is an image index and an RGBA composed as a single value somehow. Look-ups would have to be very fast because it would potentially be done for a majority of the tiles being drawn.

Rob W
  • 341,306
  • 83
  • 791
  • 678
BlueMonkMN
  • 25,079
  • 9
  • 80
  • 146

1 Answers1

3

Sadly I don't think you can do it without the help of getImageData.

Here's an example of tinting an image using getImageData:

http://jsfiddle.net/3eUBk/2/

It was something I made to answer this question, which has an explanation of everything thats going on: How can I use a gradient map to tone a HTML5 canvas with an image in the canvas.

Let me know if you need more information.

Community
  • 1
  • 1
Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • Can you help at all with information about a dictionary data structure in jscript I could use to cache tinted tiles? I admit I haven't looked very hard, so the solution may be obvious. But it may be handy to have it linked to this answer. I'll start looking too. – BlueMonkMN Oct 16 '11 at 23:48
  • Thinking about it further, I think what I need is a class that maps frameset index numbers to a set of information including graphics cell number and transformation parameters. And the graphic cells should be part of the same canvas as the original. But it should be extended vertically to cache all the alternately colored versions of the images, which will be generated shortly after the image is loaded. So I'll need to be able to expand the image and add to it. – BlueMonkMN Oct 17 '11 at 00:16
  • Nothing wrong with creating a (much larger) in-memory canvas for caching all of those to redraw at a later point. – Simon Sarris Oct 17 '11 at 00:39
  • I'm missing some really basic things. What's the cleanest simplest way to create an in-memory canvas? If I draw onto that canvas and then use it as a source for drawing onto another canvas, will it retain its alpha channel, or does it acquire a white background? – BlueMonkMN Oct 18 '11 at 00:34
  • Looks like document.createElement is the way to create an in-memory canvas, according to http://stackoverflow.com/questions/5942141/mask-for-putimagedata-with-html5-canvas but wow, it's hard to find a real code sample. I'd have thought it'd eb easier to find actual code. – BlueMonkMN Oct 18 '11 at 00:43
  • Sorry, yes, document.createElement('canvas') is the only way (remember to set width and height to something reasonable right after, as it defaults to 300x150) – Simon Sarris Oct 18 '11 at 03:32