向滾動背景添加視差

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張畫布-一個直接放在另一個上

• 底部有一個“背景”畫布，動畫制作速度較慢。
• “游戲對象”畫布位於頂部，並且動畫制作速度更快。

這樣，您可以為每個畫布使用不同的動畫速度來創建視差效果。