How can i convert x-y position to tile x-y for isometric tile?

守給你的承諾、 提交于 2019-11-30 16:11:42

问题


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:


I've solved the problem.

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

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


来源:https://stackoverflow.com/questions/9658980/how-can-i-convert-x-y-position-to-tile-x-y-for-isometric-tile

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!