# How to get smooth parallax in a wrap-around world

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

## 1 Answer

Use a separate position variable for each of your parallax planes.

Increment all of the planes proportionally when the ship moves.

Do the warp-around modulo for each parallax planes independently.

• My input is the ship's position as it arrives from the server. How would I use that to increment the planes' texture offset? How do you handle the wrap around? – OpherV Dec 17 '16 at 19:55
• parallax_plane_pos = parallax_plane_pos + (ship_new_position - ship_old_position) * parallax_ratio; parallax_plane_pos = Modulo(parallax_plane_pos, wrap_value); if(parallax_plane_pos < 0) parallax_plane_pos = parallax_plane_pos + wrap_value; – Stephane Hockenhull Dec 18 '16 at 1:09
• I don't know which languages nor vector library you're using but that's the pseudo-code of it. – Stephane Hockenhull Dec 18 '16 at 1:11