How to move background images infinitely in iOS co

Question

I have to move background images in iOS Coco2d but I am having a few difficulties. I have tried some solutions provided on some websites but have not been successful in getting them to work properly. Below is the code I am currently working on:-

The background moves smoothly the first time but it is not working properly after that:-

Code in init function :-

bg1 = [CCSprite spriteWithFile: @"bg1.png"];
bg1.anchorPoint = CGPointZero;
[self addChild:bg1 z:-2];

bg2 = [CCSprite spriteWithFile: @"bg1.png"];
[self addChild:bg2 z:-3];
bg2.anchorPoint = CGPointMake(480, 0);

// schedule a repeating callback on every frame
[self schedule:@selector(nextFrame:) interval:.4f];

---

- (void) nextFrame:(ccTime)dt {
    id actionMove = [CCMoveTo actionWithDuration:.4 position:ccp(bg1.position.x - 100 * dt, bg1.position.y)]; //winSize.height/2)];

    id actionMove1 = [CCMoveTo actionWithDuration:.4 position:ccp(bg2.position.x - 100 * dt, bg2.position.y)]; //winSize.height/2)];

    id actionMoveDone = [CCCallFuncN actionWithTarget:self selector:@selector(spriteMoveFinished:)];
    [bg1 runAction:[CCSequence actions:actionMove,actionMoveDone, nil]];
    [bg2 runAction:[CCSequence actions:actionMove1,actionMoveDone, nil]];   
}

-(void)spriteMoveFinished:(id)sender {

    CCSprite *sprite = (CCSprite *)sender;
    if(sprite == bg1) {
        if (bg1.position.x < -480) {
            [self removeChild:bg1 cleanup:NO];
            bg1.position = ccp( 480 , bg1.position.y );

            [self addChild:bg1 z:-2];
        }
    }
    else if(sprite == bg2)
        if (bg2.position.x < -480) {
            [self removeChild:bg2 cleanup:NO];
            bg2.position = ccp( bg1.position.x+ 480 , bg1.position.y );
            [self addChild:bg2 z:-3];
        }
    }
}

Answer 1

Try this, make sure you flip background 2.

 #define IS_IPAD (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad)
 #define MM_BG_SPEED_DUR       ( IS_IPAD ? (6.0f) : (2.0f) )

-(void)onEnter
{
    [super onEnter];
    [self initBackground];

    [self schedule: @selector(tick:)];
}

-(void)initBackground
{
   NSString *tex = @"BG/Background.png";//[self getThemeBG];

    mBG1 = [CCSprite spriteWithFile:tex];
    mBG1.position = ccp(s.width*0.5f,s.height*0.5f);
    [self addChild:mBG1 z:LAYER_BACKGROUND];

    mBG2 = [CCSprite spriteWithFile:tex];
    mBG2.position = ccp(s.width+s.width*0.5f,s.height*0.5f);

    mBG2.flipX = true;
    [self addChild:mBG2 z:LAYER_BACKGROUND];

}


-(void)scrollBackground:(ccTime)dt
{
    CGSize s = [[CCDirector sharedDirector] winSize];

    CGPoint pos1 = mBG1.position;
    CGPoint pos2 = mBG2.position;

    pos1.x -= MM_BG_SPEED_DUR;
    pos2.x -= MM_BG_SPEED_DUR;


    if(pos1.x <=-(s.width*0.5f) )
    {
        pos1.x = pos2.x + s.width;
    }

    if(pos2.x <=-(s.width*0.5f) )
    {
        pos2.x = pos1.x + s.width;
    }

    mBG1.position = pos1;
    mBG2.position = pos2;

}

-(void)tick:(ccTime)dt
{
    [self scrollBackground:dt];
}

Answer 2

I think this way is a little simpler. You initialize the backgrounds in initand move them in update.

In the init method:

// position backgrounds
CCSprite *bg1 = [CCSprite spriteWithSpriteFrame:spriteFrame];
CCSprite *bg2 = [CCSprite spriteWithSpriteFrame:spriteFrame];
CCSprite *bg3 = [CCSprite spriteWithSpriteFrame:spriteFrame];
bg1.anchorPoint = ccp(0, 0);
bg1.position = ccp(0, 0);
bg2.anchorPoint = ccp(0, 0);
bg2.position = ccp(bg1.contentSize.width-1, 0);
bg3.anchorPoint = ccp(0, 0);
bg3.position = ccp(2*bg1.contentSize.width-1, 0);
_backgrounds = @[bg1, bg2, bg3];

[self addChild:bg1 z:INT_MIN];
[self addChild:bg2 z:INT_MIN];
[self addChild:bg3 z:INT_MIN];

In the update method:

// endless scrolling for backgrounds
for (CCSprite *bg in _backgrounds) {
    bg.position = ccp(bg.position.x - 50 * delta, bg.position.y);
    if (bg.position.x < -1 * (bg.contentSize.width)) {
        bg.position = ccp(bg.position.x + (bg.contentSize.width*2)-2, 0);
    }
}

Note: the code is for Cocos2d 3.0