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
spritekit infinte scroll background

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

Posted in Cocoa, iOS, iOS Games, Objective C Tagged with: , , , , , ,
7 comments on “SpriteKit – Background Infinite Scroll
  1. Atul awasthi says:

    first of all thanx for nice tut.I am an ios developer.In my current app i want to build Parallax type effect with infinite scrolling.
    In which background is static and two other upper layer will moving in opposite direction.Please help me.I am currently using SpriteKit

  2. 德州撲克 says:

    Awesome site, thanks for sharing !!

  3. Hector Mejia says:

    I have a question, am trying to translate this to Swift but I get an error when passing _dt to the MultiplyScalar function. It says I cannot multiply a NSTimeInterval with a CGPoint. Any way around this? Thanks!!

  4. Hector Mejia says:

    This concerns to my last comment ^

    I meant NSTimeInterval with a CGFloat*** Sorry

  5. 情趣用品 says:

    Awesome! Thanks your sharing!

  6. Debasis Das says:

    Hi Vikram, Sorry about the delayed response. I have to look into the case and probably build a POC. If you have found a solution feel free to post the solution here.

    Best Regards
    Debasis

1 Pings/Trackbacks for "SpriteKit – Background Infinite Scroll"
  1. […] Also refer to SpriteKit – Background Infinite Scroll […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news