1
\$\begingroup\$

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;

            this.map[x][y] = game.add.sprite(screenX, screenY, 'tile');
        }
 }

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.

\$\endgroup\$
  • \$\begingroup\$ You don't actually need matrices for this. Have you solved this problem yet? \$\endgroup\$ – Lysol Jul 27 '14 at 22:30
  • \$\begingroup\$ I haven't! Is there a more better/efficient way to do this? \$\endgroup\$ – fabianPas Jul 31 '14 at 11:26
  • \$\begingroup\$ 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. \$\endgroup\$ – Lysol Aug 1 '14 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.