javascript - 如何在考虑瓦片高度的情况下计算等轴测世界中鼠标下方瓦片的索引

Question

我有一个基于图 block 的等距世界，我可以使用以下计算来计算特定(鼠标)坐标下的图 block :

function isoTo2D(pt:Point):Point{
  var tempPt:Point = new Point(0, 0);
  tempPt.x = (2 * pt.y + pt.x) / 2;
  tempPt.y = (2 * pt.y - pt.x) / 2;
  return(tempPt);
}

function getTileCoordinates(pt:Point, tileHeight:Number):Point{
  var tempPt:Point = new Point(0, 0);
  tempPt.x = Math.floor(pt.x / tileHeight);
  tempPt.y = Math.floor(pt.y / tileHeight);
  return(tempPt);
}

(取自 http://gamedevelopment.tutsplus.com/tutorials/creating-isometric-worlds-a-primer-for-game-developers--gamedev-6511 ，这是一个 flash 实现，但数学是相同的)

但是，当我的瓷砖具有不同的海拔高度时，我的问题就来了:

在这些场景中，由于一些具有较高海拔的瓦片的高度，后面的瓦片(或部分瓦片)被覆盖并且不应该能够被鼠标选中，而是选择其中的瓦片在它的前面。如何在考虑瓷砖高度的情况下通过鼠标坐标计算瓷砖？

我正在使用 javascript 和 Canvas 实现。

Answer 1

有一种技术可以在 canvas 上捕获鼠标下方的对象，而无需将鼠标坐标重新计算为您的“世界”坐标。这并不完美，有一些缺点和限制，但它在一些简单的情况下确实有效。

1) 将另一个 canvas 放在主 canvas 的顶部并将其 opacity 设置为 0。确保第二个 canvas 具有相同的大小并与您的主代码重叠。

2) 每当您将交互式对象绘制到主 Canvas 时，在第二个 Canvas 上绘制并填充相同的对象，但每个对象使用一种独特的颜色(来自 #000000到#ffffff)

3) 将鼠标事件处理设置为第二个 Canvas 。

4) 在鼠标位置的第二个 canvas 上使用 getPixel 获取单击/悬停对象的“id”。

主要优点是WYSIWYG 原则，因此(如果一切都正确完成)您可以确定，主canvas 上的对象与第二个 canvas，因此您无需担心 Canvas 大小调整或对象 depth(如您的情况)计算以获得正确的对象。

主要缺点是需要“双重渲染”整个场景，但可以通过在不需要时不在第二个 Canvas 上绘制来优化它，例如:

• 在“空闲”场景状态下，当交互式对象停留在它们的位置并等待用户操作时。

• 在“锁定”场景状态下，当某些东西是动画或 smth 时。并且不允许用户与对象进行交互。

主要限制是场景中交互对象的最大数量(最多 #ffffff 或 16777215 个对象)。

所以...不推荐用于:

• 场景中有大量互动对象的游戏。 (表现不佳)

• 快节奏游戏，交互式对象不断移动/创建/销毁。(性能不佳，重用 ID 存在问题)

适用于:

• GUI 的处理

• 回合制游戏/慢节奏益智游戏。