Now we’re going to get into some nice visual work. Building the parallax background is somewhat straightforward: add a bunch of layers, add a bunch of images and textures, add some polish to the interactions (incl. animations). Buuuuut, a lot of the details are interdependent.

Design

We went over the general design of the whole app in a previous chapter, so we’re not going go into crazy detail here. However, here’s a visual breakdown of what we need to do:

This is what the app looks like from a flat perspective, which is deceivingly simple looking. If we disregard the little circle menu for now, a blown-out version of the flat view so that we can see all the layers:

As you can see, there are 8 layers that all have some kind of texture, some are moving and some are static (e.g. speed = 0.0), one has animations and the last layer has additional visual elements for the dashes and small signs.

Breakdown

As I mentioned, putting this together in steps is somewhat tricky because there are interdependent elements.

We’re going to break down our work into these steps and deal with interdependencies when we tie everything together:

1. Build the StarsBackground class to handle the basic layers
2. Build a SignLines class to handle the lines layer
3. Build a StarsSmall class to handle the small constellation stars
4. Build a StarsBig class to handle the big constellation stars
5. Tie everything together in a Stars class that will be the actual background of the app.