Question

We’re working on a Javascript game that is developed and defined based on 2D board coordinates.

We are trying to convert the X,Y coordinates that we currently have (ie, 0,0) into the corresponding ISO coordinates for use with crafty.js.

The reason we are doing this is because the server randomly generates a game board that is a traditional 15×15 grid of spaces, and we would like to render it in isometric 3D, but crafty JS uses a strange coordinate system that starts in the upper left of the screen.

How would we map a 2D grid to the following image, with the upper left board space mapping to either (0,6) or any of the ? annotations?

Answer 1

I’m working in crafty as well, attempting to make a 17×17 board. Currently I’m simply using a map to covert every location to it’s corresponding Crafty location. I realize it’s incredibly hacky, probably slow, but I honestly don’t have time.

I noticed above that the numbers are a bit off in the image above. Here’s a little better visualization of how Crafty works in this situation. The white numbers are the raw data I get from the server, and the black numbers are what Crafty needs to render this board:

I’ve basically worked it out to a somewhat useful equation (but only useful when creating the map):

Even rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = previous odds's first x, then follow pattern: +0, +0, +1, +1, +2, +2...
Odd rows (starting at 0)
- y (row) = starting at row number (base 0) then increment by 1 for each x (column)
- x (col) = +1 to previous even's first x, then follow pattern: +0, +1, +1, +2, +2, +3...

So I have a map below that seems to work (this is the rawToCrafty map):

//Row 0
"00.00": { "y": 0, "x": 8 }
"01.00": { "y": 1, "x": 8 }
"02.00": { "y": 2, "x": 9 }
"03.00": { "y": 3, "x": 9 }
"04.00": { "y": 4, "x": 10 }
"05.00": { "y": 5, "x": 10 }
"06.00": { "y": 6, "x": 11 }
"07.00": { "y": 7, "x": 11 }
"08.00": { "y": 8, "x": 12 }
...

Yes there are better ways, but this is the brute force way. Good luck!