2

I can draw my map according to the formula on Drawing Isometric game worlds . But how can i find the x-y of one tile according to it's position on map layer div?

For being clear, my tile's left style is 1036px and top style is 865px. According to those css properties how can find the tile's x and y position according to map?

Tile width is 200 and height is 100.

Many Thanks.


My javascript code is like that:

this.drawTiles = function(min_x, max_x, min_y, max_y) {
    if (min_x < 0) min_x = 0;
    if (min_y < 0) min_y = 0;
    if (max_x < 0) max_x = thisObj.MAXSIZE;
    if (max_y < 0) max_y = thisObj.MAXSIZE;
    if (max_x > this.mapSize - 1) max_x = this.mapSize - 1;
    if (max_y > this.mapSize - 1) max_y = this.mapSize - 1;
    if (min_x < this.mapSize - 1) min_x = max_x - thisObj.MAXSIZE;
    if (min_y < this.mapSize - 1) min_y = max_y - thisObj.MAXSIZE;
    var appendLayer = thisObj.maplayer;

    this.capMapDataObj.getTiles(min_x, max_x, min_y, max_y, function(JSONResp) {
        var tiles = JSON.parse(JSONResp);
        for (var x=min_x; x<max_x+1; x++) {
            for (var y=min_y; y<max_y+1; y++) {
                var tile = tiles[x][y];
                var xpos = (y * thisObj.tile_width / 2) + (x * thisObj.tile_width / 2);
                var ypos = (x * thisObj.tile_height / 2) - (y * thisObj.tile_height / 2);
                var zin1 = 100 + parseInt(x) + parseInt(y);
                var elem = '<div style="position:absolute;top:'+ypos+'px;left:'+xpos+'px;z-index:'+zin1+';width:200px;height:200px;background-image:url(images/'+tile[4]+');background-position:bottom;background-repeat:no-repeat;bottom:0px;text-align:center;" id="'+x+'_'+y+'"><div style="padding-top:140px;">'+x+' - '+y+'</div></div>\n';
                if (document.getElementById(x+'_'+y) == undefined)
                    $(elem).appendTo(appendLayer);
            }
        }
    });
}

So xpos and ypos variables are the css positions of each tile layer. When i click the Map Layer, I wanted to calculate the tile's isometric x-y coordinates.

1
  • 1
    Can you provide more information with regards to which algorithm you used ? The linked question mentions several. Mar 12, 2012 at 12:56

1 Answer 1

5

I've solved the problem.

tileX = (yPos / tile_height) + (xPos / tile_width);

tileY = (xPos / tile_width) - (yPos / tile_height);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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