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

转换为ax和ay基本上允许对象与玩家移动的摄像机一起滚动，因为ax和ay相对于玩家的位置。我可以通过这样做来创建视差效果：

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

这使得背景滚动比其他游戏对象慢，就像我想要的那样。但我仍然没有想出如何调整代码的其余部分来补偿。当玩家从（0,0）移动得更远时，他看到的背景越来越少，因为它似乎以更快的速度超越了他。我该如何解决这个问题？

Answer 1

作为markE答案的一个选项，您根本不需要使用第二个画布（这是一个很好的选择）。

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

<强> Demo here

关键部分就是这些方面：

背景X位置，其中-1可以替换为您想要移动它的值。

bgx -= 1;

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

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

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

Answer 2

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

“背景”画布位于底部，动画效果更慢。
“游戏对象”画布位于顶部，动画效果更快。

通过这种方式，您可以为每个画布使用不同的动画速度创建视差效果。

在滚动背景中添加视差

2 个答案: