2

我一直在尝试从俯视图的角度（如小地图）在网页上显示 3D 游戏中玩家的位置。我只是将标记（通过 SVG）叠加在游戏关卡的 1024x1024 图像上（俯视图，取自游戏本身）。我只关心x,y坐标，因为我没有z在俯视图中使用。

游戏的世界具有相同的最小/最大坐标x和y:-4096到4096。0, 0坐标是世界的中心。

更有趣的是，游戏关卡在游戏世界中的初始位置是任意的。因此，例如，我一直在测试的特定关卡的左上角世界坐标是-2440, 3383.

我最初的困惑来自0,0网页中的坐标是左上角，而不是世界空间的中心。

如何正确转换 3D 世界空间坐标以正确显示在任何维度的网页视口中？

这是我尝试过的（我一直在尝试使用 svg 中的 viewbox 属性来处理左上角世界坐标偏移）

scalePosition: function (targetWidth, targetHeight) {
    // in-game positions
    var gamePosition = this.get('pos');

    var MAX_X = 8192,
        MAX_Y = 8192;

    // Flip y
    gamePosition.y = -gamePosition.y;

    // Ensure game coordinates are only positive values
    // In game = -4096 < x|y < 4096 (0,0 = center)
    // Browser = 0 < x|y < 8192 (0,0 = top-left)
    gamePosition.x += 4096;
    gamePosition.y += 4096;


    // Target dimenions
    targetWidth = (targetWidth || 1024),
    targetHeight = (targetHeight || 1024);

    // Find scale between game dimensions and target dimensions
    var xScale = MAX_X / targetWidth,
        yScale = MAX_Y / targetHeight;

    // Convert in-game coords to target coords
    var targetX = gamePosition.x / xScale,
        targetY = gamePosition.y / yScale;

    return {
        x: targetX,
        y: targetY
    };
},
4

0 回答 0