Question

I’m trying to make a side scrolling background game, in which the scrolling is being increased over time.
I’m currently trying to achieve this by having 2 background sprites, one fitting the whole screen and the other one right next to it. I schedule the movement of these backgrounds to the left decreasing the X position by a variable that increases over time (accelerates), and once any of the background sprites leaves the screen, I replace them right next to the screen again.

Here’s the code

- (void) scrollBackground:(ccTime) dT { 
  bg1.position = ccp(bg1.position.x - movingSpeed/2*dT, size.height/2);
  bg2.position = ccp(bg2.position.x - movingSpeed/2*dT, size.height/2);

  if (bg1.position.x <= -size.width/2) {        
    bg1.position = ccp(size.width + size.width/2, size.height/2);
  } else if (bg2.position.x <= -size.width/2) {
    bg2.position = ccp(size.width + size.width/2, size.height/2);
  }

The problem is that once the speed increases, a gap is shown between the sprites and gets bigger over time. Is there a way to fix this?

Thanks in advance

Answer 1

To be honest I’m not sure what is causing your problem, but I see that your background sprites are both relative to screen… You might try making your background sprites relative to each other… Maybe this fixes your problem. You could do something like this:

- (void) scrollBackground:(ccTime) dT {
    bg1.position = ccp(bg1.position.x - movingSpeed/2*dT, size.height/2);
    bg2.position = ccp(bg2.position.x - movingSpeed/2*dT, size.height/2);

    if (bg1.position.x <= -size.width/2) {
        bg1.position = ccp(bg2.position.x + size.width, size.height/2);
    } else if (bg2.position.x <= -size.width/2) {
        bg2.position = ccp(bg1.position.x + size.width, size.height/2);
    }
    .....
}

I hope this works for you