等距屏幕到地图 [英] Isometric Screen to Map

问题描述

我试图弄清楚当我拥有坡道"和+1个高度图块时如何在鼠标下获得正确的活动"图块(见下图).

I'm trying to figure out how I can get the correct "active" tile under the mouse when I have "ramp" and +1 height tiles (see picture below).

当我的世界平坦时，一切正常.一旦我添加了一个高度为+1的图块，以及一个返回+0的坡度，我的屏幕->地图例程仍然看起来好像一切都是平坦的".

When my world is flat, everything works no problem. Once I add a tile with a height of say +1, along with a ramp going back to +0, my screen -> map routine is still looking as if everything is "flat".

在上面的图片中，绿色的坡道"是我要渲染并计算鼠标的真实图块->地图，但是您看到的下方"的蓝色图块是要计算的区域.因此，如果将鼠标移到任何深绿色区域中，它就会认为您在另一个图块上.

In the picture above, the green "ramp" is the real tile I want to render and calculate mouse -> map, however the blue tile you see "below" it is the area which gets calculated. So if you move your mouse into any of the dark green areas, it thinks you're on another tile.

这是我的地图渲染(非常简单)

Here is my map render (very simple)

canvas.width = canvas.width; // cheap clear in firefox 3.6, does not work in other browsers
for(i=0;i<map_y;i++){
    for(j=0;j<map_x;j++){
        var xpos = (i-j)*tile_h + current_x;
        var ypos = (i+j)*tile_h/2+ current_y;

      context.beginPath();
      context.moveTo(xpos, ypos+(tile_h/2));
      context.lineTo(xpos+(tile_w/2), ypos);
      context.lineTo(xpos+(tile_w), ypos+(tile_h/2));
      context.lineTo(xpos+(tile_w/2), ypos+(tile_h));
      context.fill();

    }
}    

这是我的鼠标->映射例程:

And here is my mouse -> map routine:

ymouse=( (2*(ev.pageY-canvas.offsetTop-current_y)-ev.pageX+canvas.offsetLeft+current_x)/2 );
xmouse=( ev.pageX+ymouse-current_x-(tile_w/2)-canvas.offsetLeft );
ymouse=Math.round(ymouse/tile_h);
xmouse=Math.round(xmouse/(tile_w/2));

current_tile=[xmouse,ymouse];

我觉得我必须重新开始并实现基于世界的地图系统，而不是简单的屏幕->地图例程.

I have a feeling I'll have to start over and implement a world based map system rather than a simple screen -> map routine.

谢谢.

推荐答案

如果与图片一样，您的视角始终为45度并且始终沿同一方向，则鼠标->地图例程可以使用类似以下的算法:

If, like the picture, your view angle is always 45 degrees and always from the same direction, your mouse -> map routine could use an algorithm something like:

1. 计算您当前正在执行的图块的i，j(xmouse的最终值ymouse)
2. 在i，j处查找图块的高度和角度
3. 给定高度和角度，该瓷砖是否与拾取光线相交?如果是这样，请设置lasti，lastj = i，j
4. 递增/递减i，j向观看者的对角线一步
5. 我们跌倒了地图的边缘吗?如果是这样，则返回lasti，lastj.否则，请返回2.

根据图块的最大高度，您可能只需要检查2个图块，而不必一直检查到地图的边缘.

Depending on the maximum height of a tile, you might have to check only 2 tiles, rather than going all the way to the edge of the map.

3是棘手的部分，它取决于您的世界几何体.画一些三角形，您应该就能弄清楚.或者，您可以尝试在 intersect_quadrilateral_ray()此处中查看功能.

3 is the tricky part, and depends on your world geometry. Draw some triangles and you should be able to figure it out. Or you might try looking at the function intersect_quadrilateral_ray() here.

这篇关于等距屏幕到地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！