Working with colour maps

A colour map is simply image data where we have assigned specific colour values to be associate with other data. For example red (0xFF0000) might mean true, while blue (0x0000FF) might mean false. It’s pretty basic, but lets look at a more real world example.

I layered isometric grid (sometimes referred to an even/odd grid) is made up of a series of tiles. A common use for such grids is in tile based video game engines, see Wiki Entry. Below is an example of one.

A tile gid

When working with grids a very common task/need is to be able to determine which tile is under a specific point, for example the mouse position. If the grid is strictly a static image, we must the rely on math to determine that tile. When using square based grids that’s easy, but it more complex grids, like the one above, this causes problems. Now we could figure it out purely mathematically, if I were to do so I’d probably take an approach that involved vectors and rotating the axis. This mathematical solution however is quite complex, and additionally could prove to be somewhat processor intensive, (depending on how many positions you need to check.)

So lets look at the how. Firstly, start by pretending the grid is rectangle based, after all the bounding box of our diamond shaped tile is a rectangle. Consider the following example.

a square grid

We can quickly an easily determing which tile we are in with the following equation:

column = pointx / TILE_WIDTH;
row = pointy / TILE_HEIGHT;

So now we know the square region we are in, but that could be one of the 5 tiles that happen to fall within the location, this is where our colour map comes in use. Our colour map will consist of 5 colours, each of which will be associate with the 5 spots within our rectangle. Below is an example of our actual tile shape, and beside it our colour map.

the real tile The colour map

A picture is worth a thousand words:

Colour map in context

Now it should be clear how we can use that data, quite clearly we know if the colour under the requested point is white, we are on the center tile, if its red, we are in the upper left tile, ect.

Rather than adding the colour map to our display list and repositioning it as our mouse moves we can use this quick equation to determine the location we would be on a tile at that location.

tileLocalX = pointx % TILE_WIDTH;
tileLocalY = pointy % TILE_HEIGHT;

Then we use get pixel on the bitmapData of our colour map we can retrieve the colour value:

colour = getPixel(tileLocalX, tileLocalY);

That’s a pretty quick run down, but I think it covers all the important points. This is a pretty specific situation, but obviously it could be used in a variety of situations.

You can contact me on Twitter.


Browse All >