等距屏幕映射

Question

当我有“斜坡”和+1高度的瓷砖时，我试图找出如何在鼠标下方获得正确的“活动”瓷砖（见下图）。

当我的世界平坦时，一切都没有问题。一旦我添加了一个高度为+1的瓷砖，以及一个回到+0的斜坡，我的屏幕 - ＆gt;地图例程仍然看起来好像一切都“平坦”。

在上图中，绿色“渐变”是我要渲染的真实图块并计算鼠标 - ＆gt;地图，但是你看到“下面”的蓝色瓷砖是计算出来的区域。因此，如果您将鼠标移动到任何深绿色区域，它会认为您正在使用另一个磁贴。

这是我的地图渲染（非常简单）

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();

    }
}    

这是我的鼠标 - ＆gt;地图例程：

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];

我有一种感觉，我将不得不重新开始并实施一个基于世界的地图系统，而不是一个简单的屏幕 - ＆gt;地图例程。

感谢。

Answer 1

你的假设是正确的。为了“挑选”世界几何图形，您的例程需要了解世界（而不仅仅是基础图块配置）。也就是说，没有任何关于当前拾取的瓦片高度的概念（通过您当前的算法），没有办法确定相邻的瓦片（或者更远的一块，取决于允许的高度）是否应该是通过采摘射线截获。

你已经获得了射击射线的最终可能点。剩下的就是在世界空间中定义光线的剩余部分，并检查该光线是否与世界几何体相交。

Answer 2

如果像图片一样，您的视角总是45度，并且总是来自同一方向，那么您的鼠标 - ＆gt; map例程可以使用类似的算法：

1. 计算当前你正在做的瓷砖的i，j（你的xmouse，ymouse的最终价值）
2. 在i，j
查找瓷砖的高度和角度
3. 给定高度和角度，这个瓷砖是否与采摘光线相交？如果是这样，设置lasti，lastj = i，j
4. 递增/递减i，j向对角方向一步
5. 我们是否已从地图的边缘掉下来了？如果是这样，请返回lasti，lastj。否则回到2。

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

3是棘手的部分，取决于你的世界几何。绘制一些三角形，你应该能够弄明白。或者您可以尝试查看函数intersect_quadrilateral_ray() here。