2
\$\begingroup\$

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
\$\endgroup\$

1 Answer 1

Reset to default
1
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\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
    Commented Dec 17, 2016 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
    Commented Dec 18, 2016 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
    Commented Dec 18, 2016 at 1:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .