Parallax scrolling for iOS with Swift and Sprite Kit

Learn how to add this popular visual effect to your iOS project.

Up until the mid 1990s, the pinnacle of video game graphics was parallax scrolling: the use of multiple scrolling backgrounds, which created a sense of depth and perspective in the game. When you’re being a 2D game in Sprite Kit, you can create this effect by creating multiple sprites, and managing their position over time.

In this example, we’re creating a scene where there are four components, listed in order of proximity:

  • A dirt path
  • Some nearby hills
  • Some further distant hills
  • The sky

You can see the final scene below:

The final parallax scrolling scene.

The final parallax scrolling scene.

In this scene, we’ve drawn the art so that each of these components is a separate image. Additionally, each of these images can tile horizontally without visible edges. The art has been put in a texture atlas. The names of the textures for each of the components are Sky.png, DistantHills.png, Hills.png, and Path.png (the components are shown below).

The components of the parallax scene. Note that all four components can tile horizontally.

The components of the parallax scene. Note that all four components can tile horizontally.

With that out of the way, here’s the source code for the SKScene that shows these four components scrolling horizontally at different speeds:

Parallax scrolling is no more complicated than moving some things quickly and other things slowly. In Sprite Kit, the real trick is getting a sprite to appear to be continuously scrolling, showing no gaps.

In this solution, each of the four components in the scene — the sky, hills, distant hills, and path — are drawn with two sprites each: one shown onscreen, and one to its immediate right. For each pair of sprites, they both slide to the left until one of them has moved completely off the screen. At that point, it’s repositioned so it’s placed to the right of the other sprite.

In this manner, the two sprites are leap-frogging each other as they move. You can see the process illustrated below:

The scrolling process.

The scrolling process.

Getting the speed values right for your scene is a matter of personal taste. However, it’s important to make sure that the relationships between the speeds of the different layers makes sense: if you have an object that’s in the foreground and is moving much, much faster than a relatively close background, it won’t look right.

Simulating perspective using parallax scrolling is a great and simple technique, but be careful with it. Your fearless authors wrote this recipe while in the back of a car that was driving down a winding road, and we developed a little motion sickness while testing the source code.

Something to keep in mind! Motion sickness in games, sometimes known as “simulation sickness,” is a real thing that affects many game players around the world. If you’re making a game that simulates perspective — either in a 3D game or a 2D game where you’re faking perspective — make sure you test with as many people as you can find.

tags: , , , , ,