Reputation:
I'm making a canvas game where you travel in a spaceship over an endless repreating background. Right now I'm drawing four instances of the background at different positions based off of the player's x/y position, so they will move with the player.
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);
Translating to ax and ay basically allows objects to scroll with the cameras the player moves, since ax and ay are relative to the player's position. I can create a parallax effect by doing this instead:
ctx.translate(ax*.5,ay*.5);
This makes the background scroll slower than other game objects, like I'd like it to. But I still haven't figured out how to adjust the rest of the code to compensate. As the player moves farther from (0,0) he sees less and less of the background, because it seems to go beyond him at a faster rate. How can I fix this?
Upvotes: 0
Views: 1375
Reputation:
As an option to markE's answer you don't need to use a second canvas at all (which is a good option to this).
You can simply use CSS for background image and adjust background position with the amount you need.
The essential part is simply these lines:
Background X position where -1 can be replaced with the value you want to move it at.
bgx -= 1;
Then for each loop the background position is updated (Y position is fixed in this example):
canvas.style.backgroundPosition = bgx + 'px -30px'; // set X and Y position
When bgx
somehow equals the max width of the image you just reset it to the beginning.
Upvotes: 1
Reputation: 105015
Use 2 canvases -- one placed directly on top of the other
That way you can create a parallax effect using different animation speeds for each canvas.
Upvotes: 0