# Picking tiles in an isometric diamond map

I am rendering a isometric map with the following code:

for(var x = 0; x < MAP_WIDTH; x++) {
this.map[x] = [];

for (var y = 0; y < MAP_HEIGHT; y++) {
var screenX = xOffset - (x - y) * TILE_WIDTH_HALF;
var screenY = yOffset + (x + y) * TILE_HEIGHT_HALF;

}
}


Where the offsets are defined as followed:

xOffset = (GAME_WIDTH / 2) - TILE_WIDTH_HALF
yOffset = 0;


I have been using the math from the following page I stumbled upon but for some reason I can't seem to correct my coordinates for the offsets I have given.

I've tried picking the following ways:

var mouseX = this.game.input.mousePointer.x;
var mouseY = this.game.input.mousePointer.y;

var xOffset = (GAME_WIDTH / 2) - TILE_WIDTH_HALF;
var yOffset = 0;

var wPX = (2 * (mouseX - xOffset - TILE_HEIGHT_HALF) - mouseY) / 2;
var wPY = (2 * mouseY + (mouseX - xOffset - TILE_WIDTH_HALF)) / 2;

var x = Math.floor(wPX / TILE_WIDTH);
var y = Math.floor(wPY / TILE_HEIGHT);


Although for this code my Y coordinate actually picks correctly, it doesn't make sense to me, and I can't seem why it would. Also the X coordinate is completely off.

I have also tried implementing using the following mathematical snippet

map.x = (screen.x / TILE_WIDTH_HALF + screen.y / TILE_HEIGHT_HALF) /2;
map.y = (screen.y / TILE_HEIGHT_HALF -(screen.x / TILE_WIDTH_HALF)) /2;


Where I would define screen.x and screen.y as my mouse.x and mouse.y, again without result. I have read some things about inverse matrices but I would have no idea on how to actually use a matrix. I hope one of you could give me a few nice tips or hint me in the correct direction.

• You don't actually need matrices for this. Have you solved this problem yet? – Lysol Jul 27 '14 at 22:30
• I haven't! Is there a more better/efficient way to do this? – fabianPas Jul 31 '14 at 11:26
• Why are you dividing the map.x and y by two? Also, try drawing a red dot at the calculated x and y and give us the result. – Lysol Aug 1 '14 at 19:12