向滚动背景添加视差

Question

我正在做一个画布游戏，您在无尽的背景下乘坐太空飞船旅行。 现在，我要根据播放器的x / y位置在不同位置绘制四个背景实例，因此它们将随播放器一起移动。

ctx.translate(ax,ay);
ctx.drawImage(Ibg,Math.round(x/1080)*1080,Math.round(y/720)*720,1080,720);
ctx.drawImage(Ibg,(Math.round(x/1080)*1080)-1080,Math.round(y/720)*720,1080,720);
ctx.drawImage(Ibg,Math.round(x/1080)*1080,(Math.round(y/720)*720)-720,1080,720);
ctx.drawImage(Ibg,(Math.round(x/1080)*1080)-1080,(Math.round(y/720)*720)-720,1080,720);

转换为斧头和斧头基本上可以使对象随玩家移动的摄像机滚动，因为斧头和斧头是相对于玩家的位置的。 我可以通过执行以下操作来创建视差效果：

ctx.translate(ax*.5,ay*.5);

就像我希望的那样，这使背景滚动比其他游戏对象慢。 但是我仍然没有弄清楚如何调整其余代码来进行补偿。 随着玩家远离（0,0），他看到的背景越来越少，因为它似乎以更快的速度超越了他。 我怎样才能解决这个问题？

Answer 1

作为标记答案的一种选择，您根本不需要使用第二个画布（这是一个不错的选择）。

您可以简单地将CSS用于背景图像，并根据需要调整背景位置。

在这里演示

基本部分就是这些行：

可以用您要移动的值替换-1的背景X位置。

bgx -= 1;

然后为每个循环更新背景位置（在此示例中，Y位置是固定的）：

canvas.style.backgroundPosition = bgx + 'px -30px'; // set X and Y position

当bgx以某种方式等于图像的最大宽度时，只需将其重置为开始即可。

Answer 2

使用2张画布-一个直接放在另一个上

• 底部有一个“背景”画布，动画制作速度较慢。
• “游戏对象”画布位于顶部，并且动画制作速度更快。

这样，您可以为每个画布使用不同的动画速度来创建视差效果。