Space Loops backdrop

We’ve had requests on Reddit as to how the backdrop in Space Loops was made. So here’s our attempt at an explanation!

Parallax

The Space Loops backdrop creates a sense of depth by using a parallax effect on the stars and planets:

It is of course totally realistic that the stars go by almost as fast as the planets 😉 So don’t think about that anymore.

Creating a parallax effect like this is rather simple. While the camera moves, we move all stars and planets in the same direction, times a factor that we call p.

Things that are infinitely far away should have p = 1, things that are closer should have a value for p closer to 0. This is demonstrated in the gif below:

Stars and planets are spawned with a random scale. The value of p is then linearly dependent on the scale.

This way we sometimes have some really big planets, that moves by fast.

Gradients

I guess we couldn’t settle on background color, so we chose to interpolate between a few:

This interpolation is based on the cameras y-position, so the color will gradually change as the player progres upwards.

The stars, planets and even the walls get a slight tint from the current background color.

There are two global uniforms (Shader values), that gets set all the time. They are called “_GlobalBottomColor” and “_GlobalTopColor”.

Using a global shader property allows all shaders to share the same colors, hence it does not need to be set up on several materials.

Here’s a quick little graphic of how the background gradient is determined:

Each interval of x units defines a new top and bottom color. The colors referred to before as _GlobalBottomColor and _GlobalTopColor are then chosen by interpolating between the colors in the interval that the camera is part of.

Color.Lerp will do the trick, but the interpolation does not actually have to be linear. We use a quadratic function that ensures that the center (the point in time where the color is equally based on the two end-points), is seen as little as possible.

From here, it is the job of the shaders to chose a color based on the two global colors. This is done by using Normalized Device Coordinates and yet another interpolation.

 

I hope you found this blog post useful or at least interesting. Make sure to check out Space Loops on Google Play.