Large Seamless Scrolling Background in SpriteKit? - xcode

Question

Okay, so i'm fairly new to SpriteKit, but so far it's been a lot of fun working with it. I'm looking for a way to have a large scrolling background loop endlessly. I've divided my background into small chunks to let SK call as it needs them, using this code:
for (int nodeCount = 0; nodeCount < 50; nodeCount ++) {
NSString *backgroundImageName = [NSString stringWithFormat:#"Sky_%02d.gif", nodeCount +1];
SKSpriteNode *node = [SKSpriteNode spriteNodeWithImageNamed:backgroundImageName];
node.xScale = 0.5;
node.yScale = 0.5;
node.anchorPoint = CGPointMake(0.0f, 0.5f);
node.position = CGPointMake(nodeCount * node.size.width, self.frame.size.height/2);
node.name = #"skyBG";
and I'm able to move this whole block just fine in update, but I can't get it to loop seamlessly. or at all, for that matter. I've tried the method suggested elsewhere on here that takes a copy of the background and takes it to the other end to give the appearance of a seamless loop, and no dice here. I've also tried adding this to the end of the above code, which I had hoped might work:
if (nodeCount == 49)
{
nodeCount = 0;
}
but that just cause the simulator to hang, so I assume it's inadvertently creating a loop or something. Any assistance at all would be great! I feel like there's a simple fix, but I'm just not getting there... thanks a bunch, folks!
UPDATE
here's the code I'm currently using to get the background to scroll, which works just fine:
-(void)update:(CFTimeInterval)currentTime {
_backgroundNode.position = CGPointMake(_backgroundNode.position.x - 1, _backgroundNode.position.y);
}
So to sum up: I have a moving background, but getting it to loop seamlessly has been challenging because of the size of the background. If there's anything at all I can do to help clarify, let me know! Thanks a bunch

Answer 1

This is just an example of the logic you can employ to achieve a scrolling background. It is by no means a final or ideal implementation, but rather a conceptual example.
Here is a simple scroller class :
// Scroller.h
#import <SpriteKit/SpriteKit.h>
#interface Scroller : SKNode
{
// instance variables
NSMutableArray *tiles; // array for your tiles
CGSize tileSize; // size of your screen tiles
float scrollSpeed; // speed in pixels per second
}
// methods
-(void)addTiles:(NSMutableArray *)newTiles;
-(void)initScrollerWithTileSize:(CGSize)scrollerTileSize scrollerSpeed:(float)scrollerSpeed;
-(void)update:(float)elapsedTime;
#end
Implementation :
// Scroller.m
#import "Scroller.h"
#implementation Scroller
-(instancetype)init
{
if (self = [super init])
{
tiles = [NSMutableArray array];
}
return self;
}
-(void)addTiles:(NSMutableArray *)newTiles
{
[tiles addObjectsFromArray:newTiles];
}
-(void)initScrollerWithTileSize:(CGSize)scrollerTileSize scrollerSpeed:(float)scrollerSpeed
{
// set properties
scrollSpeed = scrollerSpeed;
tileSize = scrollerTileSize;
// set initial locations of tile and set their size
for (int index = 0; index < tiles.count; index++)
{
SKSpriteNode *tile = tiles[index];
//set anchorPoint to bottom left
tile.anchorPoint = CGPointMake(0, 0);
// set tilesize
// this implementation requires uniform size
[tile setSize:tileSize];
//calcuate and set initial position of tile
float startX = index * tileSize.width;
tile.position = CGPointMake(startX, 0);
//add child to the display list
[self addChild:tile];
}
}
-(void)update:(float)elapsedTime
{
//calculate speed for this frame
float curSpeed = scrollSpeed * elapsedTime;
// iterate through your screen tiles
for (int index = 0; index < tiles.count; index++)
{
SKSpriteNode *tile = tiles[index];
// set new x location for tile
tile.position = CGPointMake(tile.position.x - curSpeed, 0);
// if new location is off the screen, move it to the far right
if (tile.position.x < -tileSize.width)
{
// calculate the new x position based on number of tiles an tile width
float newX = (tiles.count -1) * tileSize.width;
// set it's new position
tile.position = CGPointMake(newX, 0);
}
}
}
In your scene , init your scroller :
-(void)initScroller
{
// create an array of all your textures
NSMutableArray *tiles = [NSMutableArray array];
[tiles addObject:[SKSpriteNode spriteNodeWithTexture:skyTexture]];
[tiles addObject:[SKSpriteNode spriteNodeWithTexture:skyTexture]];
[tiles addObject:[SKSpriteNode spriteNodeWithTexture:skyTexture]];
[tiles addObject:[SKSpriteNode spriteNodeWithTexture:skyTexture]];
// create scroller instance (ivar or property of scene)
scroller = [[Scroller alloc]init];
// add the tiles to the scroller
[scroller addTiles:tiles];
// init the scroller with desired tile size and scroller speed
[scroller initScrollerWithTileSize:CGSizeMake(1024, 768) scrollerSpeed:500];
// add scroller to the scene
[self addChild:scroller];
}
In your scene update method :
-(void)update:(CFTimeInterval)currentTime
{
float elapsedTime = .0166; // set to .033 if you are locking to 30fps
// call the scroller update method
[scroller update:elapsedTime];
}
Again, this implementation is very barebones and is a conceptual example.

Answer 2

I am currently working on a library for a tile scroller, is using a solution similar to the one provided by prototypical, but using a Tableview datasource pattern to ask for the nodes. Take a look at it:
RPTileScroller
I take some effort to make it the most efficient possible, but mind I am not a game developer. I tried it with my iPhone 5 with random colors tiles of 10x10 pixels, and is running on a solid 60 fps.