Adventures with infinite parallax scrolling on Cocos2d

A new game that I am developing involves an infinitely wrapping parallax scrolling background. This is an iOS game made on top of Cocos2d. I had a bit of trouble performance wise implementing it but here’s how I did it.

First, we make a layer which handles all the backgrounds.

Next, we make an class just for each object in the parallax scrolling layer. Each object should have overridden the draw method and make sure it draws the wrapping image. Here’s what I had:

[objc]
@implementation FeiZhuBackgroundObject
+(id)backgroundFromFile:(NSString*)filename atPoint:(CGPoint)pos withSpeed:(float)spd {
return [[[self alloc]initWithTexture:[[CCTextureCache sharedTextureCache] addImage:filename] atPoint:pos withSpeed:spd] autorelease];
}
-(id)initWithTexture: (CCTexture2D*)tex atPoint:(CGPoint)pos withSpeed:(float)spd {
if( (self=[self init])) {
texture = tex;
[texture setAliasTexParameters]; //ZOMG, MUST INCLUDE.
position = pos;
speed = spd;
[self schedule:@selector(step:)];
}
return self;
}
-(void) step:(ccTime) deltaTime
{
position = ccp(position.x – speed, position.y);
if (position.x <= -texture.contentSizeInPixels.width) position = ccp(DEVICE_WIDTH, position.y);
}
-(void)draw {
glDisableClientState(GL_COLOR_ARRAY);
[texture drawAtPoint:position];
if (position.x > 0) [texture drawAtPoint:ccp(position.x-DEVICE_WIDTH, position.y)];
if (position.x < 0) [texture drawAtPoint:ccp(position.x+DEVICE_WIDTH, position.y)];
glEnableClientState(GL_COLOR_ARRAY);
[super draw];
}
@end
[/objc]

Then, in the background layer, you can simply add all the backgrounds

[objc]
@implementation MainBackgroundLayer
-(id)init {
if( (self=[super init])) {
[self addChild:[FeiZhuBackgroundObject backgroundFromFile:@"sky.png" atPoint:ccp(0,0) withSpeed: 0.0f]];
[self addChild:[FeiZhuBackgroundObject backgroundFromFile:@"skytwo.png" atPoint:ccp(0,0) withSpeed: 2.0f]];
[self addChild:[FeiZhuBackgroundObject backgroundFromFile:@"skyone.png" atPoint:ccp(0,0) withSpeed: 1.0f]];
[self addChild:[FeiZhuBackgroundObject backgroundFromFile:@"mone.png" atPoint:ccp(0,0) withSpeed: 1.0f]];
[self addChild:[FeiZhuBackgroundObject backgroundFromFile:@"mtwo.png" atPoint:ccp(0,0) withSpeed: 2.0f]];
}
return self;
}
@end
[/objc]

One thing that had me stumped for a long time was how slow it ran. The FPS would drop to 30 almost every time I ran the game. Turned out that the background textures were being antialiased.

As soon as I added [texture setAliasTexParameters];, all of my performance issues were gone. Something to take into consideration.