Question

I’m working with cocos2d and try to make an effect that the background is flow…
So I make the code following.
But There are some problems.
When the time is up, then the distance between two images are more bigger than it’s first time.
Why this is?
I can’t understand this and any man help me?
Where is the bug.
The code is followed.

-(void) startScreen:(ccTime) dt
{

mBackgroundFar.position = ccp(mBackgroundFar.position.x - 50*dt , mBackgroundFar.position.y);
if (mBackgroundFar.position.x < -SCREEN_WIDTH * 2 )
    [mBackgroundFar setPosition:ccp(SCREEN_WIDTH*2 , mBackgroundFar.position.y)];
mBackgroundFar1.position = ccp(mBackgroundFar1.position.x - 50*dt , mBackgroundFar1.position.y);
if (mBackgroundFar1.position.x < -SCREEN_WIDTH * 2 )
    [mBackgroundFar1 setPosition:ccp(SCREEN_WIDTH*2 , mBackgroundFar1.position.y)];

mBackgroundMiddle.position = ccp(mBackgroundMiddle.position.x - 150*dt , mBackgroundMiddle.position.y);
if (mBackgroundMiddle.position.x < -SCREEN_WIDTH * 2 )
    [mBackgroundMiddle setPosition:ccp(SCREEN_WIDTH*2 , mBackgroundMiddle.position.y)];
mBackgroundMiddle1.position = ccp(mBackgroundMiddle1.position.x - 150*dt , mBackgroundMiddle1.position.y);
if (mBackgroundMiddle1.position.x < -SCREEN_WIDTH * 2 )
    [mBackgroundMiddle1 setPosition:ccp(SCREEN_WIDTH*2 , mBackgroundMiddle1.position.y)];

mBackgroundNear.position = ccp(mBackgroundNear.position.x - 250*dt , mBackgroundNear.position.y);
if (mBackgroundNear.position.x < -SCREEN_WIDTH * 2 )
    [mBackgroundNear setPosition:ccp(SCREEN_WIDTH*2 , mBackgroundNear.position.y)];
mBackgroundNear1.position = ccp(mBackgroundNear1.position.x - 250*dt , mBackgroundNear1.position.y);
if (mBackgroundNear1.position.x < -SCREEN_WIDTH * 2 )
    [mBackgroundNear1 setPosition:ccp(SCREEN_WIDTH*2 , mBackgroundNear1.position.y)];

}

Here, image size is 2*ScreenWidth of iphone(480*2), all of that.

Answer 1

Let’s say your images scroll from right to left. According to your code, once the image has scrolled past a certain point, you move it back to the right.

Problem is, positions are not based on pixel boundaries. You can actually position images on subpixel boundaries, such as {100.5, 100.12345}. This can create gaps, especially if your scrolling code is prone to produce rounding errors. For example this can easily happen if you multiply the movement speed with the delta time between updates in order to have the images scroll at the same rate regardless of the framerate.

The easiest fix is to overlap two images by 1 pixel. Another possible solution is to add all your images to the same node (can also be a spritebatch node or a layer), and then move only that single node containing the images. That way, the images always stay at a fixed distance to each other.