Infinite Scrolling

#1

Hi,

I’m currently developing a runner game. When a user picks up a speed powerup, the background should speed up too. The problem is, after picking up powerups there are gaps in the looping background images. In other words, background sprite # 2 is left behind.

BG_sprite1->setPosition( Point(BG_sprite1->getPosition().x-BG_speed, BG_sprite1->getPosition().y) );
BG_sprite2->setPosition( Point(BG_sprite2->getPosition().x-BG_speed, BG_sprite2->getPosition().y) );

 if( BG_sprite1->getPosition().x < -BG_sprite1->boundingBox().size.width){
 BG_sprite1->setPosition( Point( BG_sprite2->getPosition().x + BG_sprite2->boundingBox().size.width, BG_sprite1->getPosition().y));
 }
 if( BG_sprite2->getPosition().x < -BG_sprite2->boundingBox().size.width){
 BG_sprite2->setPosition( Point( BG_sprite1->getPosition().x + BG_sprite1->boundingBox().size.width, BG_sprite2->getPosition().y));
 }
#2

Take a look at Parallax Node: http://www.cocos2d-x.org/reference/native-cpp/V3.3rc0/d0/dd1/classcocos2d_1_1_parallax_node.html

There is a good example of this in cpp-tests also.

#4

Thank you! Im checking on it now.

#5

@slackmoehrle Hi, let me just clarify
void addChild (Node * child, int z, const Vec2 & parallaxRatio, const Vec2 & positionOffset )

what is parallaxRatio for? In cpp-tests
// background image is moved at a ratio of 0.4x, 0.5y
voidNode->addChild(background, -1, Vec2(0.4f,0.5f), Vec2::ZERO);

moved at ratio 0.4x, 0.5y?

#6

Ok I think I got it.

If I have 2 childs. child 1 move 0.4x, and child 2 move 0.5x … and I use MoveBy. They will move together but child 1 will be slower. Am I right?

#7

Indeed. You are.

#8

Now after that. I should put a loop on my update, when childs are out of the screen they should go back to default position?

#9

Yes, you will need to put some logic that when the sprite goes off if you need it back. change its position to off screen in the other direction and let it come back on. That might not work for your game logic. I don’t know what you are trying to accomplish exactly.

#10

Ok let me clarify my goal first.
type of game: endless runner

I need to loop background endlessly. Now if a player picks up a powerup, the player sprints (speeds up). To make it believable (since infinit scrolling is all about illusion), I should make everything move faster.

#11

I need to make a correction. I mis-understood. For an endless runner a parallax node is not correct. A parallax node is used to move layers at different speeds to simulate a 3d effect.

If you want to make an endless runner one way is to take objects, after they have moved off the screen and re-add them back. Maybe in a queue so you can add it back to the end of the queue. Objects come on the screen in queue order. Just throwing out an idea.

#12

I got it working already. Here’s what I did:

for(int i = 0; i<2; ++i)
{
    if(bg_flag[0]==i)
    {
        
        if(BG_sprites[i]->getPositionX() < bg_disappear)
        {
            bg_flag[0]+=1;
            if (bg_flag[0]>1)
            {
                bg_flag[0]=0;
            }
        }
        else
        {
            BG_sprites[i]->setPositionX(BG_sprites[i]->getPositionX()-BG_speed);
        }
    }
    else
    {
        BG_sprites[i]->setPositionX(BG_sprites[bg_flag[0]]->getPositionX()+BG_sprites[i]->getBoundingBox().size.width-BG_speed);
    }
}
#13

what are you doing for bg_disappear, screen width?

also, bg_flag and BG_speed?

#14

bg_disappear - determines if the background is out of the screen.
bg_flag - The first background sprite will be the flagship, the second sprite will just follow. If background sprite is out of the screen it becomes a follower.
BG_speed - speed of the looping background.

#15

Use MoveTo, RepeatForever and Sequence, CallBackN

MoveTo: -(Director->getInstance()->getVisibleSize().width + object->getContentSize().width)

Sequence: CallBackN after MoveTo

CallBackN: setPosition(0, 0)

RepeatForever: put Sequence