Endless Scrolling Background in Spritekit

Vertical endless scrolling background in sprite kit

I will give you an answer conceptually to give you a place to start since you have not provided any code.

You will need multiple images that are the size of the screen and stack them on top of each other vertically.

You then want to move these images down point by point. When the top of one of the images reaches the bottom of the screen, put it back on top of your stack of images. This will cause a never ending scrolling of your background.

Best of luck!

Endless Scrolling Background in SpriteKit

I did a small component called SKScrollingNode for that particular need in my last open source project : SprityBird.

FPS was not an issue even with 3 or 4 layers (for parallax), but you may need to try it yourself.

To use it you just have to add it like any other node and giving it a scrollingSpeed likeso :

back = [SKScrollingNode scrollingNodeWithImageNamed:@"back" inContainerWidth:WIDTH(self)];
[back setScrollingSpeed:BACK_SCROLLING_SPEED];
[self addChild:back];

SKScrollingNode.h

@interface SKScrollingNode : SKSpriteNode

@property (nonatomic) CGFloat scrollingSpeed;

+ (id) scrollingNodeWithImageNamed:(NSString *)name inContainerWidth:(float) width;
- (void) update:(NSTimeInterval)currentTime;

@end

SKScrollingNode.m

@implementation SKScrollingNode

+ (id) scrollingNodeWithImageNamed:(NSString *)name inContainerWidth:(float) width
{
    UIImage * image = [UIImage imageNamed:name];

    SKScrollingNode * realNode = [SKScrollingNode spriteNodeWithColor:[UIColor clearColor] size:CGSizeMake(width, image.size.height)];
    realNode.scrollingSpeed = 1;

    float total = 0;
    while(total<(width + image.size.width)){
        SKSpriteNode * child = [SKSpriteNode spriteNodeWithImageNamed:name ];
        [child setAnchorPoint:CGPointZero];
        [child setPosition:CGPointMake(total, 0)];
        [realNode addChild:child];
        total+=child.size.width;
    }

    return realNode;
}

- (void) update:(NSTimeInterval)currentTime
{
    [self.children enumerateObjectsUsingBlock:^(SKSpriteNode * child, NSUInteger idx, BOOL *stop) {
        child.position = CGPointMake(child.position.x-self.scrollingSpeed, child.position.y);
        if (child.position.x <= -child.size.width){
            float delta = child.position.x+child.size.width;
            child.position = CGPointMake(child.size.width*(self.children.count-1)+delta, child.position.y);
        }
    }];
}   
@end

Swift Spritekit Scrolling Background

This is the code I used to make a background that moves right to left across the screen. It used a loop to generate three backgrounds, all of which formed a line which passed through the screen and returned to their original position when they were done. To convert it to a screen that moves top to bottom, you would have to replace the moveByX SKActions to moveToY, and exchange changing x values with changing y values. Hope this helps!

func makeBackground() {

    var backgroundTexture = SKTexture(imageNamed: "img/bg.png")

    //move background right to left; replace
    var shiftBackground = SKAction.moveByX(-backgroundTexture.size().width, y: 0, duration: 9)
    var replaceBackground = SKAction.moveByX(backgroundTexture.size().width, y:0, duration: 0)
    var movingAndReplacingBackground = SKAction.repeatActionForever(SKAction.sequence([shiftBackground,replaceBackground]))

    for var i:CGFloat = 0; i<3; i++ {
        //defining background; giving it height and moving width
        background=SKSpriteNode(texture:backgroundTexture)
        background.position = CGPoint(x: backgroundTexture.size().width/2 + (backgroundTexture.size().width * i), y: CGRectGetMidY(self.frame))
        background.size.height = self.frame.height
        background.runAction(movingAndReplacingBackground)

        self.addChild(background)
    }
}

Can I make an Infinite Scrolling Background in an SKCamera?

I did the Vertical scrolling background like this:

• Creating a background class:

  import SpriteKit
  
  class BGClass: SKSpriteNode {
  
  func moveBG(camera: SKCameraNode) {
      if self.position.y - self.size.height - 10 > camera.position.y {
          self.position.y -= self.size.height * 3
      }
   }
  }
  

• Creating 3 background:

  var bg1 : BGClass?
  var bg2 : BGClass?
  var bg3 : BGClass?
  

• Creating a function in GameScene

  func manageBackgrounds() {
      bg1?.moveBG(mainCamera!)
      bg2?.moveBG(mainCamera!)
      bg3?.moveBG(mainCamera!)
  }
  

• Calling manageBackground() in Update:

  override func update(currentTime: NSTimeInterval) {
      mangePlayer()
      moveCamera()
      mangeBackgrounds()
      createNewClouds()
  }
  

For Horizontal scrolling (Add 3 background image after each other and set camera on the first image):

• change the background class like this:

  import SpriteKit
  
  class BGClass: SKSpriteNode {
  
  func moveBG(camera: SKCameraNode) {
          if self.position.x - self.size.width - 10 > camera.position.x {
      self.position.x -= self.size.width * 3
    }
   }
  }
  

• in move camera function:

  func moveCamera() {
      self.mainCamera?.position.x += 3
  }
  

---

Related Topics