0

我正在制作一款画布游戏，您可以在其中乘坐宇宙飞船穿越无尽的重复背景。现在，我正在根据玩家的 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) 越来越远，他看到的背景越来越少，因为它似乎以更快的速度超越了他。我怎样才能解决这个问题？

4

2 回答 2

1

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

您可以简单地使用 CSS 作为背景图像并根据需要调整背景位置。

演示在这里

最重要的部分就是以下几行：

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

bgx -= 1;

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

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

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

于 2013-08-22T06:40:36.687 回答
0

使用 2 个画布——一个直接放在另一个上面

  • “背景”画布位于底部，动画速度较慢。
  • “游戏对象”画布位于顶部，动画速度更快。

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

于 2013-08-22T06:30:23.607 回答