What is advantage of [][] over [] in tile maps?

[mgutz]

I notice most examples on the web represent terrain or map as an array of arrays. 

var terrain = [  [0, 1, 0],  [1, 0, 0],];

This can also be represented as

var terrain = [  0, 1, 0,  1, 0, 0];var rows = 2, cols = 3;

Is there a reason why array of arrays is used? You can see in perf test the flat array is faster. After I cached the length of the 2D array the differences were minimal.

[Chris]

Yes, it is!

Lets assume you want to get the value of tile x:2, y:1

 

In your first storage format, you simply retrieve it:

var tileValue = terrain[x][y];

The second format gets a bit more complicated:

var tileValue,    tileIndex;tileIndex = cols * y + x;tileValue = terrain[tileIndex];

[mgutz]

I understand the simplicity of the 2D array. I would have thought though that dereferencing two arrays is more costly than computing the index and derefererncing once. Moreover, it's more allocated objects.

[Chris]

It doesn't really make a difference - even on mobile systems.

[James Cat]

The most obvious thing I can think of is if for some reason you need to change an entire row quickly, since the first array is essentially an array of pointers to arrays, changing an entire row is simply a matter of changing one pointer value, also - it occurs to me now, adding and deleting rows would be quicker, in the single large array example you would need to insert/delete elements which is obviously going to be slower.

 

However, like you say because you're not dereferencing a pointer for every array entry in the 'single array' example, that's going to be quicker, although the jitter might (if it is sure that it is safe) optmise that (essentially creating the single array behind the scenes)

 

The only other thing to mention is that typedarray access is pretty quick nowadays (due to not having to unbox primative types) but whilst you can have a large array of integers, I don't believe you can have a typedarray of typedarrays since pointers are not a supported 'type' for typedarrays.

[xerver]

Correct, there is no TypedArrayArray. Generally I store tiledmaps as a flat array in a typedarray because they are much faster to work with.

[Paul-Andre]

If you represent a 2d array as:

var terrain = [  [0, 1, 0],  [1, 0, 0],];

and if you edit your levels in your text editor, you must be conscious that terrain[x][y] would actually give a rotated and flipped version of what you saw in your text editor. Using terrain[y][x] should solve that. (I think)

 

If you would use a typedArray to store a 2d map, I would use a wrapper with get(x,y) and set(x,y,value) methods. In fact, I have made such a wrapper that falls back to imageData in case typedArrays aren't supported, and otherwise falls back to a array, and with much more functionality such as copy/paste and forEach that can be restricted to rectangular zones. If anyone is interested in it, please tell me. I might as well post a link to an example. Maybe someday I'll put it on Github.