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 i

Answer 1

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

Answer 2

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 3

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 4

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.