Getting ready

For an infinite scrolling background you need to know about the anatomy of SpriteKit shown earlier. You should be aware of the rendering loop, how in a particular frame the update method functions, and how SKScene evaluates the actions and physics simulation thereby rendering all the stuff in the SKView. Now using this loop, you implement sky scrolling infinitely giving the feel of a spaceship flying.

How to do it...

Now is the time for action; perform the following steps to add the infinite scrolling background to your game.

The sequence of the views presented on the screen can be changed by altering their z coordinate; the view having highest z coordinate will always be on the top. This means we can explicitly define which layer we want to keep on top and which we want to keep at the bottom, which is explained in the following steps:

How it works...

Implementation of infinite scrolling is divided into three parts. We need to follow the following steps to accomplish infinite scrolling for our game:

In this iteration, the SpaceBGNode is identified by its name so that its position can be updated.

SKSpriteNode * spaceBGNode = (SKSpriteNode *) node;

The amount of distance to be moved is calculated using the CGPointMultiplyScalar inline function that is fed with the constant value SPACE_BG_VELOCITY and the difference of time obtained from the update method in each frame.

CGPoint bgVelocity = CGPointMake(-SPACE_BG_VELOCITY, 0);
CGPoint amtToMove = CGPointMultiplyScalar(bgVelocity,self.diffTime);

After that, the calculated distance is added in the current position of SpaceBGNode.

spaceBGNode.position = CGPointAdd(spaceBGNode.position, amtToMove);

The last but the most important step to enable scrolling, is to set the position of SpaceBGNode to the right edge of the screen whenever it reaches the left edge of the screen.

if (spaceBGNode.position.x <= -spaceBGNode.size.width)
{
        spaceBGNode.position =
             CGPointMake(spaceBGNode.position.x + spaceBGNode.size.width*2,
                         spaceBGNode.position.y);
  }

The next task is to update each frame to move it infinitely over the scene. Now to make it move regularly, the moveSpaceBackground method is called in the update method of FSMyScene in each frame.

- (void)update:(CFTimeInterval)currentTime
{
    /* Called before each frame is rendered */
    self.diffTime = currentTime - self.lastUpdatedTime;
    
    self.lastUpdatedTime = currentTime;
    
    [self moveSpaceBackground];
}

The update loop will be executed in every frame. So to move our background in every step, we have called the moveSpaceBackground method inside the update loop. Using this approach of infinite scrolling, we can also implement parallax gaming, which is very common nowadays. In parallax scrolling game, there will be background and player in separate layers and they will be moving at the same time at different speeds. This will give the user a perception of some real-time movement of the player against the background.