up vote 0 down vote favorite
share [g+] share [fb]

I have stored my map, but the problem I am having is displaying it. My map is 100x100 tiles which are 40x40px.

I have my loop running through the array but I'm having difficulty selecting the portion of the map image to relate to the tiles. This is the code which selects the portion of the image on each iteration:

var sx = Math.floor(tileId % 8 * tileWidth); //source x
var sy = Math.floor(tileId / 8 * tileHeight); //source y

I'm using Canvas and keep getting this error message:

INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.

I'm guessing the remainder or division by 8 is wrong, this is something I picked up from the net, but what exactly does that integer need to be?

Thanks

link|improve this question
feedback

1 Answer

up vote 1 down vote accepted

If you're using sx and sy to index into your array then they indeed will be out of bounds rather quickly. Since the tileWidth and tileHeight have nothing to do with how the tiles are indexed.

You can index into your array with the following:

var sx = Math.floor(tileId % 8); //source x -- don't actually need floor here
var sy = Math.floor(tileId / 8); //source y -- this is really just cast to int

I'm assuming that your tileID is a number from 0 to 9,999 (one for each tile in a 100x100 grid).

enter image description here

EDIT

I fixed the image above to correct the TileStartX column.

If you want 16x12 tiles you won't be able to do it with an index ranging from 1 to 100. You need 1 to 192 (i.e. 16*12=192). Additionally, for the xIndex you need to mod the tileID by 16, not 8. Likewise you need to divide the tileID by 16 to get the yIndex. So indexing tile 60 in a 16 by 12 grid would be:

60%16 = 12
60/16 = 3

So in your array you'd get tile tiles[12][3] Or the tile in column 12 of row 3. Then if you wanted to draw that tile you'd draw it at X=12*40=480 Y=3*40=120 So you'd draw tile tiles[12][3] at x=480,y=120.

link|improve this answer
Hey, thanks for the answer, I can see how the % and division is working now, but I'm still having a bit of a problem, my tileID represents a number between 1 and 100, each for a separate 40x40 portion of an image. So I need to find out how to map the tileID 60 to the portion of the image/sprite which it needs to display – Henryz Apr 29 at 17:30
The image sprite is 16x12 tiles, each 40x40, if that helps – Henryz Apr 29 at 17:37
Excellent, thank you, especially for that table which really indicated how the math works there. I eventually got my head around it! – Henryz Apr 29 at 20:52
feedback

Your Answer

 
or
required, but never shown
discard

Not the answer you're looking for? Browse other questions tagged or ask your own question.