javascript - 等距屏幕映射

Question

当我有“ramp”和+1 height tiles(见下图)时，我想弄清楚如何在鼠标下获得正确的“active”tile。

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

在上图中，绿色“斜坡”是我要渲染和计算鼠标 -> map 的真实图 block ，但是您在“下方”看到的蓝色图 block 是计算的区域。因此，如果您将鼠标移到任何深绿色区域，它就会认为您在另一个图 block 上。

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

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

    }
}    

这是我的鼠标 -> map 例程:

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

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

谢谢。

Answer 1

你的假设是正确的。为了“挑选”世界几何，您的例程需要了解世界(而不仅仅是基础级别的图 block 配置)。也就是说，如果没有任何关于当前选择的瓷砖附近瓷砖高度的概念(通过您当前的算法)，则无法确定相邻瓷砖(或更远的瓷砖，取决于允许的高度)是否应该是被拾取射线拦截。

您已经获得了拾取射线的最后可能点。剩下的就是在世界空间中定义射线的其余部分，并检查该射线是否与世界几何相交。