SpriteKit – Background Infinite Scroll

SpriteKit – Background Infinite Scroll

In the below sample code we will create two background image and play it in a infinite loop. For a much more realistic view, developers can have a stack of background images that plays in a loop.

Play the video for the final output

//
//  KSMyScene.h
//  SpriteKitInfiniteScroll
//
//  Created by Debasis Das on 3/18/14.
//
#import <SpriteKit/SpriteKit.h>
@interface KSMyScene : SKScene
@end

//
//  KSMyScene.m
//  SpriteKitInfiniteScroll
//
//  Created by Debasis Das on 3/18/14.
//
#import "KSMyScene.h"
@implementation KSMyScene
{
    NSTimeInterval _lastUpdateTime;
    NSTimeInterval _dt;
    CGPoint _velocity;
}

-(id)initWithSize:(CGSize)size {    
    if (self = [super initWithSize:size]) {
        /* Setup your scene here */
        // self.backgroundColor = [SKColor colorWithRed:0.15 green:0.15 blue:0.3 alpha:1.0];
        self.backgroundColor = [SKColor whiteColor];
        //We will create two background image and play it in a infinite loop. For a much more realistic view, developers can have a stack of background images
        for (int i=0; i<2; i++)
        {
            SKSpriteNode *background = [SKSpriteNode spriteNodeWithImageNamed:@"background"];
            //background.position = CGPointMake(self.size.width/2, self.size.height/2);
            background.position = CGPointMake((i*background.size.width)+background.size.width/2, background.size.height/2);
            //background.position = CGPointZero; //In a Mac machine makes the center of the image positioned at lower left corner. Untill and unless specified this is the default position
            background.name =@"background";
            [self addChild:background];
        }

    }
    return self;
}

-(void)update:(CFTimeInterval)currentTime {
    /* Called before each frame is rendered */
    if(_lastUpdateTime)
    {
        _dt = currentTime - _lastUpdateTime;
    }
    else
    {
        _dt=0;
    }
    _lastUpdateTime = currentTime;
    [self moveBackground];
}

-(void)moveBackground
{
    [self enumerateChildNodesWithName:@"background" usingBlock:^(SKNode *node, BOOL *stop){
        SKSpriteNode *bg  = (SKSpriteNode *)node;
        CGPoint bgVelocity = CGPointMake(-80.0, 0); //The speed at which the background image will move
        CGPoint amountToMove = CGPointMultiplyScalar (bgVelocity,_dt);
        bg.position = CGPointAdd(bg.position,amountToMove);
        if (bg.position.x <= -bg.size.width/2)
        {
            bg.position = CGPointMake(bg.position.x + (bg.size.width)*2, bg.position.y);
        }
    }];
}

CGPoint CGPointAdd(CGPoint p1, CGPoint p2)
{
    return CGPointMake(p1.x + p2.x, p1.y + p2.y);
}

CGPoint CGPointMultiplyScalar(CGPoint p1, CGFloat p2)
{
    return CGPointMake(p1.x *p2, p1.y*p2);
}
@end

The background image used in the sample is

Also Refer to SpriteKit – Parallax Effect (fixed background- Moving foreground objects)