I'm working on a multiplayer space shooter a-la Star Control melee. The background of the game consists of several layers of tiles sprites making up a parallax effect of clouds and stars. The player ship is always centered in the viewport.
The game world has a fixed size and implements wrap-around, so that any object that passes the game world bounds is instantly teleported to the other side.
To make the transition seamless when reaching game bounds , all objects but the player ship are also rendered outside the game bounds if they are on the other side of the screen. This makes chasing a ship, for example feel seamless.
Right now the x and y values of the background tile offsets are determined by the position of the player ship in the game world.
bg1.tilePosition.x = -playerShip.x * 0.01; bg1.tilePosition.y = -playerShip.y * 0.01; bg2.tilePosition.x = -playerShip.x * 0.02; bg2.tilePosition.y = -playerShip.y * 0.02;
My problem is with the parallax background when the player reaches the game world bounds. If the ship jumps from x position 1000 to position 0, for example, then all the tile positions jump resulting in a jerky movement.
In the following gif I made a semi white transparent background for the game world so you can see exactly the parallax jump as soon as the purple ship wraps around the game world:
How can I avoid this so that the parallax background is always smooth?
Things I've thought of:
- Not changing the position of the player when it wraps around, then use a modulo of the game world size for positioning. I can't do that because it will make the game data dirtier and harder to work with plus it increases network bandwidth which I want to avoid
- Tying the tile offset to input. The player ship can move without input from collisions/inertia so that's no help