How to create endless scrolling landscape using coco2d's CCParallaxNode

Question

I created a horizontally scrolling landscape using CCParallaxNode. However it does not seem to support endless scrolling in one direction. As soon as the first image "ends" the background shines through. Adding an unlimited number of images is of course not an option. I thought about the usual way, namely adding two sprites for each parallax layer next to each other, and simply moving one at the end of the other at the appropriate time.

However, I have two issues:

• parallax child nodes can't seem to be re-positioned
• the position of the child nodes vs how far they have moved seem to be in no relation to the parallax factor

This is how I set up the parallax node using 4 sprites with identical horizontal width:

CGPoint topOffset = CGPointMake(0, screenSize.height);
CGPoint midOffset = CGPointMake(0, screenSize.height / 2);
CGPoint downOffset = CGPointZero;

// Create a parallax node and add the sprites to it.
CCParallaxNode* paraNode = [CCParallaxNode node];
[paraNode addChild:para1 z:1 parallaxRatio:CGPointMake(0.5f, 0)
positionOffset:topOffset];
[paraNode addChild:para2 z:2 parallaxRatio:CGPointMake(1, 0) positionOffset:topOffset];
[paraNode addChild:para3 z:4 parallaxRatio:CGPointMake(2, 0) positionOffset:midOffset];
[paraNode addChild:para4 z:3 parallaxRatio:CGPointMake(3, 0) positionOffset:downOffset];
[self addChild:paraNode z:0 tag:ParallaxSceneTagParallaxNode];

Did anyone succeed in using CCParallaxNode for seamlessly endless scrolling?

Answer 1

First you will need to have as many sections as are needed so that you can fill the size of the screen plus one. So if you have a screen width 480 and a section width of 480 you need two sections to repeat. If your section width is only 240 then you would need 3 sections.

I would step back from using this CCParallaxNode for now and just get a single layer to endlessly scroll. You can do it by subclassing Layer to make EndlessLayer and then when it pans you will move the sections accordingly and move the floating extra section from the left to right if you are scrolling right (or left if you are moving left). Once you have this it is a piece of cake to just layer as many of these new layer types over each other and just move each one a fraction of what the nearest layer moves. You could even group this behavior into a new class like EndlessParallaxNode.