No Co-Ordination Between Layers while Bakground Moves with Different Speed

Question

I am developing an iPhone Game using COCOS2d Framework and Objective-C (in Landscape mode/view).

For the game, I am using a Background which has Four Layers ('Sky' on Top, 'Mountain' below sky, 'Hill' below Mountain and 'Foreground' extreme below). Here I need to move each Layer of the Background with a different speed like 'Sky' should move slower than Mountain, 'Mountain' should move slower than Hill and 'Hill' should move slower than Foreground.

While I am moving each Layer with a different speed, the game experiences a BREAK-UP BETWEEN CO-ORDINATION OF the LAYERS.

I tried resolving this with logic like: increasing image/Layer(width) size according to it's speed so that each layer should end and start running again with co-ordination. Couldn't get it to work.

This is my code for Moving the Background:

 -(void) backgroundmoving
{

 if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {
  //return kDevice_iPad;

  // Code for Each Layer's Moving Speed FOR iPad
  bk_f -=1.0;
  bk_f1 -=1.4;
  bk_f2 -=1.8;
  bk_f3 -=2.2;
 } else {

  // Code for Each Layer's Moving Speed FOR iPhone
  bk_f -=0.2;
  bk_f1 -=0.4;
  bk_f2 -=0.6;
  bk_f3 -=0.8;

 }

 if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad) {

  //return kDevice_iPad;
  if (bk_f <= -920*1.1) {bk_f=0;}
  if (bk_f1 <= -920*1.1) {bk_f1=0;}
  if (bk_f2 <= -920*1.1) {bk_f2=0;}
  if (bk_f3 <= -920*1.1) {bk_f3=0;}
  if (bk_f4 <= +920*1.1) {bk_f4=0;}
  } else {
  if (bk_f <= -480*2) {bk_f=0;}
  if (bk_f1 <= -480*2) {bk_f1=0;}
  if (bk_f2 <= -480*2) {bk_f2=0;}
  if (bk_f3 <= -480*2) {bk_f3=0;}
  if (bk_f4 <= +480*2) {bk_f4=0;}


 }

 _level_bkgrnd.position = ccp(bk_f, 0);
 _level_bkgrnd1.position = ccp(bk_f1, 0);
 _level_bkgrnd2.position = ccp(bk_f2, 0);
 _level_bkgrnd3.position = ccp(bk_f3, 0);

}

Above code gives me the background issue. Am providing screenshot links for reference:

1) http://screencast.com/t/seUjXClz

2) http://screencast.com/t/8tHq2KYnnMa

Any help pointing me in the right direction would be greatly appreciated.

Thanks In Advance :)

Answer 1

cocos2d has built in support for this, checkout some example code with Parallax scrolling. http://www.cocos2d-iphone.org/archives/22

Answer 2

Based on your question and screenshots, I'm interpreting your problem to be that you're having problems getting your layers to loop seamlessly. amleszk was correct in pointing you towards parallax scrolling. That's what you're trying to accomplish here and it just looks like perhaps your approach is off. I think there's a problem understanding what you mean by break-up between coordination of the layers. Work on it 1 layer at a time. Get your foreground to loop seamlessly, then get your next layer, and so forth moving back. Your layers won't repeat at the same time as they are moving at different speeds and will reach their end points at different times. From your screenshots, it appears that the faster moving layers don't loop until your slowest moving layer begins its loop. I know you tried to combat this with changing the layer widths to compensate, but it'd be cleaner, easier, and better overall to worry about each layer independently. But that's just my opinion.

If your problem is that your looped layers have a line between the sprites or slight jitter, then a quick solution that helped me for jitters/flashes between looped sprites was adding CCDirectorProjection2D to the init statement:

-(id) init
{
    if( (self=[super init]))
    {
        [[CCDirector sharedDirector] setProjection:CCDirectorProjection2D];