Gaps between scrolling background objects

[Phaser911]

Hello, I have two endless scrolling background images and it works perfect if I don't change scrolling speed, but if those backgrounds scroll faster or slower, I can see gaps between them. Did you have a similar problem? How to resolve this? Here is my code:

    // create function

    bgSpeed = 6;

    bg1 = game.add.sprite(0, 0, 'background');
    bg2 = game.add.sprite(1280, 0, 'background');      // bg width is 1280

 

    // update function

    bg1.x -= bgSpeed;
    bg2.x -= bgSpeed;
    
    if (bg1.x - bgSpeed <= -1280)
    {
        bg1.x = 1280;
    }
    else if (bg2.x - bgSpeed <= -1280)
    {
        bg2.x = 1280;
    }

So, it works if I don't change anything, but I need to change bgSpeed when users click a button

    function buttonClick()
    {

        bgSpeed = 9;   // gaps

    } 

 

[lunafromthemoon]

You need to realign both backgrounds when changing them from place to place.

If you change bg1.x to 1280, but bg2.x is 4, then they will overlap for those 4 pixels and create a gap in the other side, so you have to adjust both at the same time.

bg1.x = 1280;

bg2.x = 0;

And the same when changing bg2 to the right side.

[Phaser911]

Yes, this helps me to fix gaps, but it gives me another problem. Backgrounds don't scroll smoothly, so if I changes their positions as suggested, it does not look good. I mean background "jumps" to its new position. Everything looks greate if I don't change scroll speed.

// bg2 jumps to 0 position

bg1.x = 1280;

bg2.x = 0;

[onlycape]

Hi @Phaser911,

Instead of using 2 sprites for the background, you could use a single tilesprite and its autoscroll method ( https://photonstorm.github.io/phaser-ce/Phaser.TileSprite.html#autoScroll ).

// in create function

bgSpeed = 6;
background = game.add.tileSprite(0,0,screenWidth,screenHeight,'imageKey');
background.autoScroll(bgSpeed,0); // bgSpeed in pixels per second


// in buttonClick()

function buttonClick()
    {
        bgSpeed = 9;
        background.autoScroll(bgSpeed,0);
    } 

Regards.

[Phaser911]

@onlycape Hey, yes this works great, I did not find any problems for now. Thanks