Scrolling Parallax Background

Good day, I’m currently trying to make a Flappy Bird like game. However, I’m having some issues with the main game’s scrolling background. I have four different layers for the background, and I made the blueprint for them to move at a different speed. Each layer consists on two sprites with an element of the background side by side, one of them attached to the other so I only have to move the parent layer. The issue is that whenever I play the game, the layers start overlapping each other. For some reason it doesn’t happen when I simulate the game. Below I’ll leave two gifs with the game running and simulating for clarity.

Simulating (No overlapping)

Playing on viewport (Layer overlapping)

What I’ve tried so far:

  • Set explicitly the locked axis
  • Distantiate each layer even more on the Y axis
  • Detach sprites and move them separately (Not using their parent’s relative location)

Thanks

Update:

I was able to solve this by setting a different rendering priority for each layer, as the sprites forming them were translucent.

Hi, how did you make the background scroll?