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)
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
Hi Atul,
Sorry for the late reply, was caught up with a few things
I guess what you want can be found at
http://www.knowstack.com/spritekit-parallax-effect/
Let me know if you need any further help
Best Regards
Debasis Das
Awesome site, thanks for sharing !!
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!!
This concerns to my last comment ^
I meant NSTimeInterval with a CGFloat*** Sorry
Awesome! Thanks your sharing!
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