Cocos2D Infinite Background Picture

Question

I'm curious as to how to create an infinite background in cocos2d. For example lets say I was building an app with a man running from left to right, and I want him to run infinitely. Well in that case I would have to have an endless background so the man could keep running. I've continuously searched on this matter and have found nothing that actually works.

Any types of suggestions, answers, and tips are much appreciated.

Thanks

Answer 1

The easiest way would be to include two background images that mesh seamlessly together. (CCSprite would work fine for this) In your update method as soon as the first background is completely off of the screen move it back to the other side of the screen directly next to the second background and continually move both background images. Repeat this process for the second background as well.

Answer 2

CCTMXTiledMap can help you, but I'm afraid that you must handle end of map and add another manually. Check this tutorials how to use tiled maps in side-scrolling games, hope it will be useful for you:

http://www.raywenderlich.com/15230/how-to-make-a-platform-game-like-super-mario-brothers-part-1

Answer 3

Try This:

 #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 4

Try this. It is very easily to implement and works well. Just follow the tutorial on the read me.