使用视差滚动，立方体有失真

Question

我现在正在创建一个2d平台游戏，我决定使用视差滚动。

所以我做的是我有3张瓷砖地图，一张用于背景，一张用于前景，一张用于前景。

每个瓷砖地图都会以不同的尺寸显示瓷砖。

背景 - ＆gt; 48像素

前景 - ＆gt; 64PX

在前台前面 - ＆gt; 80px

我从其他3D游戏（例如Minecraft）中获得了像素，当立方体更进一步时。我希望每个瓷砖就像它的大小是一个立方体一样。

我使用以下代码计算每个图块在屏幕上的位置，基于其x，y和大小。

x - (cameraX * size / 64) + canvas.width / 2; // 64 is the size of the texture.
y - (cameraY * size / 64) + canvas.height / 2;

结果如下：

正如您所看到的，背景中的瓷砖移动速度较慢。

然而，当你跳跃时，瓷砖之间会有空白区域：

我明白为什么会发生这种情况，因为瓷砖上应该有一个顶面（好像它是一个立方体），但由于它只是一个正方形，所以它显示了空白区域。

所以我使用这段代码使它看起来好像是一个3d立方体。

var i = (size - size * 0.25);

while (i < size)
{   
    ctx.drawImage(images[this.type], getProperX(x*(i), i), getProperY(y*i, i), i, i);

    // The first argument of getProperX/getProperY is the x/y, the second argument is the size of the tile.

    i += 1;
}

这样可以持续绘制正方形的负载，其大小略小于最后一个，因此getProperX / Y函数会将其显示在正确的位置。

现在它们看起来像立方体，所以问题几乎已经解决了：

现在唯一的问题是，当你在它的顶部/底部或它的右边/左边看时（就好像它是扭曲的），立方体的长度非常长。

为什么立方体/瓷砖这么长，有人可以向我解释一下吗？

你会如何修复这样的事情？

我在视差滚动功能getProperX/Y()中做错了什么？因为我不明白为什么遥远的瓷砖和接近的瓷砖之间有太多的空间。

感谢所有人的帮助，非常感谢。