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.

enter image description here

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:

enter image description here

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

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.

  • \$\begingroup\$ 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? \$\endgroup\$ – OpherV Dec 17 '16 at 19:55
  • \$\begingroup\$ 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; \$\endgroup\$ – Stephane Hockenhull Dec 18 '16 at 1:09
  • \$\begingroup\$ I don't know which languages nor vector library you're using but that's the pseudo-code of it. \$\endgroup\$ – Stephane Hockenhull Dec 18 '16 at 1:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.