Question

I’m working on an isometric game for fast browsers that support <canvas>, which is great fun. To save information of each tile, I use a two-dimensional array which contains numbers representing tile IDs, like:

var level = [[1, 1, 1, 2, 1, 0],
             [0, 1, 1, 2, 0, 1],
             [0, 1, 1, 2, 1, 1]];

var tiles = [
    {name: 'grass',  color: 'green'},
    {name: 'water',  color: 'blue'},
    {name: 'forest', color: 'ForestGreen'}
];

So far it works great, but now I want to work with heights and slopes like in this picture:
alt text http://harmen.no-ip.org/isometrictiles.png

For each tile I need to save it’s tile ID, height and information about which corners are turned upward.

I came up with a simple idea about a bitwise representation of all four corners, like this:

1011 // top, bottom and left corner turned up

My question is: what is the most efficient way to save these three values for each cell? Is it possible to save these three values as one integer?

Answer 1

If you are trying to do something like the picture you don’t need to store which corners are up/down as it can be deduced from the surrounding tiles.

For example if the current tile is height n and the height of the tile one up from the current tile is height n+1 then the current tile must have “top corner up”

Great! Thank you! I’ll try to implement this. One more thought to complete your answer: is it possible to store height and tile ID as an integer?

Yes. You will need to use Bitwise Operations.

If you divided the integer equally between height and id using the first 16 bits for height and the rest of id

var id = tile & 0x0000FFFF; //mask the first 16 bits
var height = tile >>> 16; //shift the first 16 bits to the right

Setting can be done in a similar mannar

tile &= 0xFFFF0000; //remove id bits
tile |= id; //set new id

tile &= 0x0000FFFF; //remove height bits
tile |= (height << 16);