视差滚动无重复| 游戏

Question

I have 5 pictures with length 5000 and height 1800 and I need to implement scrolling through it both for x and y coordinates.

on the other side, even though it is parallax, it shouldn't repeat at all, meaning the right most of the world is the right-most of the layers and top most of world is top most of layer etc etc. how do I go upon creating a formula for that... I just can't wrap my head around it for some reason...

I was thinking doing different sizes for the background and then setting their position accordingly (dividing the camera's x by the whole world width and multiplying by the layer's width with) however all of the layers have same sizes. is it possible to do something while keeping same size, or do I have no choice and need to re-size and apply the way I was thinking?

Answer 1

When you use parallax scrolling, your images should have different widths, depending on how far away the related objects are. Near objects have wide images, far objects have narrow images. You are doing something like this:

When you scroll, you change the horizontal position of the strips (in orange) and clip them to the viewport (in red). When you have scrolled all the way to the left, all strips are left aligned. When you have scrolled to the right, all strips are right aligned.

When your viewport has the width W and you have the scrolling position x between 0 (leftmost) and 1 (rightmost), and you want to position a strip of width w , your new left coordinate x0 for that strip is:

x0 = -(w - W) * x;

The coordinate is negative in relation to the viewport, because you scroll by pushing the elements out of the vewiport to the left.

You could, of course, try to express the scrolling in terms of camera positions and such, but parallax scrolling is about the illusion of depth, not about a correct pepresentation of perspective.