Question

i have this void function that moves two background imags horizontally, but i want to move vertically:

-(void) scroll:(ccTime)dt 
{
    //move 30*dt px vertically
    if (background.position.x<background2.position.x){
        background.position = ccp(background.position.x - 30*dt,background.contentSize.height/2);
        background2.position = ccp(background.position.x+background.contentSize.width,background2.contentSize.height/2);
    }else{
        background2.position = ccp(background2.position.x- 30*dt,background2.contentSize.height/2);
        background.position = ccp(background2.position.x+background2.contentSize.width ,background.contentSize.height/2);

    }

    //reset offscreen position
    if (background.position.x <-background.contentSize.width/2)
    {
        background.position = ccp(background2.position.x+background2.contentSize.width,background.contentSize.width/2);
    }else if (background2.position.x < -background2.contentSize.width/2)
    {
        background2.position = ccp(background.position.x+background.contentSize.width, background2.contentSize.width/2);
    }
}

Update to my code:

because i don’t want to change the x-co-ordinates i thought let me change the y, so the image can move vertically!

-(void) scroll:(ccTime)dt 
{
    //move 30*dt px vertically
    if (background.position.y<background2.position.y){
        background.position = ccp(background.position.y - 30*dt,background.contentSize.width/2);
        background2.position = ccp(background.position.x+background.contentSize.height,background2.contentSize.width/2);
    }else{
        background2.position = ccp(background2.position.y- 30*dt,background2.contentSize.width/2);
        background.position = ccp(background2.position.y+background2.contentSize.height ,background.contentSize.width/2);

    }

    //reset offscreen position
    if (background.position.y <-background.contentSize.width/2)
    {
        background.position = ccp(background2.position.y+background2.contentSize.height,background.contentSize.height/2);
    }else if (background2.position.x < -background2.contentSize.height/2)
    {
        background2.position = ccp(background.position.y+background.contentSize.height, background2.contentSize.height/2);
    }
}

but with that changed i just get first background, and no scrolling is being done :((

background initialization code:

        //adding background sprites
        background = [CCSprite spriteWithFile:@"bg.JPG"];
        background2 = [CCSprite spriteWithFile:@"bg.JPG"];
        [background.texture setAliasTexParameters];
        [background2.texture setAliasTexParameters];

        //position background sprites
        background.position =  ccp(background.contentSize.width/2,background.contentSize.height/2);
        background2.position = ccp(0,size.height);

        //schedule to move background sprites
        [self schedule:@selector(scroll:)];

        //adding them to the main layer
        [self addChild:background z:0];
        [self addChild:background2 z:0];

im really new to cocos2d and i don’t really understand how this works exactly, thank you!!

Answer 1

Now you have a record of the working code (your question here), so jump in the code and make it go vertical.

A position in cocos2d represents the center of your background.

position.x is the horizontal component and position.y is the vertical component.

Setting new positions with the ccp can be thought of as

background.position = ccp(newX,newY);

If we did the modification for you, we’d be robbing you of a good learning experience. Give it a shot and update your question when you’ve gotten closer, but still stuck.

Update…
So

Let’s look at one of the lines of code you changed

    background.position = ccp(background.position.y - 30*dt,background.contentSize.width/2);

This won’t do what you want because you only switched x <-> y and width <-> height
Don’t be afraid to write longer code if you can’t get it to work with short code (you have to learn before you can write short code)

For the one line we’re focusing on, lets break it down to work.

float bgOldX = background.position.x;
float bgOldY = background.position.y;
float bgNewY = bgOldY - 30*dt;
// no need for newX because we are moving horizontally
background.position = ccp(bgOldX,bgNewY);

Wherever you got your original code was written by someone who is comfortable with this sort of stuff. The 4 lines of code replacing 1 isn’t as pretty, but it will help you understand the process.

Update

Here’s a shot at making the top block of your code change to work. I believe you should see the two backgrounds moving. This is based off of the assumption that your first void function was working. I’ll be glad to help further if you cannot get the reset positions part working.

-(void) scroll:(ccTime)dt 
{
    // i am not too fond of my variable names
    //move 30*dt px vertically
    float bgOldX = background.position.x;
    float bgOldY = background.position.y;
    float bg2OldX = background2.position.x;
    float bg2OldY = background2.position.y;
    float bgNewY,bg2NewY;
    // no need for newX because we are moving horizontally
    if (background.position.y<background2.position.y){
        bgNewY = bgOldY-30dt;
        bg2NewY = bgNewY+background.contentSize.height;
        background.position = ccp(bgOldX,bgNewY);
        background2.position = ccp(bg2OldX, bg2NewY);    
    }else{
        bg2NewY = bg2OldY-30dt;
        bgNewY = bg2NewY+background2.contentSize.height;
        background.position = ccp(bgOldX,bgNewY);
        background2.position = ccp(bg2OldX, bg2NewY);    
    }

    //reset offscreen position    
    //reset offscreen position
    // etc....
}